Creating and delivering content for the iPad

Transitions Between Pages

The Real Estate Listing web-app incorporates CSS transitions between its pages. This is accomplished using the same techniques that enable the image slideshows provided on this site. THe following article provides an overview of how the transition mechanism works.

The design of the web-app is to have a default page that displays the contents of other the pages located within the web-app bundle. The contents of these pages are meant to display using the default iPad dimensions of 1024 pixels wide by 768 pixels tall in 4 x 3 proportion.

The main page contains two key elements: 1) a full-screen content DIV that contains an IFRAME element; and a floating navigation DIV that contains image-buttons linking to the other pages within the web-app bundle.

The SRC of an IFRAME element is usually an HTML page or partial HTML content.

By default, an intial HTML page (home.html) is assigned to the SRC for the IFRAME and is displayed when the web-app is opened. Note that the navigation DIV element of the main page, is set to be above the content shown in the IFRAME.

When the user taps one of the buttons in the navigation bar, it triggers a JavaScript script, included in the main page, that performs a series of actions to enable a transition between the currently displaying HTML page in the IFRAME to another HTML page.

The script inserts a second IFRAME element, containing the page to naigate to, behind the currently displaying IFRAME element in the main content DIV.

Next, the script assigns CSS styles, also included in the main page code, to the main content DIV and each of the two IFRAME elements it now contains. These CSS styles describe the intial state of the elements before the transition begins.

The transition effect (in this case a cross-dissolve) is triggered when the script changes the CSS style of the main content container, thereby changing the styling of the elements it contains.

After the transition has completed, the script cleans up by removing the original IFRAME element and CSS styles of the container and remaining IFRAME element.