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

How to style your slides

• The default for the hiding class is:

  .hide{
  	position:absolute;
  	top:-999px;
  	left:-9999px;
  }

• The script hides elements by adding this class, and shows them by removing it.

How to style your slides

• You can limit the boundary DIV by setting a width, and positioning it relatively. That will put any absolutely positioned element inside it relative to its location and measurements¹:

  #boundary{
  	margin:0 auto;
  	text-align:left;
  	position:relative;
  	width:730px;
  	padding:0 20px;
  	background:#fff;
  	color:#333;
  }

¹ Douglas Bowman: Making the absolute relative (http://www.stopdesign.com/articles/absolute/)

How to style your slides

• DOMSlides adds a class called "js" to the boundary div, which allows you to style it differently when JavaScript is available. For example you could enforce a certain height:

  #boundary.js{
  	height:500px;
  }

How to style your slides

• The IDs of the generated elements are:
  • toclist for the nested TOC list in the footer
  • closeToc for the last element in this list, which hides the TOC
  • ds_navigation for the generated FORM to navigate via keyboard
• Classes in use are:
  • hide and slide for the hidden and visible slides
  • counter for the list containing the previous and next slide links and the current slide indicator

Script-generated content

• The table of contents is a nested list, that gets generated inside the DIV with the ID footer. It gets the ID "toclist":

  <ul id="toclist">
    <li><a href="#">TOC</a>
      <ul class="hide">
        <li><a href="#slide2">Eric Meyer already did it - why another 
  	  one?</a></li>
        [...]
      </ul>
    </li>
  </ul>

Script-generated content

• The previous and next slide links and the indicator which slide is shown is a list added to the end of the slide. It gets the class "counter":

  <ul class="counter">
    <li><a href="#">&lt;&lt;</a></li>
    <li>(6 of 12)</li>
    <li><a href="#">&gt;&gt;</a></li>
  </ul>

Script-generated content

• The text of the main heading will be added as a SPAN to the end of the footer DIV preceeded by a dash:

  <h1>DOMSlides - Slideshows with web standards</h1>

  becomes

  <span> - DOMSlides - Slideshows with web standards</span>

Under the hood - how it works

• The key to enabling keyboard navigation without hijacking the browser keyboard events is using a bad JavaScript practice from the past for good - select boxes used for navigation
• The problem with select boxes without submit buttons is that they open the link when the option changes - and with a keyboard, that is every time you try to reach the next option:
  Go to... My blog Obsoletely Famous  My articles
  Savvy Keyboard users know though that you can expand the whole list via alt+cursor down before choosing your option.

Under the hood - how it works

• This navigation annoyance and usability nightmare helps us here to show the different slides. The script generates a hidden form with a select box and sets the page's focus to it.
• When the select is changed, all slides get hidden and the current one shown.
• Both the TOC and the select get populated by looping once through all the slides when the page has loaded.

Customising the script

• You can easily change the IDs, classes and texts used or generated by the script in its top section.

  // Texts
  var tocLinkText='TOC';
  var tocCloseText='Close TOC';
  var counterText='(_x_ of _y_)'; 
  var nextSlideText='>>';
  var prevSlideText='<<';
  var titleAdd=' - ';
  

• The texts are the values for the generated elements. These have to be text values without any HTML tags. In the counter text the value _x_ will be replaced by the current slide and _y_ by the number of all slides.

Customising the script

• The IDs and classes in use can also be changed and the script will automatically add the new ones

  // IDs
  var boundaryId='boundary';	
  var footerId='footer';
  var tocListId='toclist';
  var closeTocId='closeToc';
  var navigationForm='ds_navigation';
  // Classes
  var jsIndicatorClass='js';	
  var hideClass='hide';		
  var slideClass='slide';		
  var counterClass='counter';	
  

That is all - like it? Use it!

• DOMSlides is released with a creative commons license, which means you can use and alter it to your needs.
• It was tested on Opera 8, MSIE 6 and Firefox 1.0 on Windows XP.
• If you are a Mac developer and you find and fix issues, please contact the author to include the changes in the next version.
• You can also contribute by creating nice reusable styles for the system and send them to the author.

• All comments and contributions on the blog:
  • http://www.wait-till-i.com/index.php?p=123