0

At risk of being told this is a duplicate question, I am trying to find out how to get the highest z-Index value of all the divs on a page INCLUDING those which have been created by jQuery.

The situation is, I have a toolTip div which sits at the top of the page and is populated onMouseover or onClick by jQuery based upon the trigger element.

I have a hidden div which onClick of a calling element shows up in a Lightbox style window which is given it's z-Index by jQuery. I need to be able to trigger my onMouseover toolTip from an element within this div, but it's currently showing behind it.

Clearly I could do it manually, but for future use I thought a computed method would be better...

Googling brought me to SO as usual, to this article How can you figure out the highest z-index in your document?

From which I found

function findHighestZIndex(elem) {
    var elems = document.getElementsByTagName(elem);
    var highest = 0;
    for (var i = 0; i < elems.length; i++) {
        var zindex = document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index");
        if ((zindex > highest) && (zindex != 'auto')) {
            highest = zindex;
        }
    }
    return (highest * 1);
}

Which works fine for elements which have explicitly set z-Indexes by CSS.

However, not divs shown/populated by jQuery.

The function above ignores this modal window, presumably because the z-Index is programatically created?

I found this function also on SO

function getMaxZIndex() {
    var zIndexMax = 0;
    $('div').each(function () {
        if ($(this).css('z-index') > zIndexMax) zIndexMax = $(this).css('z-index');
    });
    return (zIndexMax * 1);
}

But for some reason that returns 'NAN'

I think I need to use 'live' somewhere in here, but not sure how to go about doing it.

Once again, apologies if anyone thinks this is a duplicate question, but the questions I've found here don't quite answer this issue.

Community
  • 1
  • 1
Jamie Hartnoll
  • 7,231
  • 13
  • 58
  • 97
  • Run the `findHighestZIndex` function in the modal plugin's callback function for when it opens. That way the modal will be in the DOM and will be factored into the calculation. – Jasper Dec 09 '11 at 19:07
  • Ok, I have to go out now, but I will try that later. I have been running the findHighestZIndex function in the function that calls the hoverTip though, which is therefore after the modalwindow has been displayed as the trigger's not even displayed before that as it's within the modalWindow so I figured then it should be seen...? – Jamie Hartnoll Dec 09 '11 at 19:14

3 Answers3

2

.css('z-index') returns string

'100' > 0 //true
'auto' > '100' //true

as a result zIndexMax will most likely to be 'auto' and 'auto' * 1 is NaN

try this

function getMaxZIndex() {
    var zIndexMax = 0;
    $('div').each(function () {
        var z = parseInt($(this).css('z-index'));
        if (z > zIndexMax) zIndexMax = z;
    });
    return zIndexMax;
}
W.T.
  • 136
  • 1
  • 6
1

Although the question is pretty old by now, I had a similar issue and wanted to point out that the jQuery UI Core now has a method zIndex that seems more convenient (given you can use the jQuery UI Core). You would still have to iterate through the elements but no need for parsing anymore.

Markus
  • 653
  • 6
  • 14
1

Just a heads-up. If you're using a Webkit-based browser (e.g: Chrome, Safari), $(element).css('z-index') will ALWAYS return the string auto and element.style.zIndex will NEVER return anything unless the selected element also has an explicit position CSS style. So, in addition to the advice provided by @W.T. above, be sure to declare a CSS position for any element whose z-index you want to reliably read into a numerical value via JavaScript.

Aaron
  • 5,137
  • 1
  • 18
  • 20