I have a bunch of divs on the screen. What I want to do is, when I select any div, I want its zIndex to be always higher than all other divs.
In my application, i will need to do this repeatedly whenever I select a div, put it on top of others.
Is this possible using Javascript?
In some cases, you can bring an element to top without using CSS directly. If you place your DIVs to the body tag or under another parent element, you can re-append itself to the parent. JavaScript will move it to the last position in the child list which will bring the element in a "natural" way to the top.
Example:
myElement.parentNode.appendChild(myElement);
I used this trick for my custom context menu. Works without zIndex.
Yes, very much so.
HTML:
<div>foo</div>
<div>bar</div>
<div>bas</div>
Javascript:
//Collect all divs in array, then work on them
var all = document.selectElementsByTagName("div");
var prev = false;
for(i = 0; i < all.length; i++) {
all[i].onclick = function() {
all[i].style.position = 'relative'; //necessary to use z-index
if (prev) { prev.style.zIndex = 1; }
this.style.zIndex = 1000;
prev = this;
}
}
}
//Edit: Sorry, forgot a brace. Corrected now.
z-index depended on position: relative I just thought it had issues... that is the important part here. –
Osmund I recommend setting a variable at the beginning and incrementing that.
var top_z = 10;
function bringToTop(element)
{
element.style.zIndex = ++top_z;
}
(++top_z increments and then returns top_z)
I would do something like that:
var my_index = 100; //global var on page
function sendontop(div_id) {
if (typeOf(div_id)=="string") {
div_id=document.getElementById(div_id);
}
div_id.style.zIndex = my_index++;
}
on the object
<div id="bringmeup" onclick="sendontop(this);" >somecontent</div>
or otherwise you can also use
sendontop("bringmeup");
i came across this problem and solved like that
Hope it helps!
document.getElementById("mainactiondiv").firstElementChild.appendChild(bubble);
This worked for me (a modified version of Ben's solution, because it generated so many errors). When you click the element, it should go to the top. Hope it helps!
var allDivs = document.getElementsByTagName("div"); //Changed variable name to 'allDivs' because the name 'all' generated an error.
var prev = false;
for(ii = 0; ii < allDivs.length; ii++) { // changed the for variable to 'ii' instead of 'i' so i can find it easier (searching for 'i' will return avery instance of the letter i, even inside words, not just the variable, whereas ii is unique).
allDivs[ii].onclick = function() {
this.style.position = 'absolute'; //You have to have a position type defined. It doesn't matter what type, you just have to. If you define it elsewhere in your styles you can remove this.
if (prev) { prev.style.zIndex = 1; }
this.style.zIndex = 1000;
prev = this;
}
}div {
padding:20px;
border:2px solid black;
border-radius:4px;
}
#d4 {
background-color:lightblue;
position:absolute;
top:30px;
left:20px;
}
#d3 {
background-color:lightgreen;
position:absolute;
top:70px;
left:20px;
}
#d2 {
background-color:yellow;
position:absolute;
top:30px;
left:70px;
}
#d1 {
background-color:pink;
position:absolute;
top:70px;
left:70px;
}<html>
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
<div id="d4">div4</div>
</html>This is what worked for me. It traverses all elements on the page and increases the max z-index by 1.
Note that this method still works when there have been dynamically increased z indices on the page as well:
function bring_to_front(target_id) {
const all_z = [];
document.querySelectorAll("*").forEach(function(elem) {
all_z.push(elem.style.zIndex)
})
const max_index = Math.max.apply(null, all_z.map((x) => Number(x)));
const new_max_index = max_index + 1;
document.getElementById(target_id).style.zIndex = new_max_index;
}
Simply pass-in the id of the element you wish to bring to the front.
© 2022 - 2025 — McMap. All rights reserved.