how to hide html element underneath?

[lily zou]

Hi, there
I have a form and I created a menu system by javascript. The menu can be unfolded by mouse over.
However, when the menus "slide out" overtop of form elements ( like text inputs or dropdowns ), the form elements render over the menus. This is quite disturbing sometimes.
May I ask if there is any way to let the expanded menus covers whatever on the form ?
Thanks in advance,
Lily

[Bear Bibeault]

This is a known anti-feature of the browsers. And unfortunately, there's no quick-fix way around it.
Two mechanisms I've see used are: 1) Hide the heavy-weight form elements when the menu exposes, and restore them when the menu is dismissed, and 2) put the menu in an iframe which will cover over the form elements.
Neither mechanism is very clean, imho.
What techniques have others seen employed?
hth,
bear

[lily zou]

thank you very much, bear. However, my menu items' contents and width, length are dynamicly changing so I am afraid the way you mentioned may not be able to apply.
Also, interestingly, I found that this mouse-over drop-down menu will be blocked only by <select> html element on that form. It can cover input fields and textfields.
Is there any difference between <select> element and regular <input> element on the same form ?
Thanks again,
Lily

[Michael McNally]

Regarding input data manipulation: there is no difference. Of course, there is an obvious visibility difference. If you want to use the menu, I recommend what bear has said. Either add to the current function that opens the menu or create an addition function that toggles the display of the select objects.
here is a script you can use. simply add this to the onmouseover handler of the menu...

<script>
function toggleDisplay(){
var selectObj = document.getElementsByTagName('select');
for ( var i = 0; i < selectObj.length; i++ ){
if (selectObj[i].style.display == 'none'){selectObj[i].style.display = 'inline'};
else {selectObj[i].style.display = 'none'};
}
}
</script>
<BUTTON onc+lick="toggleDisplay()">Toggle</BUTTON>
<SELECT><OPTION>1</OPTION></SELECT>

[lily zou]

Hi, Michael
Not all the select objects on the form should be invisible but just those which will be covered by drop down menu. However the length and width of this menu are possible to change during runtime. Also, most of the time, only part of the select object on the form will be covered.
How to know a select obj is covered by a menu and therefore make it partially invisible ?

[Eric Pascarello]

It is just the way the browser handles it. You can search the forum and you will see that you basically have three choices. Live with it, hide it, or design the page.