Adjusting the distance of a swipe event in jquery mobile

Question

Is it possible to adjust the distance that is necessary to trigger the swipe event, and if so how is it done?.

Here the code im talking about:

$('.page2').bind('swiperight', function(event, ui){
    $.mobile.changePage(
        $('.page1'),
        {
          allowSamePageTransition: true,
          transition: 'slide',
          reverse: 'true', 
          showLoadMsg: false,                    
          reloadPage: true,
        }
    );
    return false; 
}); 

Answer 1

Yes, it is possible.

You need to modify these properties:

• $.event.special.swipe.horizontalDistanceThreshold (default: 30px) – Swipe horizontal displacement must be more than this.

• $.event.special.swipe.verticalDistanceThreshold (default: 75px) – Swipe vertical displacement must be less than this.

This must be done during the mobileinit event, like this:

$(document).bind("mobileinit", function(){
    $.event.special.swipe.horizontalDistanceThreshold (default: 30px);
    $.event.special.swipe.verticalDistanceThreshold (default: 75px);
});

One last thing. If you have never worked with mobileinit, this event must be called before jQuery mobile is initialized, like this:

<script src="jquery.js"></script>
<script>
    $(document).bind("mobileinit", function(){
        $.event.special.swipe.horizontalDistanceThreshold (default: 30px);
        $.event.special.swipe.verticalDistanceThreshold (default: 75px);
    });
</script>
<script src="jquery-mobile.js"></script>

Take a look at the official documentation here