Forum Discussion

davelees's avatar
davelees
Community Member
2 months ago
Solved

Javascript issue

I found some script that will move an object to the highest Z index from a master slide, this works fine for one object but I need the script to do it for 3 objects.

let controls = document.querySelector("[data-model-id='60O8MBAYLcA']");
controls.style.zIndex = "9999"

Works for one object but I also have 2 others:

let controls = document.querySelector("[data-model-id='689jgbOitBP']");
controls.style.zIndex = "9999"

let controls = document.querySelector("[data-model-id='6R7jmOoLVUg']");
controls.style.zIndex = "9999"

I can seem to find the right syntax?

advice
Articulate 360
storyline 360
  • Nedim's avatar
    Nedim
    2 months ago

    You can't declare "controls" variable multiple times. You have to use different variable names for each object. There are three options to do it:

    Option 1
    It updates your initial code

    let controls01 = document.querySelector("[data-model-id='60O8MBAYLcA']");
controls01.style.zIndex = "9999";

let controls02 = document.querySelector("[data-model-id='689jgbOitBP']");
controls02.style.zIndex = "9999";

let controls03 = document.querySelector("[data-model-id='6R7jmOoLVUg']");
controls03.style.zIndex = "9999";

    Option 2
    A more efficient way to avoid redundant, repetitive lines of code from Option 1

    let controls = ["6QRrSIXWFTI", "5o24oXaoCNj", "5jkOK4Yq1d3"];
controls.forEach(control => {
    let controlId = document.querySelector(`[data-model-id='${control}']`);
    controlId.style.zIndex = "9999";
});

    Option 3
    If possible, group all objects on the master slide and use the data-model-id of the group.

    let controlsGroup = document.querySelector('[data-model-id="6lNdgNGW4o0"]'); 
controlsGroup.style.zIndex = '9999';

     

  • naps2's avatar
    naps2
    Community Member
    2 months ago

    To adjust the script for multiple objects, use an array to store the elements and loop through them to set the zIndex for all at once. It then becomes cleaner and more manageable code.

  • Nedim's avatar
    Nedim
    Community Member
    2 months ago

    Keep in mind that this will not work with layers. Objects on layers will always appear above objects on the master slide. Since objects on layers use the Feedback Master (such as the blank layout), you would need to execute similar JavaScript code on the Feedback Master to ensure its objects appear above layer objects. You can download a sample project in this thread

  • Nedim's avatar
    Nedim
    Community Member
    2 months ago

    You can't declare "controls" variable multiple times. You have to use different variable names for each object. There are three options to do it:

    Option 1
    It updates your initial code

    let controls01 = document.querySelector("[data-model-id='60O8MBAYLcA']");
controls01.style.zIndex = "9999";

let controls02 = document.querySelector("[data-model-id='689jgbOitBP']");
controls02.style.zIndex = "9999";

let controls03 = document.querySelector("[data-model-id='6R7jmOoLVUg']");
controls03.style.zIndex = "9999";

    Option 2
    A more efficient way to avoid redundant, repetitive lines of code from Option 1

    let controls = ["6QRrSIXWFTI", "5o24oXaoCNj", "5jkOK4Yq1d3"];
controls.forEach(control => {
    let controlId = document.querySelector(`[data-model-id='${control}']`);
    controlId.style.zIndex = "9999";
});

    Option 3
    If possible, group all objects on the master slide and use the data-model-id of the group.

    let controlsGroup = document.querySelector('[data-model-id="6lNdgNGW4o0"]'); 
controlsGroup.style.zIndex = '9999';

     

Related Content