jQuery Mobile Left/Right Swipe to Next Page

I just launched my first mobile site/app at nycomedylist.com using jQuery Mobile, a fantastic, easy-to-use framework that gave me a ton of power and options out of the box.

[Since this post was originally written, the project has moved to WordPress, away from jQuery Mobile, but the information below remains accurate.]

Developing the various “pages” in the site was a cinch. The whole site loads as a single page, and each “page” inside it is a simple div—jQuery Mobile simply loads whichever “page” you need, using simple CSS3 transitions to switch views. Couldn’t be more lovely, and it works great on a bunch of devices.

Clumsyness

On the initial version of the site, when users went to one of the inner “pages”, the site would force them to click a HOME button to switch back to the home page before switching forward to another page. This was no good.

I searched for a way to make swiping possible, and quickly found a solution that gave me 95% of what I needed. It allowed me to swipe back and forth through all the site’s “pages”, except for…

A Small UX Problem

Swiping left (to go forward) worked as expected: the new content slid in from the right, which made sense. However, swiping right (to go backward) was problematic: the correct content slid into position, but also from the right, which didn’t make sense.

The Solution

jQuery solutions like this, written by experienced nerds, are not always clear to me; they assume a level of jQuery and JavaScript proficiency I don’t have. I wish there was better commenting.

But after a little fiddling around, I came up with the following which works perfectly, sliding in the content from the correct direction. You can now swipe through all pages of the site, back and forth, and the left/right transitions work sensibly.

<script>
<!--
$('div.ui-page').live("swipeleft", function(){
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$('div.ui-page').live("swiperight", function(){
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide",
reverse: true}, true, true);
}
});
// -->
</script>

The above code goes in the <head> of your page. Hope it works well for you.

Minimum Requirements: jQuery 1.6.4 & jQuery Mobile 1.0

Comments and feedback welcome.

15 Responses to “jQuery Mobile Left/Right Swipe to Next Page”

  1. Jackie

    I just wanted to say after many days of pulling my hair out, your code was exact thing i was looking for! it works great. Thank you, thank you!!!

    Reply
  2. Sean

    That’s great. Glad I could help.

    N.B. Unrelated to the above, but a comment about the swipe function in general: I may actually take it off that NYCOMEDYLIST.COM site because some users, myself included, find it a bit trigger-happy—it’s very easy to inadvertently swipe to another page when you didn’t mean to, which is annoying, and annoying is not good.

    Reply
  3. Tom

    Beautiful !! Great simplification on right and left Thanks

    Any way to add swipe up and down, page to page?

    Reply
  4. smayton

    You do have a problem here:
    When you swipe to a particular day, say Monday, and you scroll down, at some point it just slides back to the previous page. Unexpected.

    Reply
  5. Sean

    I think that’s a problem with the sensitivity of the jQuery Mobile script. It’s annoying and is one of the reasons I’m moving away from using it; I’m moving that particular site to a basic WordPress theme.

    Reply
  6. Jim

    How would this work if you want to link to external html pages, so you have page1.html to page5.html how would this work when data-rel=”external” ?

    Reply
  7. Chris

    Do you have a simple demo page you could share. This will help contextualize how the code works (as you haven’t posted all of it) and how the gestures work.

    Thanks!

    Reply

Leave a Reply