Targeting Layers with Javascript

Feb 05, 2016

Hi, I know you can target variables, and objects with Javascript. I was wondering if it is possible to target layers with javascript?

3 Replies
Math Notermans

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...

This discussion is closed. You can start a new discussion or contact Articulate Support.