Skip to main content
cpbrandon
cpbrandon
Inspiring
November 15, 2016
Answered

Go to next slide on rollover in HTML5 output?

  • November 15, 2016
  • 3 replies
  • 576 views

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.

    This topic has been closed for replies.
    Correct answer cpbrandon

    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)

    3 replies

    cpbrandon
    cpbrandonAuthorCorrect answer
    Inspiring
    September 7, 2018

    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)

    RodWard
    RodWard
    Community Expert
    November 16, 2016

    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
    cpbrandonAuthor
    Inspiring
    November 16, 2016

    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
    RodWard
    Community Expert
    November 17, 2016

    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. 

    Lilybiri
    Lilybiri
    Brainiac
    November 15, 2016

    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
    cpbrandonAuthor
    Inspiring
    November 16, 2016

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices