Geek Answers Handbook

How to cast a selected div on top of all other divs

I have a bunch of divs on the screen. I want to do when I select any div, I want its zIndex to always be above all other divs.

In my application, I will need to do this several times when I select a div, put it on top of the others.

Is this possible with Javascript?

+6
source share
6 answers

Yes very.

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; x < 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 the bracket. Fixed now.

+8
source

I recommend setting the variable at the beginning and increasing it.

 var top_z = 10; function bringToTop(element) { element.style.zIndex = ++top_z; }

(++ top_z increments and then returns top_z)

+5
source

In some cases, you can bring an element up without using CSS directly. If you put your DIVs in the body tag or under another parent element, you can reattach it 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.

+5
source

I would do something like this:

 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 else you can also use

 sendontop("bringmeup");

I ran into this problem and solved in this way

0
source

Hope this helps!

 document.getElementById("mainactiondiv").firstElementChild.appendChild(bubble);
0
source

This worked for me (a modified version of Ben's solution because it caused so many errors). When you click on an item, it should go up. 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>
0
source

More articles:


All Articles