how to control layers through javascript

Hi Jaipal,

You may want to look at reviewing how you could use the states of an object and the triggers as Matthew mentioned to determine when and how the items will be hidden on your slide. 

As said above, you can do this using a combination of javascript and triggers. Create a variable in SL, set the variable to a particular value with your javascript code (see below), and then create SL triggers in your course that show or hide your layer when that SL variable value changes.

In the example below "ShowLayer1" is a variable that you create in your SL course.

Sample js code:

var player = GetPlayer();
player.SetVar("ShowLayer1","Yes");

Hi,

I would very much appreciate if anyone can elaborate on how to get hold of layers when using javascript.

Is it possible to get hold of wheter checkboxes are selected or not in plan javascript with some getplayer method? This would improve my workflow, not needing to create extra variables and use extra SL triggers for stuff that can be done very easily in plain javascript. 

Thanks!

/David

Allthough SlideLayers as is indeed in SL360 are not easily controllable with Javascript, i needed to control it with Javascript because i have quite some other code setting images and text dynamically on layers.

So i figured out a way to hide /show layers anyway.

- At first make sure your layers are visible at start.
- Then immediately trigger your Javascript
- Use z-index to change the order of your layers. Normally any SlideLayer is above the baselayer.
Changing that order now makes it hide below your baselayer. Whenever you need it to be visible, bring it back above as in the code below...

var idCardLayer = document.querySelector("#slide-window > div > div > div > div > div:nth-child(6)");
gsap.set(idCardLayer, {zIndex:0});

var baseLayer = document.querySelector("#slide-window > div > div > div > div > div.slide-layer.base-layer.shown");
gsap.set(baseLayer, {zIndex:1});

Biggest hurdle i have however is that there is no good reusable way to select your layer. If a layer had a unique CSS class you could set, or accessibility labels... then that would be usable...

Yeah it works as good with a trigger, so indeed not needed perse. I have a SL where the user can upload images that then replace the inline image on a layer. A lot of Javascript code to upload and do all that...so in those functions ( in my generic functions ;-) i wanted to add a reusable way to target and show/hide that layer...using z-index i now can... only thing from preventing it from really reusability so i can call any layer is that i miss a proper selector.

Yes reading and writing all data from servers. Using https://cloudinary.com/ for storing and reading images into Storyline. Expands on the multi-user demo i showed before, so indeed also multi-user options in it. For now its a proof of concept with a lot of cool stuff in it. Already tried using it as a block in Rise360 and that went well after some initial hurdles. CORS trouble and the alike, but got that all working now. So in the end i want reusable Storyline blocks that give my fellow-developers the possibility to create multiplayer games for students in Rise360 without them having to dive deep into Javascript and coding...