Use JavaScript to Navigate Web Presentations

Web browsers are a fantastic presentation platform: they can display PNGs without distortion (this is hard with PDF), you can access presentations over a network, and best of all you can scroll! CSS can polish off nearly everything in the presentation with the exception of two features. First, I like each slide to be automatically sized to fit the available screen area, second it's important to have key bandings to jump move back and forth. To my amazement I could not find any examples of on the web, so I wrote my own.

/* navigation.js */
document.onkeypress = DisplayMsg;
var margin = 24;
var base_location=window.location.href.split('#')[0];
var bookmark = 0;
var slides = document.getElementsByClassName("slide");

selector = "div.slide";
rule = "height:" + (window.innerHeight - (margin * 2)) + "px;";
var sheet = document.styleSheets[1];
sheet.insertRule("" + selector + " { "+ rule + " }", sheet.cssRules.length);

function DisplayMsg(event)
{
    var update=false;
    // n
    if(event.charCode == 110 && slides.item(bookmark)) {
        bookmark += 1; update=true
    }
    // p
    if(event.charCode == 112 && bookmark > 1) {
        bookmark -= 1; update=true
    }
    if(update) {
        window.location.assign(base_location + "#" + bookmark);
        window.scrollTo(0, slides.item(bookmark-1).offsetTop - margin)
    }
}

Now include this script in your HTML presentations and use the keys n and p to navigate between divs with of the class slide. On document load it also resizes these to fill screen.

<body>
<script src="navigation.js" type="text/javascript">
</script>

<div class="slide">
<h1>Slide 1</h1>
</div>

<div class="slide">
<h1>Slide 2</h1>
</div>

...

</body>

Eric Radman : a Journal

Use JavaScript to Navigate Web Presentations