jQuery Mobile is a web application framework designed primarily for making sites interact well on smartphones and tablets. However, many of the features are useful for interaction across all devices. This series is focusing on the page transition effects included with jQuery Mobile.
In Part I of this series, I introduced a basic two page site and then integrated jQuery Mobile to create a sliding transition between the two pages. The first step was to include all page elements in the transition. The next step, which is covered in this post, is to perform the transition with some static content; some specific elements not included in the transition effect.
On a recent project I was working on, the client had a web-site structure in mind where the user would navigate using a page swipe (on touch-based devices) and the pages would transition using a slide transition effect. It was pretty clear that jQuery Mobile already offered a lot of the functionality that we were trying to accomplish…both swipe handling (which isn’t discussed here) and sliding page transitions.
As usually happens when finding a “perfect” technology to fit into a project, the implementation details didn’t quite fall into line “perfectly”. The primary issue was that, while the page transitions should slide from page to page, depending on the context, not everything on each page should transition. For example, transitioning between some pages might require the background to slide with the transition while others might require that the background stay static. The solutions for these different sliding approaches weren’t always completely intuitive.
I’m going to describe each the different combinations of transitions that we needed to accommodate and then provide details on how to achieve each one. Part I will cover the initial base source, how to massage the code to accommodate jQuery Mobile, and how to do a slide transition between pages.