Adding mouse click navigation to Reveal.js

I'm growing more and more fond of the HTML presentation framework Reveal.js. One thing I was curious about was whether I could use mouse clicks to navigate a presentation. Why? I'm considering using a Bluetooth device to navigate a presentation while I'm away from my laptop. I've also recently installed Touch Mouse from Logitech, which allows your iOS device to drive a mouse (both the cursor and mouse buttons).

I whipped up the following code, which I added to the bottom of the default Reveal.js demo presentation.

The first line sets up the event handler for mouse clicks. The second event handler disables the context menu. This is necessary for right menu clicks. Without it you get the normal right click context menu.

Finally, the actual event handler is somewhat trivial. You check which button was clicked and then use the Reveal API to go either forward or backward. (The Logitech app supports a center mouse button too. You could bind that to the overview feature, which shows you all the slides.)

That's it. Regular links still work fine, which is kind of cool. I'm not sure if I'll actually use this, but I thought it was a fun experiment. If you want to test this, hit up the demo below.

Like This?

If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can also subscribe to the email feed to get notified of new posts.