An introduction to Deck JS

PowerPoint has been the choice of software for corporate presentations since the 1990s. Easy to use and configure, it takes real skill to mess a PowerPoint presentation up. However, for web coders seeking greater visual flare there are now a number of browser-based solutions that are dependent on HTML, CSS and JavaScript.

One such script is Deck JS. Created by Caleb Troughton, it is a jQuery plugin and has recently recently been exposed to wider attention after being promoted on the Smashing Magazine Twitter feed.

I recently spent a few days using Deck JS in order to create a presentation for a forthcoming Foundation Internet Marketing course at Redbridge College, and I would recommend this nifty little script to others.

Using it is straightforward and requires only the bare minimum knowledge of jQuery.

Firstly, download the files and link to them from the head of the document.

Then, create you HTML as so:

<div class="slide" id="frame-one">
  <h1>Frame One</h1>
  <p>Sed sem ligula, rhoncus et pharetra vel, vulputate interdum lacus. Ut turpis magna, dictum vel porttitor eu, mattis ut ipsum. Vestibulum varius lorem a diam varius pretium. Phasellus condimentum, turpis id pretium accumsan, augue felis adipiscing orci, vitae ultricies massa justo vitae ipsum. Maecenas consectetur, ligula sit amet auctor dictum, orci odio elementum nulla, in rutrum lectus lectus vel ipsum. </p>
</div>
<div class="slide" id="frame-two">
  <h1>Frame Two</h1>
  <p>Integer massa massa, tincidunt interdum convallis vitae, sollicitudin id nisi. Aenean dictum hendrerit metus, eu tempus eros placerat eleifend. Vivamus mi felis, ultrices at dapibus nec, dapibus eget odio. </p>
</div>
<div class="slide" id="frame-three">
  <h1>Frame Three</h1>
  <p> Sed nulla libero, scelerisque nec laoreet a, pellentesque sed diam. Donec venenatis, arcu ac tempus cursus, mi felis malesuada justo, vel consectetur eros diam vel diam. Proin non risus ut elit tristique gravida eget sed mauris. Praesent neque dolor, rhoncus eu lobortis facilisis, consequat et lacus. Praesent scelerisque viverra arcu ut aliquam. Ut luctus sapien vehicula nibh tristique hendrerit. </p>
</div>

And now in the head add the following jQuery:

/* <![CDATA[ */
$(document).ready(function() {

$.deck('.slide');

$.deck([
 '#frame-one',
 '#frame-two',
 '#frame-three'
]);

}); // End document ready
/*  */

]]>

And that is it. Easy. Note that the order of presentation is decided by jQuery not the divs in the HTML.

In the best tradition of Blue Peter here is one I made earlier: http://www.linkbuilding.suburban-glory.com/

And here is another one: http://www.keywords.suburban-glory.com/

The biggest upside of creating a presentation with Deck JS is that you also have the full arsenal of HTML, CSS and JavaScript at your disposal and all you need to display it is a browser.