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.

EXAMPLE LISTING

An example of a Real Estate listing web-app.

iPad version

DISCLAIMER

Mention of third-party websites and products is for informational purposes only and constitutes neither an endorsement nor a recommendation. PADILICIOUS.COM assumes no responsibility with regard to the selection, performance or use of information or products found at third-party websites. PADILICIOUS.COM provides this only as a convenience to our users. PADILICIOUS.COM has not tested the information found on these sites and makes no representations regarding its accuracy or reliability. There are risks inherent in the use of any information or products found on the Internet, and PADILICIOUS.COM assumes no responsibility in this regard. Please understand that a third-party site is independent from PADILICIOUS.COM and that PADILICIOUS.COM has no control over the content on that website. Please contact the vendor for additional information.