Forum Discussion
Slide master layers on top, even while scrubbing timeline
Hello! I'm looking to keep items from the slide master on top of every slide. I have achieved this -- mostly -- using the z-index solution that's suggested widely.
However, when I scrub the seekbar, click to the end of the seekbar, etc., the z-index seems to change and the solution no longer works. I'm on a bit of a time crunch and wondering if anyone knows of a solution.
The code in the slide master is doing two things -- a) using the accessibility ID for Javascript (that's the z-index bit) and b) using the early access technique (that uses depth). We have team members using both versions of Storyline and need to be sure this will work properly no matter who publishes the file.
Thank you so much!
https://360.articulate.com/review/content/90eef83d-ea49-4af7-b8d4-70a544e1e87f/review
- mandy_laskyCommunity Member
var progressmarker = document.querySelector('[data-acc-text="Project_Progress"]'); var line = document.querySelector('[data-acc-text="WhiteOverline"]'); var darkbar = document.querySelector('[data-acc-text="darkbar"]'); var banner = document.querySelector('[data-acc-text="WhiteBanner.png"]'); var onslogo = document.querySelector('[data-acc-text="whitelogo"]'); var ref = document.querySelector('[data-acc-text="Ref_Rectangle"]'); progressmarker.style.zIndex = '9999'; line.style.zIndex = '9999'; darkbar.style.zIndex = '9990'; banner.style.zIndex = '9995'; onslogo.style.zIndex = '9999'; ref.style.zIndex = '9998';
This is what I have. Is there any way to keep these items at the top of the z-index even when the seekbar is scrubbed or clicked on?
- SamHillSuper Hero
Here's something to try out. untested. It covers mouse and keyboard. You might need to check touch actually. That event might need adding as well.
var progressmarker, line, darkbar, banner, onslogo, ref; const initElements = () => { progressmarker = progressmarker || document.querySelector('[data-acc-text="Project_Progress"]'); line = line || document.querySelector('[data-acc-text="WhiteOverline"]'); darkbar = darkbar || document.querySelector('[data-acc-text="darkbar"]'); banner = banner || document.querySelector('[data-acc-text="WhiteBanner.png"]'); onslogo = onslogo || document.querySelector('[data-acc-text="whitelogo"]'); ref = ref || document.querySelector('[data-acc-text="Ref_Rectangle"]'); setIndex(); } const setIndex = () => { progressmarker.style.zIndex = '9999'; line.style.zIndex = '9999'; darkbar.style.zIndex = '9990'; banner.style.zIndex = '9995'; onslogo.style.zIndex = '9999'; ref.style.zIndex = '9998'; } const initListeners = () => { // add listeners to the seek bar container // Select the target div const seekDiv = document.getElementById('seek'); // Track keyboard and mouse interactions let isDragging = false; // Detect mouse events seekDiv.addEventListener('mousedown', (event) => { isDragging = true; setIndex(); event.preventDefault(); // Prevent unintended text selection }); // Detect mouse movement during drag document.addEventListener('mousemove', (event) => { if (isDragging) setIndex(); }); // Detect mouse up to stop dragging document.addEventListener('mouseup', () => { if (isDragging) isDragging = false; }); // Optional: Detect when key is released seekDiv.addEventListener('keyup', (event) => { setIndex(); }); } requestAnimationFrame(() => { initElements(); initListeners(); });