html - jQuery div slider prevent click while sliding -

html - jQuery div slider prevent click while sliding -

i have div slider based on jquery works charm.

http://jsfiddle.net/7chvu/15/

the problem if click twice mess position of divs, , can end empty area previous button still active.

how disable clicks while slides/fades , until div 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 prev , next buttons display setnavigationdisplay(); }); function currentmargin() { // current margin of slider var currentmargin = $("#h_wrapper").css("margin-left"); // first page load, margin auto, need alter 0 if (currentmargin == "auto") { currentmargin = 0; } // homecoming current margin function integer homecoming parseint(currentmargin); } function setnavigationdisplay() { // current margin var currentmargin = currentmargin(); // if current margin @ 0, @ beginning, hide previous if (currentmargin == 0) { $("#previousbutton").fadeout(); } else { $("#previousbutton").fadein(); } // wrapper width var wrapperwidth = $("#h_wrapper").width(); // turn current margin postive number , calculate if @ lastly slide, if so, hide next button if ((currentmargin * -1) == (wrapperwidth - slidewidth)) { $("#nextbutton").fadeout(); } else { $("#nextbutton").fadein(); } } function nextslide() { // current margin , subtract slide width var newmargin = currentmargin() - slidewidth; // slide wrapper left show next panel @ set speed. set nav display on completion of animation. $("#h_wrapper").animate({ marginleft: newmargin }, slidespeed, function() { setnavigationdisplay() }); } function previousslide() { // current margin , subtract slide width var newmargin = currentmargin() + slidewidth; // slide wrapper right show previous panel @ set speed. set 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">&laquo; previous</a> </td> <td align="right"><a href="javascript:void(0)" onclick="nextslide()" id="nextbutton">next &raquo;</a> </td> </tr> </tbody>

first need bind event in javascript rather in html.

var $body=$(document.body); $body.on({click: function() {}},"#nextbutton");

to prevent click during sliding there many solutions; 1 define global variable.

var inprogress=false;

upon click event check whether variable true/false if false set true , exec anim, set false in anim callback.

$body.on({ click: function() { if (!inprogress) { inprogress=true; $("#h_wrapper").animate({ marginleft: newmargin }, slidespeed, function() { setnavigationdisplay(); inprogress=false; }); } } },"#nextbutton");

i hope thought & allow finalize event handlers fit needs

jquery html slider fade