1

I'm creating some div:s with DOM, every time I click on a div it increases the z-index by one.

The problem is that when lets say... I have created 10 div:s, the one on top will have Z-index:10 So if i create a new div it get Z-index:1 so Ill have to click it 11 times to get it on top.

Any ideas how to sett this in JavaScript ? Or should i have it in CSS ?

cheers

Updated with a fiddle. http://jsfiddle.net/dymond/tQdFZ/20/

Some problem with it though. the divs are not able to move when library is set to No-Wrap. If I change that to onload. the divs moves but the new box icon wont work.

Css Code

.box {

    width : 100px;
    height : 100px;
    position : absolute;
 background-color:red;
}

.hand{
       width: 48px;
        min-height: 12px;
       background: yellow;
    z-index:1;
    border:1px solid black;
}

Problem solved with Z:1000 in the css

Dymond
  • 2,158
  • 7
  • 45
  • 80
  • Please show us your HTML/CSS/JS. – Lowkase Mar 21 '13 at 19:51
  • Try to get max z-index by javascript and assign it to new div by increasing 1. Here is your start point: http://stackoverflow.com/questions/5680770/jquery-find-the-highest-z-index – Ghokun Mar 21 '13 at 19:51
  • @Lowkase Im creating a jsFiddle as we speak. Ghokun. will read it as soon as the Fiddle is ready :) – Dymond Mar 21 '13 at 19:54
  • 2
    Is your goal to simply have the div that was last clicked show on top of the other divs or do you need to remember which divs need to be on top of other divs? – bmceldowney Mar 21 '13 at 20:07
  • @bmceldowney No I just want the newest div on Top. Created an jsFiddle here, somehow the divs are not able to move when the library is "no-wrap in head. But as you can see the newest div is on the bottom. http://jsfiddle.net/dymond/tQdFZ/20/ – Dymond Mar 21 '13 at 20:18
  • @Dymond: Why do you append them to a different element than the other boxes? That way, they won't share the position context. – Bergi Mar 21 '13 at 20:29
  • 1
    if you just want a 'bring-to-front' function, just set the clicked div's z-index to 1 and set all others (or maybe just the previous front div) to 0 – Adam Coulombe Mar 21 '13 at 20:29
  • @AdamCoulombe Well its not that simple as the JSfiddle. Im saving the coordinations in a XML file so everytime i load the xml-file the divs are supposed to have the same coordinations as when i closed it. – Dymond Mar 21 '13 at 20:31
  • 1
    thats fine, you just need to keep a reference to the div that is in front too. The coordinates are irrelevant to the z-index? – Adam Coulombe Mar 21 '13 at 20:33
  • @AdamCoulombe Yes indeed, that's what i though, but I cant really find out how to give a new div The Z-index above the all ready created divs. – Dymond Mar 21 '13 at 20:37
  • 1
    what about a getHighestZIndex type function, like this http://stackoverflow.com/questions/1118198/how-can-you-figure-out-the-highest-z-index-in-your-document – Adam Coulombe Mar 21 '13 at 20:37
  • @AdamCoulombe that could work. I will look at it. – Dymond Mar 21 '13 at 20:38
  • @AdamCoulombe Im curios if it really would work. say I give the new div index 10000. And click on an already created div. The clicked div would have then index 100001. But if I create a new div again. it would only have index 10000. There must be a simpler way to get new divs on top ? – Dymond Mar 21 '13 at 20:41
  • 1
    you would just run findHighestZIndex again to get the newest value each time you create a new one. if you say findHighestZIndex('div') , it will return the highest z-index of all divs on the page at that very moment. – Adam Coulombe Mar 21 '13 at 20:44
  • @AdamCoulombe ... hey! It actually worked. I gave the css : z-index:10000 . So everytime i create a new div. it gets on top. but as the z-index above the previous. THANKS for guiding me :) – Dymond Mar 21 '13 at 20:45

0 Answers0