New player (Jan 2020) - javascript trigger issues

Hi there,

I am having some issues with the new player (released in the January 2020 update), in relation to javascript triggers.

I use various javascript triggers to hide and show different elements in the player, according to where the user is in the course. 

One example includes hiding the 'main menu' button (a custom player button that links to a menu landing page) at the beginning of a course; which forces users to read certain content before they gain access to the rest of the course. 

I achieved this by setting a javascript trigger at the beginning of the course:

$("#tab-customlink").hide();

Once users reach the main menu landing page, the custom 'main menu' button becomes available. This is achieved using another javascript trigger:

$("#tab-customlink").show();

Another example is hiding the seekbar on slides where there is no audio on the base layer, but there is audio on other layers (navigating to an audio layer toggles the seekbar on again).

The javascript trigger fires when the timeline starts on the slide:

$('div.controls-group.control-bar.cs-seekcontrol.progress-control').hide();

When the user moves to a slide layer with audio, there is another javascript trigger to turn on the seekbar:

$('div.controls-group.control-bar.cs-seekcontrol.progress-control').show();

I have had a lot of success with using these javascript triggers up until the latest update. Now it appears that the new player has changed the name of the elements, and so these triggers no longer work. I have scoured through the code, via the 'inspect' option in my browser, and tried to identify the new names for the elements. However, when updating the javascript triggers to reflect these new names, the triggers still do not work... The custom 'main menu' button and seekbar remain visible when they should be hidden.

Also, it appears that the left-hand panel, where the in-built player tabs are usually displayed ('menu', 'resources', 'glossary' etc.) appears, even when none of the tabs are selected for that slide. This is frustrating, as it makes it look like there is an error - the user can just see an empty panel; whereas the panel should not be there at all.

Any assistance with these issues would be appreciated - I'm on a tight timeline, and it's been a frustrating blow to discover that what has been working for a long time, is now suddenly not working.

1 Reply
Vincent Scoma

Hi Nicolas, 

Happy to help here! 

Looking at some of the snippets you provided, jQuery was removed from Storyline 360 since jQuery is a potential security concern and Storyline 360 no longer uses it. You can still use jQuery to write custom JavaScript triggers if you're comfortable with it. You just need to reference the jQuery library directly and this article provides more details on how