Swipe Navigation

I've written a few blog posts in the past around using JQuery Mobile to give a native (well, iOS) feel to web applications. In each of these cases, I've used buttons in the header or footer to navigate around the site and open panels.  These days, users expect to be able to swipe to navigate, even when running web applications through the built-in device browser.

Luckily, JQuery Mobile has a solution to this - if the user touches the screen and moves their finger left or right more than a certain number of pixels while maintaing contact, a swipeleft or swipe right event will be generated. These events can then be handled in custom JavaScript functions to navigate the user to another page.

To demonstrate this, I've created a sample application containing three pages that each displays a picture from my Customer Company Tour Developer Theatre session in May 2013. The header contains the buttons to open a panel and navigate between pages, as shown below:

This is a single page application, where a single physical HTML page contains a number of logical application pages coded as stacked <div> elements with a data-role of page. The markup for the first page is as follows:

<div data-role="page" id="page1">
  <div data-role="panel" id="aboutpanel" data-theme="b">
    <h3>About</h3>
    <p>Welcome to the Bob Buzzard swipe demo web application.</p>
    <a href="#page1" data-role="button" data-rel="close">Close</a>
  </div> <!-- /panel -->
      
  <div data-role="header" class="header-large">
    <h3>Swipe Demo</h3>
	<a href="#aboutpanel" data-role="button" data-icon="info" data-iconpos="notext">About</a>
    <a href="#page2" class="ui-btn-right" data-icon="arrow-r" data-iconpos="notext">Page 2</a>
  </div><!-- /header -->
    	
  <div data-role="content" style="text-align:center">
    <h1>Getting Ready</h1>
    <div style="margin:auto"><apex:image styleclass="image" value="{!URLFOR($Resource.CCT, 'CCT1.jpg')}"/></div>
    <p><caption>A quick chat with Nick Tran before taking the stage</caption></p>
  </div> <!-- /content -->
    	
</div> <!-- /page -->

To allow swipe navigation from the logical page with the id of page1 to the logical page with the id of page2, I need to handle the swipeleft event when it takes place in page1. The JavaScript for this is straightforward, thanks to the event handling capabilities of JQuery:

$j('#page1').on( "swipeleft", function() {
    $j.mobile.changePage('#page2');
});

An added benefit is that the swipe behaviour works on the desktop too, as the following video attempts to show.  the first part shows navigation using the buttons, while in the second part I simply click, hold and drag the mouse/trackpad left or right.

If you'd like to try this application yourself, its available on my dev org site at the following short link:

http://bobbuzz.me.uk/18lXNSx

or you can scan the following QR code on your mobile device:

The Visualforce page containing the application is available at this gist - note that this page relies on a static resource containing the images, so if you clone it you'll need to replace this with images of your own.

 Follow @bob_buzzard