Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I disable the right button after the slide show the last set of li

    So here I have a rotator with left and right arrow. I want to be able to remove the right arrow when it comes to the last slide. Right now as the codes is it only remove (with the off class) the right arrow after you click on the right arrow once. Because I will be adding more slides I want the selector to be able to know when to remove the arrow (addClass "off"). Can someone help me with this ? I believed it should be in this areas..

    Code:
                    $('.left_button2').live('click',function(){
    					
    			$('ul.fb-carousel2').animate({left:'+=444px'},300);
    			$(".left_button2").addClass("off");
    			$(".right_button2").removeClass("off");
    			
    		});	
    		$('.right_button2').live('click',function(){
    					
    			$('ul.fb-carousel2').animate({left:'-=444px'},300);
    			$(".left_button2").removeClass("off");
    			$(".right_button2").addClass("off");
    			
    		});
    The rest of the codes is below. Let me know if you need anything else for me to make this more clear. Thanks in advance.

    Code:
    			
    $(document).ready(function(){ 
    		
    		// ROTATOR INITIALIZE	
    		var quoteNumber = 0;
    		var quoteLength = $('ul.fb-carousel li').length - 1;
    		var quoteLength2 = $('ul.fb-carousel2 li').length - 1;
    		
    		
    		$('.left_button').live('click',function(){
    					
    			$('ul.fb-carousel li').eq(quoteNumber).removeClass('on');
    			quoteNumber--;
    			$('ul.fb-carousel li').eq(quoteNumber).addClass('on');
    			
    			if (quoteNumber == 0) {
    				$(".left_button").addClass("off")
    				$(".right_button").removeClass("off");
    			}	else {
    					$(".left_button").removeClass("off");
    					$(".right_button").removeClass("off");
    				}
    		});	
    		
    							
    		$('.right_button').live('click',function(){
    				
    			$('ul.fb-carousel li').eq(quoteNumber).removeClass('on');
    			quoteNumber++;
    			$('ul.fb-carousel li').eq(quoteNumber).addClass('on');
    			
    			if (quoteNumber == quoteLength2) {
    				$(".right_button").addClass("off")
    				$(".left_button").removeClass("off");
    			} else if (quoteNumber < quoteLength2) {
    					$(".right_button").removeClass("off");
    					$(".left_button").removeClass("off");
    				}
    		});	
    		
    		$('.left_button2').live('click',function(){
    					
    			$('ul.fb-carousel2').animate({left:'+=444px'},300);
    			$(".left_button2").addClass("off");
    			$(".right_button2").removeClass("off");
    			
    		});	
    		$('.right_button2').live('click',function(){
    					
    			$('ul.fb-carousel2').animate({left:'-=444px'},300);
    			$(".left_button2").removeClass("off");
    			$(".right_button2").addClass("off");
    			
    		});	
    });
    RESOLVED: this was all I needed...
    Code:
    		$('.left_button2').live('click',function(){
    			$('ul.fb-carousel2').animate({left:'+=444px'},300, function (){
    			if ($('ul.fb-carousel2').css('left') == '0px')
    			$(".left_button2").addClass("off");
    			});
    			$(".right_button2").removeClass("off");
    		});	
    		
    		$('.right_button2').live('click',function(){
    			$('ul.fb-carousel2').animate({left:'-=444px'},300, function() {
    			if ($('ul.fb-carousel2').css('left') == '-888px')
    			$(".right_button2").addClass("off");
    			});
    			$(".left_button2").removeClass("off");
    		});
    Last edited by Ottster; 07-20-2012 at 05:23 PM.


 

Tags for this Thread

Posting Permissions

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