Question

My website is: http://www.grozav.com

I need help in repairing the code at the thumbnail slider part (Portfolio). If someone clicks the arrow twice, really fast, it gets off track, and the coding stops working.

HTML Markup:

<div id="portfolio">
    <div id="up-arrow"><a href="#portfolio" title="Slide Up">UP</a></div>

    <div id="thumbnails">
    <div id="slider">
              thumbnails go here
    </div>
    </div>   
    <div id="down-arrow"><a href="#portfolio" title="Slide Down">DOWN</a></div>  
</div>

Jquery:

$('#up-arrow a').stop().click(function(){
    if($('#slider').css("margin-top")!='0px' ){
        $('#slider').stop().animate({'margin-top':'+=360px'})
        $('#down-arrow').css({'background-position':'0 0px'})
        $('#down-arrow a').css({'cursor':'pointer'})
        //CHANGE <='PX' VALUE FOR NEXT SLIDE
        if($('#slider').css("margin-top")<='-360px'){
                $('#up-arrow').css({'background-position':'0 -28px'})   
                $('#up-arrow a').css({'cursor':'help'})     }
        $('#down-arrow').css({'background-position':'0 0px'})
    }   
    else if ($('#slider').css("margin-top")>'0px') {
        $('#slider').css({'margin-top':'0px'});
    }           
          });

$('#down-arrow a').stop().click(function(){
    if($('#slider').css("margin-top")!='-720px' || $('#slider').css("margin-top")<'-720px'){
        $('#slider').stop().animate({'margin-top':'-=360px'})
        $('#up-arrow').css({'background-position':'0 0px'})
        $('#up-arrow a').css({'cursor':'pointer'})
        //CHANGE <='PX' VALUE FOR NEXT SLIDE
        if($('#slider').css("margin-top")<='-360px'){
                $('#down-arrow').css({'background-position':'0 -27px'}) 
                $('#down-arrow a').css({'cursor':'help'})       }
        $('#up-arrow').css({'background-position':'0 0px'})
    }   
    else if ($('#slider').css("margin-top")<'-720px') {
        $('#slider').css({'margin-top':'-360px'});
    }           
          });

It changes the button aspect when it’s at the beginning and at the end of the slides. I coded it this way due to lack of knowledge in the sliders domain.

How can I fix it, or at least prevent it from clicking twice?

Answer 1

Why not wrap your function in an if condition that checks to see if the slider is being animated? Then they’ll only work when the animation is not occurring.

Something like if( !$('#slider').is(':animated') ){ ... your code ... }