CODEWITHSUNDEEP
jquery-mobilecordovaswipe
KershawRocks
KershawRocks

Reputation: 463

jQuery Mobile Swipe movement on hardware device with PhoneGap / Cordova

http://jsfiddle.net/c07uocue/

The swipeleft and swiperight works flawlessly on the Google Chrome 37 browser, but when I test it on my Android 4.1.2 device, it is very unresponsive.

What do I have to add, to make the swipe functional on the Android hardware device? 

$(document).on('swipeleft', '.ui-page', 

function(event)
{    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $(this).next('[data-role="page"]');
        // swipe using id of next page if exists

        if( nextpage.length > 0) 
        {
// alert("Swipe Left");
$.mobile.pageContainer.pagecontainer( "change", nextpage, {transition: "slide", reverse: false} );              

        }
        event.handled = true;
    }
    return false;         
}                       ) // And so on.....   Entire code in the jsfiddle

I searched around the Stack Overflow and the Internet, and found this link

https://github.com/jquery/jquery-mobile/issues/5534

It says it should work on Chrome 36. My Chrome is 37 and no it is not getting it done. And the TNT-SHIM makes my entire application stop working altogether.

I wonder if Mark Zuckerberg is right. At first he was going all-in with the HTML5 for his facebook mobile, but he realized it had its flaws and now the iOS and Android facebook applications are native.

I agree native applications are the way to go when building intense games, but I thought for simple, 2D games and non-game applications, it would not be necessary....

Upvotes: 2

Views: 3958

Answers (4)

patb
patb

Reputation: 1816

@Vlad 's answer was on the right track to me, except a threshold of 5 generated extraneous taphold events, while a value of 10 works great.

Based on the default swipe handling code provided here, you can define your own swipe-testing page, for example like so:

    $.event.special.swipe.horizontalDistanceThreshold = 10;

    $.event.special.swipe.handleSwipe = function( start, stop ) {
        $("#about-start").html("x: " + start.coords[ 0].toString() + "y: " + start.coords[1].toString());
        $("#about-stop").html("x: " + stop.coords[ 0].toString() + "y: " + stop.coords[1].toString());
        $("#about-delta-x").html("delta-x: " + (stop.coords[0]-start.coords[0]).toString());
        if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
            Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
            Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
            start.origin.trigger( "swipe" )
                .trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
        }
    };

    $(document).on("tap swipeleft swiperight taphold vclick", "#about-page", function(event) {
        $("#about-event").html(event.type);
        if (event.type=='tap') {
            $("#about-start").html('');
            $("#about-stop").html('');
            $("#about-delta-x").html('');
        }
    });

Still, this experimental page shows that threshold value is not the real problem, although it may be a workaround. On the ripple emulator, you will see the stop x value increase as long as you click-and-drag, while on a real device (Android 4.4.2), there is a single call to $.event.special.swipe.handleSwipe, with a distance of between 15 and 30 in my case, even though I drag the swipe for much longer.

Upvotes: 1

Vlad Marinescu
Vlad Marinescu

Reputation: 11

I used this on android 4 and it did it for me, hope this helps

function onDeviceReady() {
            // set your swipe threshold explicitly
            $.event.special.swipe.horizontalDistanceThreshold = 5;
            $(document).on("swiperight", "#listitem", function() {
                $.mobile.changePage("#page1");
            });
        }

Upvotes: 1

dwhogg
dwhogg

Reputation: 188

There does seem to be on-going issues with buggy swipe on Android.

Here is an (open) issue for jquery-mobile and another for ionic, indicating it isn't particular to jquery mobile.

I have a jquery-mobile based cordova app and swipe has worked well and reliably on iOS. However, on Android I have found it to be very unreliable - only triggering a horizontal swipe event (for example) once every five times or so (runnning a Nexus 7, Android 4.4.4, Jquery Mobile 1.4.4, Cordova 3.6.3).

My solution has been adding hammer.js for swipe events and it seems to work well.

Upvotes: 3

Cedric
Cedric

Reputation: 977

Most of the facebook apps on mobile are still HTML5 don't loose faith.
Using Jquery mobile you can easily navigate through page by swipe using a method like this one : 

 $("#article2").on("swiperight",function(){
    $.mobile.changePage( "#article1", { transition : "slide", reverse: true});
});
$("#article2").on("swipeleft",function(){
    $.mobile.navigate( "#article3", { transition : "slide"});
});


Hope this help.

Upvotes: 0

Related Questions