CODEWITHSUNDEEP
jqueryjquery-mobileswipe
Samir
Samir

Reputation: 31

swipe left/right event not working using jquerymobile for android

i am trying to use the swipe event to navigate between the pages, here is my code

$( document ).on( "swipeleft", page, function() { 
   $.mobile.changePage( "#"+next, { transition: "slide" },false ); 
}); // Navigate to next page when the "next" button is clicked 
$( ".control .next", page ).on( "click", function() { 
   $.mobile.changePage( "#"+next, { transition: "slide" },false ); 
});

But the swipe is not working properly on Android devices, any help will be highly appreciated

Thanks in advance

Upvotes: 3

Views: 3250

Answers (2)

Jai
Jai

Reputation: 74738

You can try with this:

$.mobile.changePage( "#"+next, { transition: "slide" },false ); 
//----------put changehash inside this--------------^^--^^^^

to this:

$.mobile.changePage( "#"+next, { transition: "slide", changeHash: false });

Upvotes: 0

user3270453
user3270453

Reputation:

This would be to start the swipe (

function( event ) {
  var data = event.originalEvent.touches ?
      event.originalEvent.touches[ 0 ] : event;
  return {
      time: ( new Date() ).getTime(),
      coords: [ data.pageX, data.pageY ],
      origin: $( event.target )
    };
}

)

And the when the swipe stops (

function( event ) {
  var data = event.originalEvent.touches ?
      event.originalEvent.touches[ 0 ] : event;
  return {
      time: ( new Date() ).getTime(),
      coords: [ data.pageX, data.pageY ]
    };
}

)

This method receives the start and stop objects and handles the logic for and triggering for the swipe events.

(

function( start, stop ) {
  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" );
  }
}

)

HTMl code (

<script>
$(function(){
  // Bind the swipeHandler callback function to the swipe event on div.box
  $( "div.box" ).on( "swipe", swipeHandler );

  // Callback function references the event target and adds the 'swipe' class to it
  function swipeHandler( event ){
    $( event.target ).addClass( "swipe" );
  }
});
</script>

)

Upvotes: 1

Related Questions