Slide Show Beta
Not many people know about it, but several major version numbers ago, Opera introduced a feature called Opera Show. This feature allowed you to invoke a projection-medium display mode by hitting a single key. (They’ve since introduced a similar single-key invocation of a handheld device.) In this mode, any style sheets that applied to the projection medium were used to present the document. It was a lightweight form of Powerpoint—not as powerful, perhaps, since it was best suited to showing a slide show of static pages, but definitely useful. Many of my talks over the last two years have used Opera Show.
The great thing is that with one (X)HTML document, you can have a slide show, a printer-friendly version, and a screen presentation. I put markup and CSS examples right there in the document, ready to be printed, and simply hide them in the slide show. In some cases, I printed out the file for handouts, and then used the exact same file for the slide show. It was very, very handy. It was also browser-specific… and when Opera 7.5 for OS X came out, it introduced a problem: the banner ads showed up even in slide shows. I didn’t really feel like buying a Web browser just to make my slide shows neater—if I were going to spend money on a presentation solution, I’d be much more likely to buy Keynote.
About the same time, though, Tantek Çelik was using a slide show system he’d cooked up, one that was nominally cross-browser. It used CSS, JavaScript, and a single HTML document to create slide shows. Here’s one example of a slide show using his approach. I liked what he’d done, but when I dug into the guts I found that it had certain limitations I didn’t like.
(Aside: Apparently Steve Champeon has been using a similar slide show system for a while—here’s an example—but it has many of the same things I didn’t like about Tantek’s approach, such as explicitly ID’ing each slide in the markup. My script assigns IDs dynamically, thus freeing you from having to number the slides in the markup and thus making it much easier to rearrange or insert slides.)
So I took Tantek’s idea and expanded on it, making it more flexible on the markup end and adding some features. I’ve run into some stumbling blocks, though, and so in the best tradition of the LazyWeb, I’m turning to you folks for assistance. Here’s the latest test file, and here’s an archive containing the test file and its associated files. At the moment, the best (as in “most like what I expect”) rendering of the slide show is in Firefox, although it may seem a bit sluggish. Other browsers have one or more problems; these are documented in the test file. My goal is to bring Firefox, Explorer, and Safari together in terms of how they act. Opera is secondary because I currently plan to hide all of the stuff I’m doing from Opera, and let it handle the slide show via the built-in Opera Show. It won’t have quite the same functionality, I admit, but it will be good enough for me to call it done.
Note that the test file itself contains a bullet-point explanation of what’s going on, and lists the bugs I’ve yet to squash. If you’d like to help squash them in return for credit in the source code, go crazy. If you’re more in the “I want to use this” crowd, then you might want to wait until the system exits beta. How will you know when that happens? First, I’ll announce it on meyerweb. Second, it will be given a jazzy name of some kind (thus causing the name of its directory to change). And third, the word “[BETA]” won’t be plastered all over the test document.
Most of my current bugs are DOM and JavaScript related, although there’s a presentation problem in IE/Win that I frankly just haven’t had the energy to tackle. Note that I’m willing to use detection methods in the JS to make the features work, but I am not willing to serve up browser-specific style sheets. Call me a purist, but I just can’t bring myself to go there.
I’ll leave comments open for people to share information on bug fixes, or suggestions for ways to go about fixing them. Also, if you run into a problem not listed in the slide show, you can leave a comment. NOTE: I don’t care if the slide show feature doesn’t work in NN4.x, because I’m planning to hide all CSS and JavaScript from that browser before this exits beta. That means NN4.x users will see a perfectly straightforward HTML document, not a horribly mangled attempt at the slide show.
My appreciation for whatever assistance people can provide.
