www.webdeveloper.com
Results 1 to 12 of 12

Thread: Prev / Next Buttons

  1. #1
    Join Date
    Nov 2011
    Posts
    82

    Prev / Next Buttons

    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.

    http://themeforest.s3.amazonaws.com/...tut-index.html

    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.

    http://blog.themeforest.net/tutorial...-using-jquery/

  2. #2
    Join Date
    Nov 2011
    Posts
    82
    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>
    My Arrows (Previous and Next):

    HTML Code:
    	<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>
    And each page it goes to:

    HTML Code:
    <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>
    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.

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    Display an alert in the clip function like this
    Code:
    $(document).ready(function() {
       $('a.link').click(function () {alert($(this).attr('href'));
          //...
       });  
    });
    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 !

  4. #4
    Join Date
    Nov 2011
    Posts
    82
    @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!

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    I am not the right man. I do not use jQuery...

    After changing the hrefs #box1 and #box2 to prev and next, the proposition with a global variable crrBox (the number of the current visible box), could be something like :
    Code:
    <script type="text/javascript">
    // Define the variable
    var crrBox=1;
    	$(document).ready(function() {
    		$('a.link').click(function () {
    		// 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
    			// 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 link if not next 
    			// Update current Box
    			crrBox=newBox;
    			return false;  
    		});  
    	});
    </script>
    It remains to define the class displaynone (which replace selected) with CSS for the link .displaynone {display:none}. Sorry not tested...
    Last edited by 007Julien; 02-14-2012 at 10:49 AM.

  6. #6
    Join Date
    Nov 2011
    Posts
    82
    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!

  7. #7
    Join Date
    Nov 2011
    Posts
    82
    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>
    Is there something wrong with this code that would cause an error? I can't seem to locate the problem :/

  8. #8
    Join Date
    Nov 2011
    Posts
    82
    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.

  9. #9
    Join Date
    Nov 2011
    Posts
    82
    Gracias Julien007! Thanks again for all the help.. I figured out the problem.

  10. #10
    Join Date
    Nov 2011
    Posts
    82
    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;  
    		});
    		});

  11. #11
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266

    Really useful mathematics, we know why we make errors !

    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 || newBox==nmbBox) $(this).addClass('displaynone');
    		//...
    	
    		});
    	});
    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)
    Last edited by 007Julien; 02-17-2012 at 04:38 PM. Reason: title

  12. #12
    Join Date
    Nov 2011
    Posts
    82
    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;  
    		});
    		});
    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');
    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?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles