Home/ Questions/Q 8983985
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T20:58:42+00:00

I’m doing the program and wanted to add swiping screen with your finger, I

  • 0

I’m doing the program and wanted to add swiping screen with your finger, I did it but for some reason it does not work on my phone with Android 2.3.3, but in the browser, all works fine. Can you tell what’s the problem?

here is the code

    <!DOCTYPE html>
<html>
<head>

  <title>jQuery Mobile test page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet"  href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
  <!-- <link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />  -->
  <script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
  <script type="text/javascript">
    var pageSeq = ['page1','page2','page3','page4'];
    var currentPage = 0;
    var bindSwipeEvents = function() {
        $(".ui-page").swipeleft(function() {
            console.log(pageSeq.length + ",current:"+currentPage);
            if(currentPage==pageSeq.length) { return; }
            currentPage++;
            $.mobile.changePage( $('#'+pageSeq[currentPage]), 
                             { transition: "slide", reverse:false});
        });

        $(".ui-page").swiperight(function() {
            if(currentPage==0) { return; }
            currentPage--;
            $.mobile.changePage( $('#'+pageSeq[currentPage]), 
                             { transition: "slide", reverse:true});
        });
    };

    $( '.ui-page' ).live( 'pageinit',function(event){
        bindSwipeEvents();
    });
    bindSwipeEvents();
  </script>
  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
  <!-- <script src="jquery.mobile/jquery.mobile-1.1.0.js"></script>  -->
  <script type="text/javascript" charset="utf-8" src="js/cordova-1.6.1.js"></script> 
</head>

<body>

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <h3> Page 1 </h3>            
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

<div data-role="page" id="page2">
    <div data-role="header">
        <a data-rel="back">Back</a>
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <h3>Page 2</h3>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="page3">
    <div data-role="header">
        <a data-rel="back">Back</a>
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <h3>Page 3</h3>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="page4">
    <div data-role="header">
        <a data-rel="back">Back</a>
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <h3>Page 4</h3>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Multi-touch events such as swipe and pinch don’t work in the android browser in the majority of android 2.x ROMs (see here).

    However, you can re-enable these events and therefore use them in phonegap apps on android 2.x devices using this workaround.

    I’ve used this in my phonegap app and successfully tested it on android 2.2 using the hammer.js library to do the event listening.

    • 0