Win a copy of Think Java: How to Think Like a Computer Scientist this week in the Java in General forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

z-index with div and select elements

 
Heath Lilley
Ranch Hand
Posts: 72
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 2591
Android Firefox Browser Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 72
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 ]
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic