By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,635 Members | 1,898 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,635 IT Pros & Developers. It's quick & easy.

Javascript menu and HTML forms

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a
"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

P: n/a
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.