javascript - Swipe Left/Right without breaking click or vertical swiping event -
swiping http://maroonlemoon.com/mobile/bookintransit.png
i using jquery mobile/javascript , html 5 develop web app. want achieve touch scrolling event on smart devices. after noticing jquery mobile's $(document).on("swipeleft , swiperight... keeps hanging on mobile devices, used javascript code snippet uses vmousedown , vmouseup events, , works decently problem when use event.preventdefault, breaks < href="#bar" clicks have jquery mobile navigation transitions. also, normal vertical scrolling gets broken code. idea how can overcome using same javascript code (don't want use jquery mobile's swipe events)
//javascript var page = 1; var gnstartx = 0; var gnstarty = 0; var gnendx = 0; var gnendy = 0; $("#pages-content").on('vmousedown',function(event){ gnstartx = event.pagex; gnstarty = event.pagey; event.preventdefault(); bindall(); // function binds div clicks inside #pages-content // want re-bind normal vertical scrolling , clicks on <a> tags jquery mobile transitions }); $("#pages-content").on('vmouseup', function(event){ gnendx = event.pagex; gnendy = event.pagey; var distance = math.ceil(nthroot(math.pow((gnendx - gnstartx),2) + math.pow((gnendy - gnstarty),2), 2)); if(math.abs(gnendx - gnstartx) > math.abs(gnendy - gnstarty)) { if(gnendx > gnstartx) { if(page>1) { $('#pages-content').animate({"left":"+=100%"},function(){}); page--; } } else { if(page<4){ $('#pages-content').animate({"left":"-=100%"},function(){}); page++; } } } event.preventdefault(); updatepagetitle(page); bindall(); }); function nthroot(x, n) { try { var negate = n % 2 == 1 && x < 0; if(negate) x = -x; var possible = math.pow(x, 1 / n); n = math.pow(possible, n); if(math.abs(x - n) < 1 && (x > 0 == n > 0)) return negate ? -possible : possible; } catch(e){} } <!-- html code <div id="container" role="main" class="ui-content" style="overflow-x:hidden; padding:0px;"> <div id="pages-content" style="position:relative;left:0%; width:500%; padding:1%;"> <div id="page1" style="float:left; width:19.5%; padding-right:0.5%"> <!-- div may contain <a tags href="" , html5 transition attr </div> <div id="page2".... page5 </div> </div>
Comments
Post a Comment