"Powerpoint-ify" a page

Display/hide parts of a page (div's) one by one.

• Sample usage in this page.
• Stripped down to minimal: Minimal powerpoint demo
• Uses JS library: powerpoint.js

• Note the library does key handling (arrow keys) using document.onkeydown and Key codes.

Exercise - Get "Powerpoint-ify" working on your site

1. Copy the Minimal powerpoint demo.
2. Make sure the link to the JS works.
3. Add some div's with some real content.
4. Number your divs.
5. Test it works.

Exercise - Write a more flexible "Powerpoint-ify"

1. Don't have to number the div's. Just mark them:
   <div class=pp>
2. Make your own copy of the JS library and edit it.
3. Don't need MAX.
4. JS finds all div's of that class using:

   
   var a = document.getElementsByClassName("pp");		// array   	   
   for ( var i = 0; i < a.length; i++ )
     // if i is current page then show a[i] 
     // else hide a[i]