469,917 Members | 1,473 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,917 developers. It's quick & easy.

Get hi-est zIndex on the page

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
Jul 20 '05 #1
22 10076
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.

--
--
Fabian
Visit my website often and for long periods!
http://www.lajzar.co.uk

Jul 20 '05 #2
: 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
Jul 20 '05 #3
"DJ WIce" <co*********@djwice.com> writes:
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[i];
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.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #4
On Sun, 25 Jan 2004 15:35:06 +0100, Lasse Reichstein Nielsen
<lr*@hotpop.com> wrote:
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.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

Jul 20 '05 #5
: 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[i];
: 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


Jul 20 '05 #6

: 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
Jul 20 '05 #7
"DJ WIce" <co*********@djwice.com> writes:
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #8

: 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
Jul 20 '05 #9
_________________________________
"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message news:n0**********@hotpop.com...
"DJ WIce" <co*********@djwice.com> writes: Lasse Reichstein Nielsen - lr*@hotpop.com
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.

--
George Hester
Jul 20 '05 #10
: 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
Jul 20 '05 #11
JRS: In article <bv**********@news.tudelft.nl>, seen in
news:comp.lang.javascript, DJ WIce <co*********@djwice.com> posted at
Sun, 25 Jan 2004 20:33:38 :-
What does the Number() function do?


<URL:http://www.merlyn.demon.co.uk/js-maths.htm#Typ>

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 20 '05 #12
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.

--
George Hester
__________________________________
"DJ WIce" <contextmenu @ djwice.com> wrote in message news:bv**********@news.tudelft.nl...
: 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

Jul 20 '05 #13
: 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
Jul 20 '05 #14
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.

--
George Hester
__________________________________
"DJ WIce" <contextmenu @ djwice.com> wrote in message news:bv**********@news.tudelft.nl...
: 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

Jul 20 '05 #15
: .. 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
Jul 20 '05 #16
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.

--
George Hester
__________________________________
"DJ WIce" <contextmenu @ djwice.com> wrote in message news:bv**********@news.tudelft.nl...
: .. 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

Jul 20 '05 #17
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.

--
George Hester
__________________________________
"DJ WIce" <contextmenu @ djwice.com> wrote in message news:bv**********@news.tudelft.nl...
: .. 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

Jul 20 '05 #18
: 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
Jul 20 '05 #19
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.

--
George Hester
__________________________________
"DJ WIce" <contextmenu @ djwice.com> wrote in message news:bv**********@news.tudelft.nl...
: 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

Jul 20 '05 #20
I mean right-click. Sorry for the dyslexia attack.

--
George Hester
__________________________________
"George Hester" <he********@hotmail.com> wrote in message news:CF********************@twister.nyroc.rr.com.. .
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.

--
George Hester
__________________________________
"DJ WIce" <contextmenu @ djwice.com> wrote in message news:bv**********@news.tudelft.nl...
: 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

Jul 20 '05 #21
Yeah I got it. The right-click does not cause the onclick to fire in the document. Only the left click. What happens is you are setting the right-click of the mouse to false so that you can get your own context menu. So you have this in the body tag:

<body ... oncontextmenu="javascript:return false;">

What we need is redirect this onconetxtmenu first. Just think of it as a onrightclick hardy har har. So to get the text box to have focus after(before) the context menu pops up:

<body ... oncontextmenu="javascript:ctrlTxt.focus(); return false;">

where:
<input id="ctrlTxt" type="text" value="test"/>

Now of course you might want to use the previous activeElement test I gave you as a switch I believe. And you may need to put the script in the ContextMenu not sure. HTB. - strictly IE.

--
George Hester
__________________________________
"DJ WIce" <contextmenu @ djwice.com> wrote in message news:bv**********@news.tudelft.nl...
: 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

Jul 20 '05 #22

"George Hester" <he********@hotmail.com> wrote in message
news:CF********************@twister.nyroc.rr.com.. .
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();
......
}

Thanks, I did not know that "activeElement" was an object!
Thanks,
Wouter
Jul 20 '05 #23

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by sheldon279 | last post: by
7 posts views Thread by George Hester | last post: by
8 posts views Thread by Eric Lilja | last post: by
5 posts views Thread by | last post: by
9 posts views Thread by FERHAT A«ICI | last post: by
reply views Thread by [Cool staff!||Hi! I think this need for || Help me | last post: by
reply views Thread by Tagrislam | last post: by
reply views Thread by foxfox05 | last post: by
reply views Thread by the great win | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.