Impress.js
impress.js is a beautiful piece of a presentation library that uses HTML5 elements to give you a continuous ‘infinite’ presentation surface. This allows you to develop presentations employing effects that are simply impossible using a traditional slide-based deck.
The only thing that I was really missing from impress.js’s library was the addition of a presenter view. Even if you are perfectly comfortable with your subject matter, having a couple of key sentences or throwaway jokes waiting for you is nice mental reassurance.
So what do we do about it?
Luckily, impress.js is very extendable. It turns out there are several presenter view plugins available, but I figured I’d throw mine out there anyways. The full code for the plugin (although requiring jQuery) is quite short.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
(function() { var myRef; if ($("div.presenter").length != 0) { myRef = window.open(); myRef.document.title = "Presenter Notes"; myRef.document.documentElement.innerHTML = "Any presenter notes will appear here."; } document.addEventListener("impress:stepenter", function (event) { if ($("div.active div.presenter").length != 0 && myRef && myRef.document) { myRef.document.documentElement.innerHTML = $("div.active div.presenter").html(); } }); document.addEventListener("impress:stepleave", function (event) { if ($("div.active div.presenter").length != 0 && myRef && myRef.document) { myRef.document.documentElement.innerHTML = $("div.active div.presenter").html(); } }); $(window).unload(function() { if (myRef) { myRef.close(); } }) })(); |
Basically, we bind to the step leave and enter events (to get the notes updated as quickly as possible), and insert any content contained in a div with a presenter class. You should set the presenter class’s style to display:none as well, to make sure it doesn’t appear on your slides.
That’s it – quick updating presenter view, closing when you close your presentation.
Leave a Reply