Build Your Own Slide Presenter : Part 1

Monday, February 13, 2012

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.


Comments
gravatar Frank Quednau Monday, February 13, 2012
I _think_ I am going to like this...
gravatar Dan Martin Monday, February 13, 2012
Agreed, this is going to be really cool. Looking forward to more on this.
gravatar Mario Tuesday, February 14, 2012
Hi K Scott, I wonder.. why do you prefer to declare the functions as:

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

instead of:
function start(){
setFirstVisibleSlide();
}

?
gravatar Scott Allen Tuesday, February 14, 2012
@Mario: It's just a personal choice. To me it feels more natural with the module pattern since many of the functions get passed around as objects. So, treat them as just another variable and it so happens you can invoke these variables with ().

Plus it adds some symmetry to the code. You can see what is a variable versus what is active code that runs in the module.

Good question. Maybe should make another post out of it... :)
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!