I have a div slider based on jQuery It works like a charm.
The only problem is that if you click twice you are likely to mess up the position of the divs, and you can end up with an empty area with the previous button still active.
How do I disable clicks while it slides/fades and until the div is in place?
-See code below:
<style> a, a:link, a:visited, a:hover, a:active { color: #666; text-decoration:none; } a:hover { font-weight:bold; } a:visited { color: #999; } #h_container { width: 200px; overflow: hidden; } #h_wrapper { width: 600px; } .h_slide { width: 200px; height: 200px; overflow: hidden; float: left; } </style> <script> var SlideWidth = 200; var SlideSpeed = 500; $(document).ready(function() { // set the prev and next buttons display SetNavigationDisplay(); }); function CurrentMargin() { // get current margin of slider var currentMargin = $("#h_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").fadeOut(); } else { $("#PreviousButton").fadeIn(); } // get wrapper width var wrapperWidth = $("#h_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").fadeOut(); } else { $("#NextButton").fadeIn(); } } 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. $("#h_wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 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. $("#h_wrapper").animate({ marginLeft: newMargin }, SlideSpeed, function() { SetNavigationDisplay() }); } </script> <!--- DISPLAY CONTAINER ---> <div id="h_container"> <!-- OUTTER WRAPPER --> <div id="h_wrapper"> <!-- SLIDE 1 --> <div id="slide1" class="h_slide"> <p>Part 1</p> </div> <!-- SLIDE 2 --> <div id="slide2" class="h_slide"> <p>Part 2</p> </div> <!-- SLIDE 3 --> <div id="slide3" class="h_slide"> <p>Part 3</p> </div> </div> <!--- NAVIGATION BUTTONS --> <table style="width:200px; padding: 0 10px 0 10px;"> <tbody> <tr> <td align="left"><a href="javascript:void(0)" onclick="PreviousSlide()" id="PreviousButton" style="display:none">« Previous</a> </td> <td align="right"><a href="javascript:void(0)" onclick="NextSlide()" id="NextButton">Next »</a> </td> </tr> </tbody> 
