Forum Discussion

mandy_lasky's avatar
mandy_lasky
Community Member
2 months ago

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_lasky's avatar
    mandy_lasky
    Community 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?

    • SamHill's avatar
      SamHill
      Super 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();
      });