Edge scroll detection in jQuery Mobile

Question

I want to determine if users are removed from the edge or not before opening the panel with $("#panel").panel("open");. Here is the code

$("#main").on("swiperight",function(event){
var data = event.originalEvent.touches ? event.originalEvent.touches[0] : event,
    coords = [data.pageX, data.pageY];

console.log(coords);
});

However, it coordsdidn’t return anything because I got an error:

Uncaught TypeError: Unable to read touch properties undefined

• So, is there a way to get the coordinate when a swipe happens?

• Or is there an easy way to determine if the gaze position is from instead of the left edge?

Thanks.

Answer 1

Try below in jqm 1.4+, it worked for me, adjust the cropping value accordingly, 50 was useful for me

$( "div.ui-page" ).on( "swiperight", function( e ) {
    if ( e.swipestart.coords[0] <50) {
    // your logic 
    }
});

x y [1]

Answer 2

:

$("#main").on("swiperight",function( event ){
   // take 15% of screen good for diffrent screen size
   var window_width_15p = $( window ).width() * 0.15;
   // check if the swipe right is from 15% of screen (coords[0] means X)
   if ( event.swipestart.coords[0] < window_width_15p) {
      // open your panel
      $("#panel").panel("open");
   }
});

Answer 3

You can do something like this.

$('#main').on('touchstart', function(e) {
   var xPos = e.originalEvent.touches[0].pageX;
   if(xPos == 0) { //Keep in mind the margin of failure from 0, when user touches.
      //Handle edge swipe
   }
});