O'Reilly logo

JavaScript & DHTML Cookbook by Danny Goodman

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

Creating a Slide Show

NN 6, IE 5.5

Problem

You want to deliver the equivalent of a PowerPoint presentation in a web browser.

Solution

There are dozens of ways to simulate a slide show, but this recipe is a simple, easy-to-implement solution for recent browsers. All of the content, style sheets, and scripts are contained in a single HTML page, whose code is shown in Example 15-2 in the Discussion.

To customize this slide show, place the content of each slide in its own div element with a class attribute set to slide. All of your slide div elements should be nested inside one master div element named slides. Keep the individual slide div elements in the same source code order as the presentation slide order.

You can also customize the style sheets that define the look of the slides. The format shown in Example 15-2 simulates a typical presentation software package's simple slide style.

Discussion

Example 15-2 shows the HTML page used for a slide show (with only one slide to save space). With the entire slide show arriving in a single document, there is no delay in navigating between slides.

Example 15-2. A slide show HTML page and scripts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>DHTML Slide Show</title> <style type="text/css"> #slides {font-family:Verdana, Arial, sans-serif; position:absolute; top:40px; width:90% } .slide {position:absolute; top:0px; left:0px; display:none; width:80%; ...

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