Question

133

Using swipe gestures to change pages in multi-page jQuery mobile application

rated 0 times [ 136] [ 3] / answers: 1 / hits: 35661 / 10 Years ago, thu, may 22, 2014, 12:00:00

Is there a way to implement swipe gesture navigation on a jQuery Mobile multi-page template mobile website/application?

I can put together a deadset easy construct as follows:

$(body).bind(swipeleft, function(e) {

$.mobile.changePage( 'about.html', { transition: slide });

But the moment I start using anchor tags (multi-page JQM style), the event does not work:

$(body).bind(swipeleft, function(e) {

$.mobile.changePage( '#points2', { transition: slide });

Is there a suitable workaround for this or would I have to abandon the multi-page setup to get this to work?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jadyngraysons

Add To Favorites

Follow

Total Points: 455

Total Questions: 109

Total Answers: 98

Location: Trinidad and Tobago

Member since Fri, May 8, 2020

4 Years ago

jadyngraysons questions

1 AWS Lambda SNS Destinations not working on failure or success

Fri, Aug 14, 20, 00:00, 4 Years ago

1 React Hooks useState Array empty with states rendered in the component

Tue, May 5, 20, 00:00, 4 Years ago

1 postman pm set environment variable

Thu, Apr 23, 20, 00:00, 4 Years ago

1 getElementById after dynamically adding it in React

Sat, Jan 18, 20, 00:00, 4 Years ago

1 How to customise Intl.DateTimeFormat date?

Tue, Dec 31, 19, 00:00, 4 Years ago

View All

answered 10 Years ago georgeh · Accepted Answer

Working example: http://jsfiddle.net/Gajotres/JB22E/3/

HTML:

<!DOCTYPE html>

<html>

<head>

  <title>Share QR</title>

    <meta name=viewport content=width=device-width,height=device-height,minimum-scale=1,maximum-scale=1/>

        <link rel=stylesheet href=http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css /> 

        <script src=http://code.jquery.com/jquery-1.10.1.min.js></script>

        <script src=http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js></script>

</head>



<body>

  <div data-role=page id=article1>

    <div data-role=header data-theme=b data-position=fixed data-id=footer>

      <h1>Articles</h1>

    </div>

    <div data-role=content>

      <p>Article 1</p>

    </div>

  </div>



  <div data-role=page id=article2>

    <div data-role=header data-theme=b data-position=fixed data-id=footer>

      <a href=#article1 data-icon=home data-iconpos=notext>Home</a>

      <h1>Articles</h1>

    </div>

    <div data-role=content>

      <p>Article 2</p>

    </div>

  </div>



  <div data-role=page id=article3>

    <div data-role=header data-theme=b data-position=fixed data-id=footer>

      <a href=#article1 data-icon=home data-iconpos=notext>Home</a>

      <h1>Articles</h1>

    </div>

    <div data-role=content>

      <p>Article 3</p>

    </div>

    </div>



</body>

</html>

JavaScript:

$(document).on('swipeleft', '.ui-page', function(event){    

    if(event.handled !== true) // This will prevent event triggering more then once

    {    

        var nextpage = $.mobile.activePage.next('[data-role=page]');

        // swipe using id of next page if exists

        if (nextpage.length > 0) {

            $.mobile.changePage(nextpage, {transition: slide, reverse: false}, true, true);

        }

        event.handled = true;

    }

    return false;         

});



$(document).on('swiperight', '.ui-page', function(event){     

    if(event.handled !== true) // This will prevent event triggering more then once

    {      

        var prevpage = $(this).prev('[data-role=page]');

        if (prevpage.length > 0) {

            $.mobile.changePage(prevpage, {transition: slide, reverse: true}, true, true);

        }

        event.handled = true;

    }

    return false;            

});