Hide or Show Seekbar in slide

Apr 06, 2016

Rick Angelone
By Rick Angelone

I've read several posts on this topic, but none have answered the question. Is there a way (using javascript) to hide the seekbar or show the seekbar using a javascript trigger?

i.e. make a button that hides it, and another button to show it...both in the same slide.

Please add code if you have it - soooo much appreciated!

Thanks!

16 Replies
Onoda Sakamichi
5 years ago03/06/19 at 5:21 pm (UTC)

Hi, Rachel.

To hide the seekbar on individual layers, insert a trigger to execute JavaScript and enter this single line of code:

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

You will need to enter the same code, but change .hide(); to .show(); on layers, including the base layer, where you want the seekbar to display.


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

Please note this works only with HTML5 output, not Flash.

Janil Samson
4 years ago02/06/20 at 2:54 am (UTC)
Claudio Fayngolz

Now that the latest version of Storyline 360 doesn't support Jquery, what will be the best way to do this?

Hi Claudio,

I recently encountered this as well. I'm no expert in JavaScript but a workaround  that worked for me was defining the DIV ID  of the player controls as a variable to hide and show it. Here is what I used in the execute Java trigger:

To hide:

var x = document.getElementById("playback-controls");
{x.style.display = "none";

}

To show:

var x = document.getElementById("playback-controls");
{x.style.display = "block";

}

Again, this worked for me but I'm no Java expert so hopefully someone else in the community can give you a better solution.

Sign In to Reply