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.

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.