Twitter: raymondcamden

Address: Lafayette, LA, USA

Adding mouse click navigation to Reveal.js

10-20-2012 5,825 views JavaScript, Misc 3 Comments

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.


These comments will soon be imported into Disqus. To add a comment, use Disqus above.
  • Commented on 10-22-2012 at 11:25 AM
    That's a cool idea, double cool for showing me Touch Mouse as well, I hadn't heard of that.
  • Commented on 09-14-2013 at 8:54 PM
    I think the problem with this is that clicking "left" arrow will go back to the current page.
  • Commented on 09-15-2013 at 9:56 AM
    I'm not seeing that. Instead, it looks like the controls are broken. My code should probably notice a click on those controls and NOT do anything in that case.