2

I have a lot of dynamic created elements, anytime it getting z-Index++, so that the latest element is anytime on top. When one other of them will be clicked, he get his z-Index max+1. So i need to get the element, that is on top, how can i do it?

Native JS Only please. Thank you

BASILIO
  • 847
  • 2
  • 12
  • 26
  • 1
    duplicate: http://stackoverflow.com/questions/1118198/how-can-you-figure-out-the-highest-z-index-in-your-document – wildhaber Jan 19 '13 at 15:53

3 Answers3

6

Don't try to find it - you would need to iterate all your DOM. As you are creating them dynamically, just save a reference to it and update it each time. Or just store the current highest z-index value in a max variable.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • How do you mean, with storage? – BASILIO Jan 19 '13 at 15:54
  • That's smart and I like the idea, but I don't see how it's possible to keep a precise z-index variable without iterating the DOM. The OP said he's creating some dynamic elements but we don't know how many there are before the first added element... – rafaelbiten Jan 19 '13 at 15:57
  • @BASILIO: The same mechanism you use for `z-Index++` when dynamically creating the elements – Bergi Jan 19 '13 at 15:58
  • `but I don't see how it's possible to keep a precise z-index` ...by setting it? – Popnoodles Jan 19 '13 at 15:58
  • @7th: I had expected that the OP creates the dynamic elements himself. If you can't count on that, you of course would need to use a very inefficient [DOM iteration](http://stackoverflow.com/questions/1118198/how-can-you-figure-out-the-highest-z-index-in-your-document), that's true. – Bergi Jan 19 '13 at 16:02
  • See it how a Desktop with a lot of opened windows, you make alt+f4 and it close the one, that is on top, if you do it again, the next one, that was on TOP after after the last is closed, and so up to the free Desktop. Something of this art is that i need. – BASILIO Jan 19 '13 at 16:04
  • @Bergi or else, he could start working with some higher "safe" z-index. Ex.: first dynamic obj will have a z-index of 100 and my variable will start from that point on... it could work. – rafaelbiten Jan 19 '13 at 16:04
  • @BASILIO I don't code in native JS to help you, but in that case, a simple function with a loop would do. It would start checking for existing z-indexes from highers values to lower ones. The first found, save the value to a var, close the object with that index and return; until the function runs again. Next time the function runs, starst from the last saved var. It shouldn't be too complicated. – rafaelbiten Jan 19 '13 at 16:07
  • 1
    @BASILIO: That's a lot of program logic. Do not rely on DOM-CSS-values for that, but build a data model for it. You should have a stack (array) of your windows, for example, which you just need to `pop()` to get and close the topmost window. – Bergi Jan 19 '13 at 16:08
  • @BASILIO perhaps keeping an array of elements sorted by `z-index` would help. To remove top element just use `pop()` on array – charlietfl Jan 19 '13 at 16:09
1

http://jsfiddle.net/h4ets/

assuming you are only applying z-index in the style attribute

var elems = document.body.getElementsByTagName("*");
var largest;
var check = 0;
for(i=0;i<elems.length;i++){
    if(elems[i].style.zIndex > check){
        check = elems[i].style.zIndex;
        largest = elems[i];
    }
}
// largest is the element
// check is the z-index value of the element with largest z-index

getting the computed style of elements seems to be an issue in webkit browsers such as chrome, and safari as it returns auto, this is a major isssue as chrome especially now is a popular and widely used browser. so for now i would suggest if you want to do this apply the z-index in a style attribute until the bug is fixed

Yusaf Khaliq
  • 3,333
  • 11
  • 42
  • 82
0

This a best solution

$(function(){
    var maxZ = Math.max.apply(null,$.map($('body > *'), function(e,n){
           if($(e).css('position')=='absolute')
                return parseInt($(e).css('z-index'))||1 ;
           })
    );
    alert(maxZ);
});
Roberto Godoy
  • 185
  • 1
  • 2
  • 8
  • While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – frobinsonj Jun 25 '19 at 13:37