OneFreeVoice

One of the (many) highlights of Web Essentials 2005 was Eric Meyer’s S5 (Simple Standards-Based Slide Show System. This month I was faced with having to prepare a presentation for the October LUG/IP meeting, and at the time I started I didn’t have an available wireless connection on my laptop with which to either a.) download and install OpenOffice, or b.) grab Eric’s code. I thought about what would be needed, rolled up my sleeves, and rolled my own.

Now my version probably isn’t nearly as elegent as Mr. Meyer’s. It’s probably not even close. And there are a couple of HUGE caveats - I only tested it in firefox, and it only presents correctly when the browser is in full-screen (hint: press F11). However, this was appropriate for my specific uses… as the sole presenter, I was well aware of the platform and the audience. Sadly, the document isn’t really re-usable, unless anyone else uses adheres to the same platform. That said, the presentation does validate to XHTML 1.1. This fact, and the fact that the presentation went well allow me to categorize the effort as a success. I also find I learned quite a bit during the process - which should always be a secondary goal (if not primary) to any endeavor.

I’m going to discuss how the whole thing works. Before I dive in, you can see the Linux Boot Process presentation here.

The whole thing is done in CSS and javascript, and if you view the page without styles applied, you simply get a plain jane copy of the text in the presentation in linear fashion. The most important part of the whole thing is to get only one slide’s worth of content to show on the screen at one time. I achieved this by including the contents of each slide in a separate <div> element. Each slide (div) has a different ID, and they are named “slide_1″, “slide_2″, etc. When moving to a different slide, I use javacsript to change the classes on the slides. I decided to keep it simple, so my two styles are:

.show {
	display:block;
}
.hide {
	display:none;
}

The slide number on the right side of the footer is maintained by changing the value of an input field (id=”snum”) that is styled so that it appears just like any other text on the page.

There are 5 navigational elements to the presentation:

1. When clicking on the bulleted text the slide show progresses to the next slide
2. When clicking on the < icon on the bottom the slide show moves to the previous slide
3. When clicking on the menu icon the slide show goes back to the agenda page
4. When clicking on an item on the agenda the slide show advances to that slide
5. When clicking on the > icon, the slide show progresses to the next slide

One of the most important pieces of the entire javascript is the variable “intSlide”. This variable always holds the value of the current slide. It’s also the value that utimately gets placed into the slide number input field mentioned above.

The primary javascript function is as follows:

function gotoSlide(intNewSlide) {
	//This function takes the presentation to a specific slide. Used in the footer and in the agenda
	strNewSlide = document.getElementById("slide_" + intNewSlide);
	strOldSlide = document.getElementById("slide_" + intSlide);
	//hide the old slide first to prevent any painful looking overlaps
	strOldSlide.className = "hide";
	//show the new slide
	strNewSlide.className = "show";
	//set the intSlide variable to hold the current slide number
	intSlide = intNewSlide;
	//change the slide number
	strSlideInput = document.getElementById("snum");
	strSlideInput.value = ("slide " + intSlide);
}

As you can see, it’s actually fairly straightforward. We feed the number of the slide we want to move to (intNewSlide) into the function. Then we grab the element using getElementById. We also grab the current slide so that we can hide it. You’ll notice that we stick “slide_” to the beginning of intNewSlide because our divs have IDs like “slide_1″. Once we have the elements, we can change their classes using the javacsript className attribute. We set the current (old) slide to “hide” and we set the new slide to “show”. Now the slide contents has changed. All that’s left to do is update intSlide to reflect the new slide that we’re on, and finally change the value of the slide number at the bottom. Simple, right?

Now in order to use this, we simply call it in an anchor tag. For example, in the agenda we have:BIOSWe use the same function for the index button on the bottom - it just points to slide 2.

I started out creating similar code for the Previous and Next functionality, but I quickly realized that I could use the same gotoSlide() function for that if I could just pass it the correct slide number. But since I only have 1 footer and 15 slides, there’s no way to hard code it. It actually turned out to be an incredibly simple math exercise.

function gotoNext() {
	//This function takes the presentation to the next slide - used in footer and div onClick
	intNewSlide = intSlide + 1;
	gotoSlide(intNewSlide);
}
function gotoPrev() {
	//This function takes the presentation to the previous slide - used in footer
	intNewSlide = intSlide - 1;
	gotoSlide(intNewSlide);
}

Since we already have our intSlide variable holding the current slide position, we either add or subtract from it, and then pass that into the gotoSlide() function.

The last navigation requirement was to have the slide advance if you clicked anywhere on it. I couldn’t quite get it to work out exactly that way. I had to settle for clicking anywhere that there was text - which in most cases pretty much covered the whole slide anyway. All that I needed to do was place onclick on each slide.

And there you have it. A complete presentation in a single XHTML file (sans images of course). And another beautiful part about it is the fact that the entire presentation including images is under 21k. I checked a plain 2-slide PPT without graphics at work, and it weighed in at 66k. Gotta love that.

As always comments are welcome. If you know of a better, more elegant way of doing it, please share. If you find any issues, or get around to testing it in something other than Firefox, let me know if it works or not.