CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobileswipe
omega
omega

Reputation: 43893

How to detect swipe origin location in html web apps?

In my jquery mobile app, I have code from their website that detects swipes in order to open the panel using swipes. This is the code:

function swipePanel(pageId, leftPanelId) {
    $( document ).on( "pageinit", pageId, function() {
        $( document ).on( "swipeleft swiperight", pageId, function( e ) {
            // We check if there is no open panel on the page because otherwise
            // a swipe to close the left panel would also open the right panel (and v.v.).
            // We do this by checking the data that the framework stores on the page element (panel: open).
            if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
                if ( e.type === "swiperight" ) {
                    $( leftPanelId ).panel( "open" );
                }
            }
        });
    });
}

I removed a bit of it (left swipe detection because I only need swipe right).

The problem is that, this code triggers if I swipe right from anywhere, like if my finger is past 75% of the screen x-axis, and I swipe right, this will trigger. I want it so that if I swipe right, and my finger started from <=20% of the screen x-axis, then the code should trigger.

Does anyone know how to do this?

Thanks

Upvotes: 0

Views: 403

Answers (2)

ezanker
ezanker

Reputation: 24738

In the swipe event handler, use the swipestart.coords[0] to get the x coordinate of where the swipe started. Then calculate 20% of the page width:

$( document ).on( "swiperight", "#page1", function( e ) {
    var startX = e.swipestart.coords[0];
    var totalWidth = $(window).width();
    if (startX < totalWidth/5){
        $("#thePanel").panel( "open" );
    }
});

Upvotes: 2

Sid
Sid

Reputation: 523

Although I have never used it - Try this library: http://interactjs.io/ . Looks promising and well documented.

Upvotes: 0

Related Questions