469,270 Members | 1,773 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

Javascript menu and HTML forms

Hello,

I'm trying to put a menu on a page containing a select form. The
code for the menu I took from

http://dynamicdrive.com/dynamicindex1/topnavbar.htm

and the form is in the code snippet is as follows:

<form action="names.html" enctype="multipart/form-data"
method="post" name="mainform">
<table xmlns="" cellpadding="5" class="maintable"
style="z-index:1;">
<caption></caption>
<tr>
<td class="control_label;">Name</td>
<td class="value" style="z-index:1;">
<select name="name" style="z-index:1;"
onchange="document.mainform.submit()">
<option>Paul</option>
<option>Peter</option>
</select>
</td>
</tr>
</table>
</form>

PROBLEM IS: that the menu subitems are displayed behind the select
part of the form. Meaning that the submenus show up before the text
"Name" and behind the select form containing the names Paul and Peter.
This is very annoying!!

As you can see, I went a bit nuts by putting the z-index CSS
specification everywhere to see if I can place the submenus ahead of
the everything else but so far it has not helped. Any ideas?

Thanks in advance!

Slawek
Jul 23 '05 #1
2 1185
"Slav" <sl***********@engineer.com> wrote in message
news:2f**************************@posting.google.c om...
PROBLEM IS: that the menu subitems are displayed behind the select
part of the form. Meaning that the submenus show up before the text
"Name" and behind the select form containing the names Paul and Peter.
This is very annoying!!


The <select> element is a windowed element, it will appear on top of
every other element regardless of z-index.

<url: http://support.microsoft.com/default...b;en-us;177378 />

Two suggestions:

1) move the <select> so it doesn't conflict with the other dynamic
elements on the page
2) detect when the dynamic elements and the <select> are in conflict and
set -display:none- on the select
3) when the dynamic element appears, set -display:none- on the <select>
until the dynamic element closes

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #2
Thanks Grant! Would have not been able to figure that out...

Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

By using this site, you agree to our Privacy Policy and Terms of Use.