Forum Discussion

RebeccaNazareth's avatar
RebeccaNazareth
Community Member
2 months ago

Creating an overlay to fill the browser using Javascript

Hello! 

I have a course that has a knowledge check. Currently, on the master slide of the question, I have a javascript trigger that changes the background of the browser.

    document.body.style.backgroundColor = "#212221";

This works well. 

I chose to do it this way to create a seamless background effect in the browser, and this ensures the whole browser changes background colour rather than just the slide background.

On my main slide, which uses the master slide above, I have a layer open with a text box on it.


What I want
When the layer opens on the main slide, I would like a 40% transparent overlay to appear on the masterslide. This overlay would cover the whole browser, but any content on the main slide would appear above the master slide and it's overlay. 

 

I have added some more JS to the masterslide which achieves the whole browser overlay, but unfortunately it always appears above the content on the main slide as well.

var overlay = document.createElement("div"); overlay.style.position = "fixed"; overlay.style.top = "0"; overlay.style.left = "0"; overlay.style.width = "100%"; overlay.style.height = "100%"; overlay.style.backgroundColor = "rgba(33, 34, 33, 0.4)"; overlay.style.zIndex = "100"; overlay.style.pointerEvents = "none"; document.body.appendChild(overlay);


Any help getting this overlay to cover all of the masterslide but ensure the content on the main slide appears above it?

 

Thanks in advance!

e-learning development
storyline 360
  • SamHill's avatar
    SamHill
    Super Hero
    2 months ago

    You will need to determine the best area within the document object model (DOM) to add the over. 

    You are currently appending to the document.body, which means it is the last element in the document.body, which, by default is the top layer.

    You are also setting the zIndex to 100, which also moves the element to the top.

    In order to do what you are looking to do, you would need to publish the module, and then open the Developer Console in your browser, and find the location within the DOM that sandwiches the overlay between the locations you need to.

    You can do this in realtime, by cutting the overlay out of the HTML, and trying it in different locations. 

    I gave the overlay and ID of MY_OVERLAY just to make it easier to find.

    var overlay = document.createElement("div");
overlay.id = "MY_OVERLAY";
overlay.style.position = "fixed";
overlay.style.top = "0";
overlay.style.left = "0";
overlay.style.width = "100%";
overlay.style.height = "100%";
overlay.style.backgroundColor = "rgba(33, 34, 33, 0.4)";
// commented this out, as you don't know the correct z-index until you know the correct location to insert the element.
// overlay.style.zIndex = "100";
overlay.style.pointerEvents = "none";
// This script will need to change when you determine the correct location in the DOM to insert the new element
document.body.appendChild(overlay);

     

Related Content