471,592 Members | 1,168 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,592 software developers and data experts.

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 1239
"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 Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.