DOMSlides - Slideshows with web standards

DOMSlides - yet another DOM/CSS based presentation slides system

• DOMSlides turns an HTML document into presentation slides via Unobtrusive JavaScript
• Readers without JavaScript will see one HTML page with content split up into headings and content
• Readers with JavaScript can navigate the slides either
  • via previous and next links
  • via the cursor up and cursor down keys or
  • via a table of contents

Eric Meyer already did it - why another one?

• A lot of designers have adopted Eric Meyer's excellent standards-based slide show system for their presentations.
• However, some of its features and behaviour can be annoying:
  • It hijacks keyboard functionality of the browser (unless you know that you need to press "T" to make it stop)
  • It is dependent on a height and will cut off presentations on smaller resolutions
  • The document heading structure is not completely hierachical, which is valid, but can be confusing.

The Why of DOMSlides

The idea of DOMSlides was to keep it dead simple:

• Allow for navigation through the slides via previous and next links and cursor up and cursor down
• Generate a Table Of Contents (TOC) to allow the presenter or reader to skip slides
• Allow for linking to slides via "slide#12" anchor names in the URL
• Enhance an HTML document with a proper structure instead of relying on markup created for the slide system
• Do not rely on keypress handlers and hijack keyboard functionality

How to create own slides

• Download the template and change it to your needs.
• The template is an HTML document that needs the following:
  • A DIV container around the content with the ID "boundary"
  • An H1 heading
  • DIVs containing the class "slide" and h2 headings
  • A DIV at the end of the document with the ID "footer"
• You can use any encoding, any type of HTML, and any markup you want in the document.

How to create own slides

• Each presentation slide has to be inside the "boundary" DIV and is a DIV with the class "slide" and a H2 heading
• The text content of the H2 heading will become both the title of the slide and the text of the link pointing to this slide in the table of contents (TOC).
• Slides that follow each other and have the same heading will show up as one item in the TOC.

How to style your slides

• DOMSlides does not enforce any styling, and you can alter the look and feel any way you want.
• However, it needs a class defined with the name "hide" that gets applied to any element that needs to be hidden:
  • The other slides
  • The FORM that makes DOMSlides work
  • The Table Of Contents - a list inside a list item
  • The Main Heading - the text content will be duplicated in the footer