jQuery: presentation slides

Since the next 31th March I will be in Rome for a seminar at SMAU, I need to start writing my slides for a 50 minutes presentation. The SMAU's staff, as usual, sent me a model in Power Point to be used for my slides. To be brutally honest, I hate Power Point when it comes to a simple sharing of a presentation on the web. The best format, in my humble opinion, is HTML, CSS and JavaScript. So I started writing some code to create presentation slides with jQuery. We start with a basic HTML structure like this:

<div id="slides">

  <h1>Presentation Title</h1>
  
  <div class="slide">...</div>
  
  <!--more slides-->

</div>
<div id="pagination"></div>

A couple of CSS styles to hold everything together:

body {
 width: 40em;
 margin: 0 auto;
 padding: 2em 0;
 font: 76% Arial, sans-serif;
}

h2 {
 font-size: 100%;
 font-family: "Trebuchet MS", Trebuchet, sans-serif;
 color: #c40;
 margin: 0;
}

p {
 line-height: 1.4;
 margin-top: 0;
}

#slides {
 height: 14em;
 overflow: hidden;
 border: 2px solid silver;
 font-size: 1.2em;
 border-bottom: none;
 -moz-border-radius: 6px 6px 0 0;
 border-radius: 6px 6px 0 0;
 position: relative;
}

div.slide {
 padding: 0.5em;
 height: 100%;
 position: absolute;
}

#slides h1 {
 height: 100%;
 font: normal 7em "Trebuchet MS", Trebuchet, sans-serif;
 text-transform: uppercase;
 line-height: 0.6em;
 color: #c40;
 text-align: center;
 text-shadow: 3px 3px 3px silver;
}

div.slide h2 {
 font-size: 1.8em;
 font-weight: normal;
 text-transform: uppercase;
}

#pagination {
 height: 100%;
 padding: 0.5em;
 background: #c40;
 text-align: center;
 font-size: 1.2em;
 -moz-border-radius: 0 0 6px 6px;
 border-radius: 0 0 6px 6px;
}

#pagination a {
 color: #fff;
 font-weight: bold;
 padding-right: 0.5em;
}

We first need to add the pagination links:

 var idCounter = 0;

  $('#slides div.slide').each(function() {
  
    idCounter += 1;
    
    $(this).attr('id', 'slide-' + idCounter);
    
    var id = $(this).attr('id');
    
    $('<a></a>').attr('href', '#' + id)
    .text(idCounter).appendTo('#pagination');
  
  
  });

We've created a counter that has been used to create an unique ID for each slide. Then we've populated our pagination bar with a series of links. Each link has its href attribute that points to the ID of a slide. The text of each link is actually the counter itself. Now we need to add an action to each link:

$('#pagination a').each(function() {
  
    var $a = $(this);
    var id = $a.attr('href');
    
    $a.click(function(e) {
    
      $('#slides h1').hide();
    
      
      
      $('div.slide').not($(id)).hide();
            
      $(id).show(500);
        
       
        
          
        
    e.preventDefault();
    
    
    });
  
  
});

We first hide the presentation title, which we don't need. Then we show the slide with the ID attribute defined in the anchor of the current link and, at the same time, we hide the other slides. You can see the demo below.

Demo

Live demo