Skip to Main Content
Adding Ajax
book

Adding Ajax

by Shelley Powers
June 2007
Intermediate to advanced content levelIntermediate to advanced
400 pages
9h 52m
English
O'Reilly Media, Inc.
Content preview from Adding Ajax

Overlays

Overlay effects load new content over the page based on some action. I, and others, use the term "overlay" because the new content is removed from the page flow completely, being positioned on top of the page through the use of absolute positioning. The overlays can stretch to cover the entire page, or can appear as a small box that is either inserted in or moving across the page.

Yes, these are also known as pop-ups and we're not fond of these. However, the functionality can be used for more than just creating a pop-up (and even a traditional pop-up can be useful if used more to help your web page readers than hide content from them). The overlay that is opened on top of the page can include a warning message, a form to fill in, the results of a query, or even, as demonstrated in this section, a larger size picture when the page reader clicks a thumbnail image.

In my web site, I use an image library to open up a larger image from a smaller thumbnail. It first overlays the page with an element that has an opaque filter so that the page contents don't distract from the picture.

When the page is first loaded, a JavaScript setup function grabs the page contents and wraps them, whatever they are, within a div element. It also adds a second div element containing an img element that is located outside of this wrapper element:

function setUp( ) { // add page container and image container var oldBody = document.body.innerHTML; document.body.innerHTML = "<div id='mtwCover'>" + oldBody ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Ajax: The Definitive Guide

Ajax: The Definitive Guide

Anthony T. Holdener III
Ajax Design Patterns

Ajax Design Patterns

Michael Mahemoff
Web Development with JavaScript and Ajax Illuminated

Web Development with JavaScript and Ajax Illuminated

Richard Allen, Kai Qian, Lixin Tao, Xiang Fu

Publisher Resources

ISBN: 9780596529369Supplemental ContentErrata Page