CODEWITHSUNDEEP
jqueryjquery-mobilecordovaswipe
kumar
kumar

Reputation: 645

swipe function not working using jquerymobile and phonegap for android

I am new to the phonegap .i am creating application in eclipse using phonegap for android .I added phone gap.jar and plugin in xml folder.I have added jquery library and phonegap1.1.0 js also. am trying to implement swipe function to navigate one page to another page but its not working .can anybody tell how to solve the problem?

I am calling in inex.html in my activity this is my index.html

<html>
    <head>
        <title>sample check</title>
        <link rel="stylesheet" href="www/jquery.mobile/jquery.mobile-1.0rc2.min.css" type="text/css" charset="utf-8" />

        <script type="text/javascript" src="js/fnswipe.js"></script>
        <script type="text/javascript" src="www/jquery.mobile/jquery-1.6.4.min"></script>
        <script type="text/javascript" src="www/jquery.mobile/jquery.mobile-1.0rc2.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
    </head>
    <body>
        <div data-role="page" id="home">  
            <div data-role="content"> 
                <p> 
                    <ul data-role="listview" data-inset="true" data-theme="c"> 
                        <li id="listitem">Swipe Right to smple check page</li> 
                    </ul> 
                </p> 
            </div> 
        </div> 
    </body>
</html>

This is my js file included

$("#listitem").swiperight(function() { 
    $.mobile.changePage("file:///android_asset/www/samplecheck.html"); 
});

Thanks for your help

Upvotes: 2

Views: 7962

Answers (4)

user3270453
user3270453

Reputation:

Try the code similar to this and see if it helps in any way.

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

William Delong
William Delong

Reputation: 113

I was having the same issue, all swipe events were working except for on Android. To solve the issue I had to set the Threshold values for the Swipe events. You can set them just before you call your swipe events in your JS file. For best results I have mine set to:

$.event.special.swipe.scrollSupressionThreshold = 10; // More than this horizontal displacement, and we will suppress scrolling.
$.event.special.swipe.horizontalDistanceThreshold = 30; // Swipe horizontal displacement must be more than this.
$.event.special.swipe.durationThreshold = 500;  // More time than this, and it isn't a swipe.
$.event.special.swipe.verticalDistanceThreshold = 75; // Swipe vertical displacement must be less than this.

This answer helped me a lot : swipeleft/swiperight triggered during vertical scroll in jquery mobile

As well as the documentation: Events -> Touch Events -> Swipe

Hope this helps!!

Upvotes: 3

Pradip Kharbuja
Pradip Kharbuja

Reputation: 3532

I'm using jquery mobile 1.2.0 to swipe the page. This function doesn't depend upon phonegap or cordova. This is my working code. Hope this will help you: 

$(document).bind("pageinit", function(event) {
    $('#page').unbind("swipeleft");
    $("#next").unbind("swiperight");

     $("#page").bind("swipeleft",function(event) {
        $.mobile.changePage('next.html',  {
            transition : "slide"
        });
     });

     $("#next").bind("swiperight",function(event) {
        $.mobile.changePage('index.html', {
            transition : "slide",
            reverse : true  
        });
     });
});

Upvotes: 0

user2270213
user2270213

Reputation: 1

you can try this

$("#listitem").on("swiperight", function() { 
    $.mobile.changePage("file:///android_asset/www/samplecheck.html"); 
});

Upvotes: 0

Related Questions