Get hi-est zIndex on the page

D

DJ WIce

Hi,

I'm looking for a script to get the hi-est z-index on a page.
I want my javascript menu to be always on top of the page (moves along on
top when you scroll down).

Does anyone know how to scann all items/elements on the page for a z-index?

Thanks,
Wouter
 
F

Fabian

DJ WIce hu kiteb:
Hi,

I'm looking for a script to get the hi-est z-index on a page.
I want my javascript menu to be always on top of the page (moves
along on top when you scroll down).

Does anyone know how to scan all items/elements on the page for a
z-index?

On the assumption that the webmaster who is implemetning this menu
system knows what the z-indices are, why not have a webmaster-set
variable to mark the base z-index value of your menu. Webmasters can
then set that to 1 higher than whatever z-index they are using.
 
D

DJ WIce

: On the assumption that the webmaster who is implemetning this menu
: system knows what the z-indices are, why not have a webmaster-set
: variable to mark the base z-index value of your menu. Webmasters can
: then set that to 1 higher than whatever z-index they are using.

Well, the website I'm building is very big and I'm not the only one who
implements pages.
When a page is changed I do not want to check if I need to change the
highest z-index variable by hand.
Off cause I can set it to some very high value '999' but I just want to be
sure via a script.


In MSIE this script works to get the highest index:


if(document.all)
{
topZ = 0;
for (z=0;z<document.all.length;z++)
{
oldEl = document.all(z);
topZ = Math.max(oldEl.style.zIndex,topZ)
}
topZ++;
}


Since document.all is MSIE only I would like to know the Mozilla equivalent
of it so the script will work on NN etc.

Thanks,
Wouter
 
L

Lasse Reichstein Nielsen

DJ WIce said:
In MSIE this script works to get the highest index:
if(document.all)
{
topZ = 0;
for (z=0;z<document.all.length;z++)
{
oldEl = document.all(z);
topZ = Math.max(oldEl.style.zIndex,topZ)
}
topZ++;
}

No it doesn't. It only looks for the z-index set in the style attributes.
It won't find those set useing CSS rules, e.g.
<style type="text/css">
#higher {z-index: 1000000000;}
</style>

To find the actual z-index of an element, you need a browser that
gives access to that. Currently, the ones that I know of are: IE
(proprietary method), Mozilla and Opera 7.2)
Since document.all is MSIE only I would like to know the Mozilla equivalent
of it so the script will work on NN etc.

The problem is not the document.all, but the accessing of the style at all.
You should also know that not all z-indices means the same. An element with
a z-index creates a new stacking context, and elements inside that are
all in ralation to that element, not the rest of the document.

Example:

<div style="position:relative">
<div style="z-index:4; border:5px solid red;width:100px;height:100px;
position:absolute;left:0px;top:0px;">
<div style="z-index:100000;border:5px solid green;width:100px;height:100px;
position:absolute;left:25px;top:25px;"></div>
</div>
<div style="z-index:5; border:5px solid blue;width:100px;height:100px;
position:absolute;left:50px;top:50px;">
<div style="z-index:1; border:5px solid yellow;width:100px;height:100px;
position:absolute;left:25px;top:25px;"></div>
</div>
</div>

The correct stacking here is red<green<blue<yellow, even though the actual
values of the z-indices are ordered as yellow<red<blue<green.
That is because the entire element with red border, including its inner
green div, has z-index 4 in relation to the blue element. The z-index of
100000 is only in relation to the stacking context of the red element.

You don't have to worry about this, though, since too high a z-index is not
a problem.


So, for your code, the direct translation of document.all would be
document.getElementsByTagName("*") . You will probably want to use both:

---
var allElems = document.getElementsByTagName?
document.getElementsByTagName("*"):
document.all; // or test for that too
var maxZIndex = 0;
for(var i=0;i<allElems.length;i++) {
var elem = allElems;
var cStyle = null;
if (elem.currentStyle) {cStyle = elem.currentStyle;}
else if (document.defaultView && document.defaultView.getComputedStyle) {
cStyle = document.defaultView.getComputedStyle(elem,"");
}
var sNum;
if (cStyle) {
sNum = Number(cStyle.zIndex);
} else {
sNum = Number(elem.style.zIndex);
}
if (!isNaN(sNum)) {
maxZIndex = Math.max(maxZIndex,sNum);
}
}
 
J

Jim Ley

You don't have to worry about this, though, since too high a z-index is not
a problem.

IE throws an "Out of present range" exception if the z-index gets
above 9 digits IIRC when setting it with javascript.

Jim.
 
D

DJ WIce

: So, for your code, the direct translation of document.all would be
: document.getElementsByTagName("*") . You will probably want to use both:
:
: ---
: var allElems = document.getElementsByTagName?
: document.getElementsByTagName("*"):
: document.all; // or test for that too
: var maxZIndex = 0;
: for(var i=0;i<allElems.length;i++) {
: var elem = allElems;
: var cStyle = null;
: if (elem.currentStyle) {cStyle = elem.currentStyle;}
: else if (document.defaultView && document.defaultView.getComputedStyle)
{
: cStyle = document.defaultView.getComputedStyle(elem,"");
: }
: var sNum;
: if (cStyle) {
: sNum = Number(cStyle.zIndex);
: } else {
: sNum = Number(elem.style.zIndex);
: }
: if (!isNaN(sNum)) {
: maxZIndex = Math.max(maxZIndex,sNum);
: }
: }
: ---
: Tested in IE 6, Opera 7.5(preview) and Mozilla.


Thanks a lot!
I now set the element I want to set on top on z-index 0, then use your
function and then add one to the maxZIndex and set the element to that
maximum value.
Works for me!

Cool! Now my replaced contextmenu is on top of all elements.
Now I need to make a function to lower some if one is set a 9 digit set it
to the next highest z-index on the page + 1. To avoid javascript errors like
Jim Ley talks about.

Thanks!
Wouter
 
D

DJ WIce

: var sNum;
: if (cStyle) {
: sNum = Number(cStyle.zIndex);
: } else {
: sNum = Number(elem.style.zIndex);
: }
: if (!isNaN(sNum)) {
: maxZIndex = Math.max(maxZIndex,sNum);
: }

What does the Number() function do?
I know parseInt and parseFloat, but never seen Number() before.

Wouter
 
L

Lasse Reichstein Nielsen

DJ WIce said:
What does the Number() function do?
I know parseInt and parseFloat, but never seen Number() before.

The Number function converts its argument to a number. If the argument
is a string, it parses the argument similarly to what parseFloat does,
but it doesn't allow garbage at the end of the string.
That is
parseFloat("42arglebargle") is 42
Number("42arglebargle") is NaN

There are plenty of ways to convert strings to number in Javascript.
Number is the one I prefer. It corresponds to how Javascript itself
converts other values to numbers (like when you try to muliply something
with a number, the something is automatically converted to a number).

See also the FAQ: <URL:http://jibbering.com/faq/#FAQ4_21>

I prefer Number, as it is the most explicit while still simple. The prefix
plus operator does the same thing, and slightly faster, but is easier to
overlook.

/L
 
D

DJ WIce

: See also the FAQ: <URL:http://jibbering.com/faq/#FAQ4_21>
:
: I prefer Number, as it is the most explicit while still simple. The prefix
: plus operator does the same thing, and slightly faster, but is easier to
: overlook.
Thanks, I'll remember that FAQ; it seems to come in handy some times :)

Wouter
 
G

George Hester

_________________________________
Lasse Reichstein Nielsen said:
Lasse Reichstein Nielsen - (e-mail address removed)
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Hello Lasse:

I have an issue that may be z-index. I tried following what you said but I got lost. My issue is that I have made a <DIV it's created dynamically (createElement) and is actually just a tool tip that appears when the mouse is over a <INPUT type="text".../>. My trouble is that if the <DIV appears over a text box which has focus then the blinking cursor is seen right through the <DIV. Of course I could make the <DIV the same color as the blinking cursor but is this a z-index issue or not? My <DIV is at 500 z-index and raising it doesn't seem to help. It's as if the z-index of the blinking cursor in the text box is 1 + oo which I can't seem to set higher for the <DIV. Thanks.
 
D

DJ WIce

: My trouble is that if the <DIV appears over a text box which has focus
: then the blinking cursor is seen right through the <DIV.

You can slove this by using an <IFRAME instead of a <DIV.
(you will see the same problem with selection boxes).

An better way may be to use:

<input type="text" title="What I want to say about this textbox">

the title= thing is made to show comments to elements (like <input>,<a>
etc).

Ciao,
Wouter
 
G

George Hester

You know that bugger cursor goes right through the iframe too. I just used a blank page an asp nothing in it so the popup tooltip was white. Thanks that was my third attempt on this issue. Three strikes I'm out.
 
D

DJ WIce

: You know that bugger cursor goes right through the iframe too.

You're right!
I've just tested it too..

It does not go trough an title= tag..
Maybe that helps?

Wouter
 
G

George Hester

Yes I know. But I made this tooltip because I needed control of where it is placed. But the dang thing has this one little itty bitty thing. It can be done because in Windows if you go to Start | Settings | Control Panel | Keyboard | click the ? mark in upper right | bring mouse down to Cursor blink rate at the far left of the slider on the word Slow and left-click you'll see the blinkning cursor is hidden behind the tooltip. I doubt that is a title or alt attribute. But I could be wrong.
 
D

DJ WIce

: .. you'll see the blinkning cursor is hidden behind the tooltip.
: I doubt that is a title or alt attribute. But I could be wrong.
See the test text field on my page:
http://www.djwice.com/contextmenu.html

click it (to get focus and the cursor blink after the "test"),
then move your mouse away,
then move your mouse to the left upper corner till the title shows..

Wouter
 
G

George Hester

Yes I know DJ Vice. That is just a title or alt attribute on the text box isn't it? My popup tooltip is neither of those. It is like I said earlier a <DIV. This is because I need some control of where the tooltip appears. There is another reason for it but this isn't the time or place for "why" I want to do it. It's just that I do and I was asking if the fact that this issue occurs is a result of some really high z-index for the cursor in the text box. Lasse seemed to be saying that their were "types" of z-indices the two not related.

In other words if one type of z-index was such that it was an upper bound for the other type, then I can see why this issue occurs. So we are back to that. I think I can fix this issue but not through z-index. I believe I can just blur the text box that is under the tooltip and return control when the tooltip gets destroyed.
 
G

George Hester

OK I saw it with the context menu. I see. You are removing focus from the text box. That's what I was thinking of doing. See mine doesn't remove focus right now. OK a solution. Thanks.
 
D

DJ WIce

: OK I saw it with the context menu. I see. You are removing focus from
the
: text box. That's what I was thinking of doing. See mine doesn't remove
focus
: right now. OK a solution. Thanks.

I have a question for you, as you can see; mine does not return the focus.
Do you know how to detect what element is focused?
So I can restore the focus, like you do, on blur of my contextmenu.

Wouter
 
G

George Hester

Well I do it with activeElement. Like this:

if (document.activeElement.getAttribute('id') == 'oBody'){
oBody.focus();
} else if (document.activeElement.getAttribute('id') == 'UID'){
ctrlUID.focus();
......
}

In this case there are two elements on the page oBody obviously the id for the body element (that is your active element when the Context Menu closes) and ctrlUID that is a text box with id = 'UID'. I believe in your case you could change oBody.focus() to ctrlUID.focus();. I actually have to do this throughout my control scripts (on 2 of them) because I get a nasty bug (IE 5.5) where key down events don't fire on the first keydown. But require two keydowns before the keydown event fires correctly. It's a bitch and this that you see above is my workaround for the issue. Likely an array holding all the 'ids' on the page would be a better soulution or a switch. Yeah maybe let me try that. Thanks a switch that'll do it.

Oh but the lett-click oh crap. I don't know I gave up on that. I couldn't get the left-click on keydown to fire correctly. Sorry no HTH but I tried.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,733
Messages
2,569,440
Members
44,831
Latest member
HealthSmartketoReviews

Latest Threads

Top