javascript - Jquery slider attach with Mouse event -
i using jquery slider working fine in chrome browserbut when run same code in firefox event attach mouse , when move either left or right auto slide scroll.
so want functionality chrome. can 1 please me how can stop hover effect firefox
i using samve version of jquery-min.js , jquery-ui.js 1.11.1 , jquery-ui.css version 1.9.1.
any one's thought or review appreciated
i paste complete code below , set fiddle link
<html> <head> <title>slider problem</title> <link href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> </head> <body> <div id="" class="span12 sliderspecific ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"> <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" tabindex="-1" style="left: 0%;"></a></div> <script type="text/javascript"> $(document).ready(function(){ $('.sliderspecific').slider({ animate: true, range: "min", step: parseint(50), slide: function( event, ui ) { alert(' slider slide here'); } }); }); </script> </body> </html>
i able re-create issue, it's not bug. it's browser specific behavior related how mouseup event processed. ie (edge) has same behavior firefox. chrome seems exception, can still simulate same behavior in chrome. haven't tested safari or other browsers. comes down slide function triggered on mousedown. have defined function raising alert. typically happening (i'm guessing) after alert opens picking finger off mouse button , clicking again on ok button. causes alert's message box handle mouseup event. chrome happens handle nicely, allowing parent window (main browser window) receive mouseup event. apparently firefox , ie not. therefore, page still thinks mouse button depressed, , thinks you're still trying use slider after close alert.
i think fact can predict can simulate in chrome evidence understand problem. way simulate in chrome click on slider , start drag it, when alert opens, not release mouse button, instead use spacebar "click ok button". after alert closes, while still holding mouse button down, move left right , you'll see same result saw in firefox. you're manually simulating way firefox treating mouse's state.
so how fix this? remove alert, or put alert on timeout, allow mouseup event handled before alert message box gobbles up...
$(document).ready(function(){ // block isn't necessary, adding completion in example var cnt = 0; // keeping count unique messages // adding container non-blocking output messages $('body').append('<div id="output"></div>'); // end unnecessary block ---------------------------------------------- $('.sliderspecific').slider({ animate: true, range: "min", step: parseint(50), slide: function( event, ui ) { // causes unexpected behavior in ie/firefox //alert(' slider slide here'); // non-blocking output option... console.log(' slider slide here'); // non-blocking output option... $('div#output').html(' slider slide here (' + (cnt++).tostring() + ')'); // workaround using blocking output (alert/confirm) settimeout(function() { alert('yay, on delay works!'); }, 0); } }); });
Comments
Post a Comment