Prev / Next Buttons

@andy_richinFeb 13.2012

Hello. I found a neat tutorial that I am using but I am having a problem implementing Previous and Next buttons. Here is a link to the tutorial that I found.

~~[url]~~http://themeforest.s3.amazonaws.com/116_parallax/tutorial-source-files/tut-index.html[/url]

You will see the 4 buttons at the top that take you to each of the 4 pages. How can I change the code so this works with a Previous / Next? In desperate need of help!!

Here is the original site with this example that shows the code. I am not looking for the answer but some direction would be wonderful! Thanks so much.

~~[url]~~http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/[/url]

to post a comment

JavaScript

11 Comments(s) _↴

@andy_richinauthorFeb 13.2012 — #I wanted to try and simplify my question.. maybe this will help.

My javascript code:

[CODE]
  <script type="text/javascript">
 
  $(document).ready(function() { 
   $('a.link').click(function () { 
   $('#wrapper').scrollTo($(this).attr('href'), 800);
   $('a.link').removeClass('selected'); 
   $(this).addClass('selected');
   return false; 
   }); 
  });
 
  function setPosition(check, div, p1, p2, p3, p4) {
  if(check==='#box1')
   {
   $(div).scrollTo(p1, 800);
   }
  else if(check==='#box2')
   {
   $(div).scrollTo(p2, 800);
   }
  else if(check==='#box3')
   {
   $(div).scrollTo(p3, 800);
   }
  else
   {
   $(div).scrollTo(p4, 800);
   }
  };
  </script>
 [/CODE]

My Arrows (Previous and Next):

[code=html]
  <div id="leftarrow">
 <ul>
 <li><a href="#box1" class="link"><img src="images/arrow_left.png" width="130" height="60"></a></li>
 </ul>
 </div>
 <div id="rightarrow">
 <ul>
 <li><a href="#box2" class="link"><img src="images/arrow_right.png" width="130" height="60"></a></li>
 </ul>
 </div>
 [/code]

And each page it goes to:

[code=html]
 <div id="wrapper">
 <ul id="mask">
 <li id="box1" class="box">
 <a name="box1"></a>
 <div id="content1">
 </div>
 </li>
 <li id="box2" class="box">
 <a name="box2"></a>
 <div id="content2">
 </div>
 </li>
 <li id="box3" class="box">
 <a name="box3"></a>
 <div id="content3">
 </div>
 </li>
 </ul>
 </div>
 [/code]

I'm not sure what I would make the "href" tag for each button so it is not just calling the first 2 boxes. You can see the right arrow goes to box2 and the left back to box1.

@007JulienFeb 13.2012 — #Display an alert in the clip function like this

[CODE]$(document).ready(function() {
 $('a.link').click(function () {alert($(this).attr('href'));
 //...
 }); 

 });
 [/CODE]

To verify that this value is the href of your two buttons. Change, at first, this hrefs with prev and next.

Then the problem is to find the actual #boxN to build the new href, if any ("#box"+(N-(-1)) if next and "#box"+(N-1) if previous).

A global variable (visibleBox="#box1" at the beginning - N = visibleBox.substr(4)) or the position of the #cloud1 (0px => #box1, 400px => #box2, 800px => #box3 - N = (parseInt(position)%400)+1) can give this actual box #boxN) and then the future...

You have too not to display the button if not previous or next box.

Good Luck !

@andy_richinauthorFeb 14.2012 — #@007Julien.. thank you so much for the help. I have tried to implement what you said but I am not sure how to write the variable and apply the prev / next. I am not very good at javascript, therefore am not sure how to write this out... can you spell it out for me?? Thanks a lot I appreciate it!

@007JulienFeb 14.2012 — #I am not the right man. I do not use jQuery...

After changing the hrefs [I]#box1[/I] and [I]#box2[/I] to [I]prev[/I] and [I]next[/I], the proposition with a global variable [I]crrBox[/I] (the number of the current visible box), could be something like :

[CODE]<script type="text/javascript">
 [COLOR="Blue"]// Define the variable[/COLOR]
 var crrBox=1;
 $(document).ready(function() {
 $('a.link').click(function () {
 [COLOR="Blue"]// Onclick you have to define the new box 
 var newBox;// a local variable
 if ($(this).attr('href')=='prev')  newBox=crrBox-1;
 if ($(this).attr('href')=='suiv')  newBox=crrBox-(-1);// to add and not to concatenate[/COLOR]
 [COLOR="Blue"]// Go to this new box[/COLOR]
 $('#wrapper').scrollTo([COLOR="Blue"]"#box"+newBox[/COLOR], 800);
 [COLOR="Blue"]// not to display the link if there is no prev or next box
 $('a.link').removeClass('displaynone');// Display the two links 

 if (newBox==1 || newBox==3) $(this).addClass('displaynone');// Mask the link if not next 
 // Update current Box
 crrBox=newBox;[/COLOR]
 return false; 

 }); 

 });
 </script>
 [/CODE]

It remains to define the class displaynone (which replace selected) with CSS for the link [I].displaynone {display:none}[/I]. Sorry not tested...

@andy_richinauthorFeb 14.2012 — #Thank you so much! This seems to make sense, and I will keep working on it. For some reason I am getting an error in the code, not sure why. But thanks again!

@andy_richinauthorFeb 14.2012 — #

[CODE]
  <script type="text/javascript">
 
 // Define the variable
 var crrBox=1;
 $(document).ready(function() {
 $('a.link').click(function () {alert($(this).attr('href'));
 // Onclick you have to define the new box 
 var newBox;// a local variable
 if ($(this).attr('href')=='prev')  newBox=crrBox-1;
 if ($(this).attr('href')=='next')  newBox=crrBox-(-1);// to add and not to concatenate
 // Go to this new box
 $('#wrapper').scrollTo("#box"+newBox, 800);
 // not to display the link if there is no prev or next box
 $('a.link').removeClass('displaynone');// Display the two links 

 if (newBox==1 || newBox==3) $(this).addClass('displaynone');// Mask the current link if not next link
 // Update current Box
 crrBox=newBox;
 return false; 

 }); 
 
  function setPosition(check, div, p1, p2, p3, p4) {
  if(check==='#box1')
   {
   $(div).scrollTo(p1, 800);
   }
  else if(check==='#box2')
   {
   $(div).scrollTo(p2, 800);
   }
  else if(check==='#box3')
   {
   $(div).scrollTo(p3, 800);
   }
  else
   {
   $(div).scrollTo(p4, 800);
   }
  };
 </script>
 [/CODE]

Is there something wrong with this code that would cause an error? I can't seem to locate the problem :/

@andy_richinauthorFeb 15.2012 — #In the post above, is the code for the Set position incorrect? Or maybe some kind of syntax error? Unfortunately my javascript coding is not good. Help! Thanks.

@andy_richinauthorFeb 15.2012 — #Gracias Julien007! Thanks again for all the help.. I figured out the problem.

@andy_richinauthorFeb 17.2012 — #Using this code, which I have found works, how would I be able to a limit so it only works with 4 screens? Right now, once you get to the 4th screen, if you click next it does nothing, but to go back you have to click the previous button however many extra times you clicked the next button. If that makes sense. It seems that there is no limit set. Also, if possible, would it be easy to create a carousel effect so when you get to the 4th screen and click next it would go back to the 1st? Thanks for any help in advance.

[CODE]
  var crrBox=1;
 $(document).ready(function() {
 $('a.link').click(function () {/*alert($(this).attr('href'));*/
 // Onclick you have to define the new box 
 var newBox;// a local variable
 if ($(this).attr('href')=='prev')  newBox=crrBox-1;
 if ($(this).attr('href')=='next')  newBox=crrBox-(-1);// to add and not to concatenate
 // Go to this new box
 $('#wrapper').scrollTo("#box"+newBox, 1000);
 
   // not to display the link if there is no prev or next box
   $('a.link').removeClass('displaynone');// Display the two links 
   if (newBox==1 || newBox==3) $(this).addClass('displaynone');// Mask the current link if not next link
   // Update current Box
   crrBox=newBox;
   return false; 
   });
   }); 
 [/CODE]

@007JulienFeb 17.2012 — #To change the value of chexbox, you have to count or define the number of check boxes and to change the value which mask the next checkbox. For example with 5 chexbox

[CODE]var crrBox=1,nmbBox=5;
 $(document).ready(function() {
 // ...
 
   if (newBox==1 || [COLOR="Blue"]newBox==nmbBox[/COLOR]) $(this).addClass('displaynone');
   //...
 
   });
  });[/CODE]

So you mask the next button only if you have just clicked this one and if you arrived at the fifth (or the previous, if you have clicked this one and if you arrived at the first) !

But if you want to create a carousel (without this line, and the preceding one, to mask eventually a button), it would be better to number the boxes from 0 to nmbBox-1 and to work modulo nmbBox (with the rest of the divide by nmbBox). Then to subtract 1 : newBox=(crrBox-1+nmbBox)%nmbBox; to add 1 newBox=(crrBox-(-1))%nmbBox;

With your boxes from 1 to nmbBox, it's a little more complex you have to subtract 1 before to applied this formulas and to add 1 after...

To subtraxct 1 : newBox=(crrBox-2+nmbBox)%nmbBox+1 (1=>5=>4=>3=>2=>1)

To add 1 newBox=crrBox%nmbBox+1; (1=>2=>3=>4=>5=>1)

@andy_richinauthorFeb 21.2012 — #So with the code that I have now, which works, but it doesn't set a total number of boxes...

[CODE]	var crrBox=1;
 $(document).ready(function() {
 $('a.link').click(function () {/*alert($(this).attr('href'));*/
 // Onclick you have to define the new box 
 var newBox;// a local variable
 if ($(this).attr('href')=='prev')  newBox=crrBox-1;
 if ($(this).attr('href')=='next')  newBox=crrBox-(-1);// to add and not to concatenate
 // Go to this new box
 $('#wrapper').scrollTo("#box"+newBox, 1000);
 
   // not to display the link if there is no prev or next box
   $('a.link').removeClass('displaynone');// Display the two links 
   if (newBox==1 || newBox==3) $(this).addClass('displaynone');// Mask the current link if not next link
   // Update current Box
   crrBox=newBox;
   return false; 
   });
   }); 
 [/CODE]

Would I need to adjust the first and second "IF" statements with the "Prev" and "Next" buttons with the code you provided in your previous post?

[CODE]if (newBox==1 || newBox==nmbBox) $(this).addClass('displaynone');[/CODE]

I tried using the same code I have above but changing the third IF statement with this code and adding the new "nmbBox" variable but nothing seemed to work. Any suggestions?

Also in #JavaScript _↴

creating folders and organizing files in JS [RESOLVED] Javascript Numeric Validation Question Repeating text only in for loop?

Success!

Help @andy_richin spread the word by sharing this article on Twitter...

Tweet This

Prev / Next Buttons

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Prev / Next Buttons

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴