Build Your Own Slide Presenter : Part 1

In this series of posts we'll iterate on an HTML slide show. When I say "HTML", I mean we'll use all the buzzwords technologies that I kept out of the title of this post to avoid attracting attention from shallow minded subscribers who would only read a post titled something like "Top 7 Ways To Use HTML 5, JavaScript, and CSS3 To Ditch PowerPoint and Build Your Own GeoLocated TwitterBook Slideshow Software".

If you've made it this far, you are a sophisticated reader who can appreciate an understated title, and I welcome you here.

Let's start with the following HTML excerpt, which identifies the contents of each "slide" in a presentation using an HTML5 <section> element.

<section>        
    <h1>This is a slide title</h1>
    <ul>
        <li>This is a bullet point</li>
        <li>Bullet points are exciting</li>
    </ul>
</section>

...

<section>
    <div>Slide titles are optional</div>
    <img src="images/colorful.jpg" alt="So are bullets" />
</section>

<footer>
    This is a footer
</footer>

Only one slide should appear in the browser at a time. We'll use CSS to hide all slides by default, and assume JavaScript code can set one of the sections to "current" by adding a class. We'll also position the footer so it stays in the bottom right of the window.

section {
    opacity: 0;            
}

section.current {
    opacity: 1;
}

footer {
    position: fixed;
    bottom: 0px;
    right: 25px;    
}

The opacity property in the style sheet is a widely supported part of CSS3. We'll use the opacity property instead of the display property because opacity opens up more possibilities for animation transitions later.

Next, we'll add some simple JavaScript code.

Except ...

Well, it turns out simple JavaScript code is not allowed anymore. We'll need to follow the sensually named revealing module pattern and wrap the code inside the complexity of a self-executing function.

var p5 = function () {
    "use strict";

    var start = function () {        
        setFirstVisibleSlide();
    };

    var setFirstVisibleSlide = function () {
        $("section").first().addClass("current");
    };

    return {
        start: start
    };

} ();

Self-executing functions help to hide the implementation details of a library and avoid global variables and functions. The "use strict" string will toggle compatible browsers into ECMAScript 5 Strict Mode, which is a good place to be. The only code needed to start the slide show is a call to the start method.

p5.start();

Next up: moving through slides with the keyboard.

In the meantime, view the code on github.