wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes z-index with div and select elements Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "z-index with div and select elements" Watch "z-index with div and select elements" New topic
Author

z-index with div and select elements

Heath Lilley
Ranch Hand

Joined: Jan 09, 2001
Posts: 72
Hello all,
I am trying to create a dynamic dropdown that takes a list of links and only displays them when i mouse over a "Parent category".
I got the thing to work, BUT there is a problem with the z-index of select elements... that is select objects don't support it. The result is that when the div is displayed the select box cuts right into the div area.
Does anyone know a way to bring the div on top (z-index) of the select.
Thanks in advance.
Heath
Manish Hatwalne
Ranch Hand

Joined: Sep 22, 2001
Posts: 2581

It's a known problem, select as other windowed elements has infinite z-index and can't be hidden behind layers.
Netscape 6.1 supports z-index for select, but AFAIK other browsers do not support it yet. The only way out is to keep it in another div, hide i,t show ur popup menu, hide that, then show this... Bad but that's the only way if u have to have it below the layer.
HTH,
- Manish
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
You can try to use span tags around the

<span id="framspan" style="left: 0; top: 0; position: absolute; z-index: 4"><select></select</span>
That should do it...not 100%
worth a try
Heath Lilley
Ranch Hand

Joined: Jan 09, 2001
Posts: 72
Thanks for the responses i ended up with using the popup menu and it works!!... sort of. I have just realized (after countless house of dentist office like aggrevation) that the popup doesn't know about the parent windows scripts. Wonderful behavior for a popup. Anyhow I need to pass 2 args to a function when a div is selected but the only way i can find to pass the args is to loop through the divs and assign the function pointer to the event handler. What about my args??
Thanks in advance.
[ January 14, 2002: Message edited by: Heath Lilley ]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
you can sent hidden fields on the opener page and have the child (pop up) write to those hidden fields...
all you would do is for the submit function on the child
opener.document.formname.fieldname.value=document.formname.fieldname.value;
If you need more help just say so
P Axx
Greenhorn

Joined: Jan 24, 2003
Posts: 1
Popup Menus? Is that how you solved the problem of not beign able to put the layer on top of input=select ? You mean popup (window) menus?
I got exactly the same problem, I was able to use IFrames to do the effect, but I am looking for alternatives.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
First off if you want to post here, you will get in trouble with your name....
The select element is a pain...no problem with IE, but netscape is not too fond of it.
One thing is to change the visibility of it to hidden or hide it.
The solution that was found above used a pop up window rather then a layer.
I-frames are usefull, but can be a pain with certain browsers.
Eric
Matt Nicolls
Greenhorn

Joined: Sep 04, 2003
Posts: 1
I've seen many people suggest using an IFrame, but that requires the content be loaded from another URL. For the simple case of popping up a help message that is not always the best approach...
However, you can use an "empty" IFRAME as a buffer between your DIV and the layers beneath to keep SELECTs from showing through.
Something like this:
<div id="popupWindow" style="display: none; position: absolute;">
<iframe width=300 height=300 style="border: none; z-index: 5; position: absolute; x: 0; y: 0;"></iframe>
<div width=300 height=300 style="z-index: 6; position: absolute; x: 0; y: 0;"> <b>content goes here</b>
</div>
</div>
Notice the z-index attribute on the IFRAME is set to 5, while the z-index on the DIV containing the content is 6. Also, the SRC of the IFRAME is not set which simply leaves the IFRAME empty with a white bakground.
Hope this helps...
-M
[ September 04, 2003: Message edited by: Matt Nicolls ]
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: z-index with div and select elements