O'Reilly logo

Adding Ajax by Shelley Powers

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The New Page View

Eric Meyer, well-known CSS expert and author, created a standards-based, accessible slideshow/presentation code framework called S5: a Simple Standards-Based Slide Show System (hence the 5 in the S5 name). The premise behind the application is to load each page, or presentation slide, into the document and give each a specific class name. When the page is opened, if scripting is enabled, these class names are processed using the DOM and are then "layered" into pages that can be traversed using a navigational aid. S5 also has good keyboard support.

Tip

Read more about S5, see examples, and download code at http://meyerweb.com/eric/tools/s5.

This concept is good because if scripting is disabled, all the pages are displayed, one after another; users can vertically scroll down the page, reading each section in turn. No server-side code is necessary, and the code to manage the dynamic presentation doesn't have to be very complicated.

This isn't technically an Ajax application because we're not using an Ajax call. However, Ajax has broadened to include most dynamic JavaScript functionality, so we'll call the application "Ajax" by marriage.

After pulling apart the Unix command article, we can put it back together again for this next application. The slideshow elements are left as-is, and each of the pages are added below them, each with its own unique identifier and a shared "section" class. The entire page is not duplicated here, as that would be quite large; enough is shown ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required