Go to next slide on rollover in HTML5 output?

[cpbrandon]

I realize HTML5 output is mostly for tablet/phone/touchscreen displays, but our team creates software simulation training for desktop end users and we want to be able to publish in HTML5 because clients are requesting it. We previously used Rollover Slidelets programmed to move to the next slide on rollover. As far as I understand, this is not a reliable interaction when publishing as HTML5. My hope is there is something (piece of code, widget, whatever it may be.) that we can get access to without having to spend a lot of time or money on to add this functionality back into our courses.

Any feedback or suggestions are welcome.

Thanks.

[Lilybiri]

Rollover may work on desktop/laptops although it is marked as being unavailable for HTML5 output. It has to be tested, cannot confirm it will be the case on all browsers.

[cpbrandon]

Thanks, Lilybiri. We will give it a shot. Maybe it will work! The fact that it is listed as an object that isn't HTML5 compatible is why we assumed it wouldn't work.  Thanks for your reply.

[RodWard]

The CpExtra HTML5 widget from Infosemantics.com.au is capable of triggering Advanced Actions in Captivate triggered by rollover mouse events.

The caveat (as Lilybiri points out) is that these rollover events won't work on mobile devices, only desktops where people will be using a mouse.

[cpbrandon]

Thanks, Rod, for your reply as well. I've seen some videos about your CpExtra HTML5 widget, and it looks very powerful indeed. I could be wrong, but it looks like it might be complicated to learn. Also, we were hoping there might be a solution without having to purchase something that required individual licenses for each of our team members (we have quite a few). This may be an option though if the slidelets in fact do not work as we need.

Thanks again for your suggestion.

[RodWard]

There are two training courses available as well:

CpExtra Quick Start | Infosemantics Pty Ltd

CpExtra Up and Running | Infosemantics Pty Ltd

There IS an alternative that does not require purchase of licenses for each team member. Just require all members of your team to learn how to program in JavaScript, HTML and CSS!

Yes the widget is VERY powerful and growing in power with each new release.  Anything that is designed to be replacing the need to become a full on HTML5 programmer would still require SOME learning curve.

However, only YOU can decide if the problems this widget solves will be worth the purchase price. 

[cpbrandon · Accepted solution]

Updating this with an answer I received a while back. Thanks to Steven Warwick for the solution! This solution works for projects published in HTML5 to be used on desktop devices.

Use the following script to allow users to move to the next slide upon hovering over an object:

$("#shape_id_of_menu").on("mouseenter",function(){cp.goToNextSlide()})

What you do is:

1. Give the button or Smart Shape a unique ID in captivate.
2. Create an action of “on slide enter, execute javascript”.
3. Add the line as you see it above (to the script window), with the quotes around the ID and a “#” before the ID name.

          Example: $("#myShapeButton").on("mouseenter",function(){cp.goToNextSlide()})

This approach moves you to the next slide anytime someone puts their mouse in the button.

Note: there is some small chance that it won’t work due to some aspects of how captivate generates the screen. If it doesn’t, you can use the below script (although the solution above has worked for my purposes):

dothis = function () {$("#shape_id_of_menu").on("mouseenter",function(){cp.goToNextSlide()})}

setTimeout( dothis, 1000)