Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing swipe sensitivity with jQuery Mobile

I'm having an issue with the iPhone and swiping to other pages. When scrolling down a page the sensitivity of the motion is touchy and will swipe to the next page. Is there a way to control swipe sensitivity within this code:

<script type="text/javascript">
$(document).ready(function(){
    var counter = 1;
    $(document).bind('swipeleft','#deal_1',function (event, ui) {
    counter++;
    if(counter>3)
    counter = 1;
    var nextpage = 'dailydeal'+counter+'.html';
    if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, {transition: "slide",
        reverse: false}, true, true);
        }
    });
 $(document).bind('swiperight','#deal_1',function (event, ui) {
     counter--;
     if(counter<1)
     counter=3;
     var prevpage = 'dailydeal'+counter+'.html';
     if (prevpage.length > 0) {
         $.mobile.changePage(prevpage, {transition: "slide",
         reverse: true}, true, true);
     }
     });
  });
</script>
like image 485
Allen B. Avatar asked May 16 '13 04:05

Allen B.


2 Answers

To tailor this response to all devices, I would suggest setting the threshold relative to the screen width. For example:

$.event.special.swipe.scrollSupressionThreshold = (screen.availWidth) / 60;
$.event.special.swipe.horizontalDistanceThreshold = (screen.availWidth) / 60;
$.event.special.swipe.verticalDistanceThreshold = (screen.availHeight) / 13;

See jQuery Mobile API Documentation

like image 119
user2573644 Avatar answered Oct 18 '22 12:10

user2573644


This seems to work for the most part:

<script type="text/javascript">
    $(document).bind("mobileinit", function () {
    $.event.special.swipe.horizontalDistanceThreshold = 100;
    });
</script>

From my understanding the horizontalDistanceThreshold is set at default for 30px, so I changed it to 100. So far it seems balanced when scrolling down, and without being too sensitive.

like image 7
Allen B. Avatar answered Oct 18 '22 12:10

Allen B.