jQuery Forum

Hey guys...

I'm a particularly hopeless case. I started my adventures in jQuery yesterday... Was hoping you lot of superiors could possibly help me?

The problem:
I'm using a slideshow type navigation system for looking through products. All is well and good until the next/previous arrows are clicked more than once before the animation has finished. Clicking it more than once causes the thing to completely bug out and sends the divs into an irreversible horizontal spiral through Hell. I was wondering if there were a way to stop the user from clicking the next/previous arrows more than once so that the slideshow navigation doesn't whack out.

Been cycling through Google search results for the past three hours and have finally found my way here. Any help for this idiot?

An example of the live code can be seen here:
http://www.acidcoven.com/test/Website/index.html


The script

1.         var SlideWidth = 305;
           var SlideSpeed = 1000;
   
           $(document).ready(function () {
               // set the prev and next buttons display
               SetNavigationDisplay();
           });
   
           function CurrentMargin() {
               // get current margin of slider
               var currentMargin = $("#slider-wrapper").css("margin-left");
   
               // first page load, margin will be auto, we need to change this to 0
               if (currentMargin == "auto") {
                   currentMargin = 0;
               }
   
               // return the current margin to the function as an integer
               return parseInt(currentMargin);
           }
   
           function SetNavigationDisplay() {
               // get current margin
               var currentMargin = CurrentMargin();
   
               // if current margin is at 0, then we are at the beginning, hide previous
               if (currentMargin == 0) {
                   $("#PreviousButton").hide();
               }
               else {
                   $("#PreviousButton").show();
               }
   
               // get wrapper width
               var wrapperWidth = $("#slider-wrapper").width();
   
               // turn current margin into postive number and calculate if we are at last slide, if so, hide next button
               if ((currentMargin * -1) == (wrapperWidth - SlideWidth)) {
                   $("#NextButton").hide();
               }
               else {
                   $("#NextButton").show();
               }
           }
   
           function NextSlide() {
               // get the current margin and subtract the slide width
               var newMargin = CurrentMargin() - SlideWidth;
   
               // slide the wrapper to the left to show the next panel at the set speed. Then set the nav display on completion of animation.
               $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeInOutElastic', function () { SetNavigationDisplay() });
         
   }
   
           function PreviousSlide() {
               // get the current margin and subtract the slide width
               var newMargin = CurrentMargin() + SlideWidth;
   
               // slide the wrapper to the right to show the previous panel at the set speed. Then set the nav display on completion of animation.
               $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeOutElastic', function () { SetNavigationDisplay() });
           }