Give Your Next Presentation In Your Browser With JQuery

by Zack Grossbart on November 5, 2009

Fork me on GitHub

I’d rather watch linoleum curl than sit through one more robotic technology presentations. A monotone drone over poorly organized slides turns even the most interesting topics sour. There are many great blogs about giving better presentations. Presentation Zen and the Duarte Design blog are two worth reading. I’ve even written a little of my own advice.

Good presentations are well thought out, have strong supporting materials, and tell interesting stories. They also have a sense of pacing. When I present I want one topic to flow into the next, but nothing ruins pacing faster than watching the presenter fool around with PowerPoint when they should be presenting.

“OK. Now we’ll switch to the demo… Where’s that button… Hey Bob do you know how to make this PowerPoint window go away?”

See a presentation
in Action

Switching between applications during a presentation throws off your pacing and I don’t like to do it. I recently gave a presentation about CSS, with many examples that ran in a web browser. The solution was simple: put all of my presentation in the browser.

I created a new presentation program using simple HTML, CSS, and JavaScript. This slide show works in all browsers and on all platforms; sharing it is as simple as sending an URL. Just like SlideShare.net you can host anywhere without all that Flash. This approach also gives you the big advantage of writing your slides in HTML. The only drawback is you have to write your slides in HTML.

This article shows you how to create your own presentations with JQuery and gives you an in-depth look at how this program works. It is a useful introduction to JQuery programming and a working program for giving presentations. It’s also released under the Apache 2.0 License and is totally free.

See It In Action

This all started because I wanted to give a presentation about CSS that had many CSS examples. I figured I could combine the presentation and the examples in one and I got Zack’s (Not So) Basic CSS. I kept this presentation simple because I wanted to keep the CSS simple.

A few weeks later I gave a presentation about JQuery that got a little more complex. Zack’s JQuery Jumpstart added a navigation footer and a much nicer key explaining the keyboard navigation.

This framework is a flexible alternative to PowerPoint. You can change these presentations with CSS and make them look any way you want. Let’s take a look at how it works.

The HTML

You do most of your work for these presentations in HTML. Each slide is a div tag with a class of slide. The easiest type of slide is a content slide like this:

<div class="slide">
    <p class="titleslide">
        My Title Slide
    </p>
</div>

There are a few other built-in slide types including content slides:

<div class="slide contentslide">
    <p>
        I'm going to put a lot of text here.
    </p>
</div>

and iframe slides for embedding other website into your presentation:

<div class="slide">
    <iframe src="an url" frameborder="0" scrolling="no" width="100%" height="99.7%"></iframe>
</div>

Each slide is HTML and the sky’s the limit. As long as your data is contained in a div tag and with the class slide you can put anything you want in there. The slides will appear in your presentation in the order they are written in the HTML file.

The HTML also contains the controls like the navigation key and the footer that automatically integrate with your presentation. Any slide you have will display above the footer.

The CSS

You can add whatever CSS you want to support your slides, but the presentation needs some basic CSS to make each slide work.

.slide {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: white;
}

.titleslide {
    position: relative;
    top: 33%;
    font-size: 72px;
    text-align: center;
    vertical-align: middle;
}

.contentslide {
    margin: 2em;
    height: 85%;
    width: 85%;
    display: inline;
    left: 10%;
    top: 10%;
}

This CSS basically does three things:

  1. Make a single slide take up the whole screen
  2. Make the text in title slides center aligned and really big
  3. Add a little spacing to content slides

The JavaScript

The JavaScript is where the magic happens, but it’s more rabbit out of a hat than Harry Potter.

$(".slide").each(function () {
  slideCount++;
  $(this).css("display", "none");
  slideArray[slideCount] = $(this);
});
    
slideArray[currentSlide].css("display", "block");

First we iterate over all the slides and add them to an array. While we iterate we also hide every slide. Once we’ve done that we just make the first slide visible.

After we add this stack of slides to an array positioning the slide deck is easy. We simply hide the current slide and show the requested slide.

function positionSlide(/*int*/ slide) {
    if (slide > 0 && slide <= slideCount) {
        slideArray[currentSlide].hide();
        currentSlide = slide;
        slideArray[currentSlide].show();
    }
}

If you wanted to get fancy you could do this with a JQuery Effect. Just replace the calls to hide and show to calls for slideIn or fadeIn and you are all set. I kept it simple because I often present remotely where animations look choppy.

The rest of code takes care of enabling and disabling buttons and hiding and showing controls. Switching from one slide to another is fast and easy. I can use my keyboard, the arrow buttons, or jump to a specific slide. You can see all the source code.

A Little Bonus

One of my favorite presenters likes to start her presentations with an animation. The animation gives the audience something to look at while they are finding a place to sit and waiting for the presentation to start. PowerPoint makes animations like this pretty easy and I wanted to do the same with JQuery

See the animation
in Action

For my recent JQuery presentation I started things off with a simple JQuery animation.

The animation uses a special type of slide called an animatedslide. In this slide you give every word you want animated a different class:

<div class="slide">
    <p class="titleslide animateslide">
        <span class="animcell">Welcome</span> 
        <span class="animcell">To</span> 
        <span class="animcell">Zack's</span> 
        <span class="animcell">JQuery</span> 
        <span class="animcell">Jumpstart</span>
    </p>
</div>

Then the JavaScript kicks in:

function anim(/*JQuery*/ obj) {

    /*
     * JavaScript doesn't give you direct access to threads
     * so starting and stopping animations doesn't work 
     * very well.  We hack around that by only running the
     * animation a certain number of times.
     */
    var count = 0;

    /*
     * These variables hold the current position of the element.
     */
    var x = 0;
    var y = 0;
    
    while(count < 300) {

        /*
         * Step 1. Generate a random number for the direction to 
         * move the text.
         */
        var direction = Math.floor(Math.random() * 5);
        
        count++;
        if(x > 300 || x < -300 ||
           y > 300 || y < -300) {
            /*
             * Step 2a. We don't want the text to move too far out of
             * the screen so we'll push it back to the center when it
             * is too close to the edge.
             */ 
            obj.animate({ 
                left: "0px",
                top: "0px"
                }, 3000, "linear");
            
            x = 0;
            y = 0;
        } else {
            /*
             * Step 2b.  We increase or decrease the X or the Y depending
             * on the direction we want the text to move.
             */
            if (direction == 1) { //go left
                x -= 100 + Math.floor(Math.random() * 201);
            } else if (direction == 2) { //go right
                x += 100 + Math.floor(Math.random() * 201);
            } else if (direction == 3) { //go top
                y -= 100 + Math.floor(Math.random() * 201);
            } else if (direction == 4) { //go bottom
                y += 100 + Math.floor(Math.random() * 201);
            }

            /*
             * Step 3.  We run the animation.
             */
            obj.animate({ 
                left: x + "px",
                top: y + "px"
                }, 3000, "linear");
        }
    }
}

I know it looks a little complicated, but it's really pretty simple. Each word chooses a random direction and moves a random amount in that direction. If the words gets too close to the edge of the screen it bounces back to where it started. The effect is simple, but strangely hypnotic.

I must confess there is a hack here. The animation will repeat 300 times and stop. I've done multi-threaded programming in Java, C++, Erlang, and Scala, but the threading model of JavaScript is still a mystery to me. If someone knows a better way to make this work I would love to hear about it.

Build Your Own Presentation

Make your own
presentation

Now that you've seen how it works you're ready to build your own presentation. Just download the sample presentation and add your slides to the index.html file. When you're done just post it to your favorite web server. The presentation will run with just about every browser and every operating system.

Conclusion

Building all of your presentations in HTML is just silly, but when you need to include many live web pages this is a good solution for the "um... where is the button to get out of PowerPoint?" problem. The results are small, fast, and easy to share. They'll also get indexed by Google unlike SlideShare presentations.

Beyond the usefulness of this application I like the idea of turning a web browser into something else. Browsers are an interesting platform, but if they want to be taken seriously they need to stop just supporting web pages.

Name This Application Contest

You may have noticed that this poor application doesn't have a name. I'm holding a contest to suggest a name. Just post your suggestions as a comment. The winner gets a free copy of this open source software. Good luck!

  • Peter

    HTML Slidy is already taken ( 2005 vintage ) : http://www.w3.org/2005/03/slideshow.html#(1)

  • http://www.zackgrossbart.com Zack Grossbart

    I hadn’t see this before. Thank you for sharing. I might be biased, but I still think mine is easier to use and looks a little nicer.

  • ww

    There’s also S5 [1], which seems to be of similar vintage to the first revisions of HTML Slidy (and is indeed mentioned in a later version of the introductory document [2]). I haven’t actually used either of them, however, so I don’t know how they compare to your offering.

    [1] http://meyerweb.com/eric/tools/s5/
    [2] http://www.w3.org/Talks/Tools/Slidy/#(17)

  • Lawliet

    I have big problem, i am trying to put this into one of my projects, i modified it and i guess thats why something got wrong, i would appriciate your help if you could write me an e-mail. I am totall noowbie with javascript and thats not my profile, i write php applications.
    Thanks in advance.

  • http://www.zackgrossbart.com Zack Grossbart

    @Lawliet I’m sorry you’re having some trouble with this. Feel free to post a little more about the changes you’ve made. I’m happy to try to help out.

  • mark

    This is so awesome, it was exactly what I was looking for. Thanks for taking the time to share it. Nice work!

  • mark

    FYI I downloaded the example, but it doesn’t work correctly in FF 3.6. The pres.js file is never downloaded/executed. The culprit is the singleton js tag which includes the Google Ajax jQuery lib which precedes the pres.js include. Making it a standard fixes it.

  • http://www.lostyetidesign.com Richie Sun

    Footer doesn’t stay put when resizing the window.

    Add this to #footer in the pres.css file.
    #footer {
    bottom:0px;
    }

  • http://www.zackgrossbart.com Zack Grossbart

    Thanks for the tip Richie.

  • http://www.lostyetidesign.com Richie Sun

    Any way of clicking hyperlinks that respond to slide numbers?

  • http://www.zackgrossbart.com Zack Grossbart

    You could do a link like this:

    <a href=”#” onclick=”positionSlide(8); return false;” rel=”nofollow”>Jump to slide 8</a>

  • http://www.lostyetidesign.com Richie Sun

    Ahhhh, genius. Thanks Zack!

  • http://promodrone.com Lee Davis

    I really never give out accolades because most of the time it’s not deserved, but Zack, you are an unmitigated genius. I have been suffering through the foolishness of that p.o.s. named HTML Slidy and it just happens to underline everything that’s WRONG with the W3C. As an organization, they’re about as useless as Man-boobs (and just as ugly, lol!). I wish I’d run across this 3 wks ago. Your interface is so slick that I hope it causes future W3C output to slip, fall, and DIE. I’ve only just looked at it and my brain is vibrating already in anticipation of usage. I should add that while I’m not a programmer, per se, I can manipulate code if it’s logically well-formed to the point of being a roadmap, but the HTML code attached to Slidy is of the dinosauric, coke-bottle bottomed lenses geek-laced variety, meaning no one outside Dexter’s Lab is going to comprehend it (lol!). And there are probably millions like me, who get it to the point of hostility against the W3C. Anyway, before this becomes a tirade, I just want to thank you for having created this. And, NO, you’re NOT biased. Yours IS prettier and looks like a breeze to implement.

    PS: @mark: can you elaborate a little on the process of changing the singleton js tag to a standard (Googled while I typed this, and found a reference to a login example, but that leaves me a little more lost). I also read up @ http://cheat.errtheblog.com/s/resource_controller/ , but now I’m super-lost. If you could kindly outline this method, it’d save many of us a headache-and-a-half.

  • http://promodrone.com Lee Davis

    PS: I forgot to name your application: SLICKSHOW!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    (Googled to be sure there wasn’t another app of that name – but if it IS taken, you can always default to SLICKY, lol!)

  • http://promodrone.com Lee Davis

    @mark,
    Got it 2 seconds later when I went back to one of my old js manuals (which is why I still keep the books I learned from years ago, even if there are deprecated code layouts). Sorry to show such a noobness on that (back to class :| ), and Zack, here’s another name – SLICKQUERY (pronounced “slickery”)

  • http://www.zackgrossbart.com Zack Grossbart

    Hello Lee,

    I’m really glad you liked this example so much. I’m using it to create a new presentation right now. I tried to make it simple to use and easy to understand. If you make a presentation share the link so we can all see it.

    P.S. To my friends at W3C, I find your work very useful.

  • http://tomorrowsknowledgeyesterday.110mb.com/slideshow/index.html Lee Davis

    Hello again, Zack,

    And for the record, I want to correct the emotionally-inspired statements of last post. But even as immature as they seem now from the vantage point of hindsight,
    I was rather short-sighted in airing my personal opinions in such a heavy-handed manner on someone elses’ virtual real-estate (SO sorry, chief – won’t happen again).
    This is the official pre-rollout of a fully-realized sales concept online brochure. I kept it simple since it’s meant to convey a products/services/inventory highlight for the intended target market.

    The beautiful thing about “SlickQuery” (and I’m afraid I’ll just be calling it that until you come up with an official name from your own lips) is that even as 2.0 as it is it still is graspable by those with common, basic knowledge of code creation on the application -level (via the JQuery script library).

    Ultimately, INSTANTLY adaptable…web rings..search engine portals…link exchanges…revolving galleries (or any other resource you can think of)…space is the limit, baby! Thank you for providing this SUPER tool. Just watch me twist it.
    The beginning flexability starts in the name URL-link above. I’ll keep you posted on all the permutations that occur. One note for consideration; I tried linking to a specific slide via use of
    [pre]
    Jump to slide 8
    [/pre]
    but the code was garbled everytime I went back to my host file manager to
    correct it (could jst be the host, as they’re having a bad month), so I left it off.
    I’m saving that bonus animations scheme for something really outta control (atta boy!). Once again, Zack, Thanks……………..

  • JP

    Thanks Zack,

    This is f’ing brilliant and easy!

    I was trying to get my head around the HTML Slidy nonsense, but you came right to the rescue!

    Keep up the good work mate,
    JP

  • http://rioastamal.net/ Rio Astamal

    Hi zack,

    Your script did not for firefox Linux since in your head the script tag was using /> as closing tag not

    The problem:

    Solution:

    After that it works like a charm!. Thanks for the script :)

  • http://www.zackgrossbart.com Zack Grossbart

    Thank you for reporting the issue Rio. I’ve tried this on Firefox under SUSE Linux without any problems. What versions of Linux and Firefox were you trying?

    Thanks,
    Zack

  • Rio Astamal

    I’m using Ubuntu Linux 10.04 and Firefox 3.6.3

  • Pingback: Як робити комп’ютерні презентації? « Блог одного кібера

  • Oren

    Hi Zack,
    I can report the same issue as Rio-
    using FF 3.6.10 on Ubuntu 10.04- adding a closing script tag did the job.

  • http://websitecenter.ca/ Montreal Web Design

    Nice way to reuse existing skill to prepare awesome presentation.

  • http://websitecenter.ca/ Montreal Web Design

    BTW you can make your browser go fullscreen by pressing F11

  • Pingback: 7 javascript plugins to code your own online presentations - Maxoffsky |