3 replies to this topic

[bkb]

Newbie here...would like to set different list items to varying z-indexes (within the same list) with Javascript. I'm able to change visibility and some other stuff but can't seem to do z-indexes. Is this do-able?

[Fae]

Should be... Just navigate to the relevant element (using getElementById, getElementsByTagName, etc...) and use element.setAttribute("Z-index", "newZ-IndexValue");

Remember, it's setAttribute(String, String), so if you wanna calculate the value for each Z-index and have it stored as an integer, you'll have to do, for example:

document.getElementById("Example Element").setAttribute("Z-index", ""+Zvalue);

Also, welcome to Codecall! Hope you like it here ^^

[bkb]

Thanks. I was doing it a little differently...but can't get yours to work either. I'm thinking I should be able to get these two overlapping button to toggle which is in front using the z-index as I can do with other element types. My code (included yours also...but neither seem to work):

function promote(boxid) {
document.getElementById(boxid).style.zIndex = 100;
document.getElementById(boxid).setAttribute("Z-index", "" + 100);
}
function demote(boxid) {
document.getElementById(boxid).style.zIndex = -100;
document.getElementById(boxid).setAttribute("Z-index", "" + -100);
}

------
<div id="buttonA-inset">
<ul>
<li id="one"> <a onclick="demote('one');promote('one1')">Button 1</a></li>
<li id="two">Button 2</li>
<li id="three">Button 3</li>
</ul>
</div>
<div id="buttonA-outset">
<ul>
<li id="one1"> <a onclick="demote('one1');promote('one')">Button 1</a></li>
<li id="two2">Button 2</li>
<li id="three3">Button 3</li>
</ul>
</div>

[bkb]

Solved. I had to explicitly set the position for the z to work.