wood burning stoves
The moose likes HTML, CSS and JavaScript and the fly likes how to hide html element underneath? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login

Win a copy of Java Interview Guide this week in the Jobs Discussion forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "how to hide html element underneath?" Watch "how to hide html element underneath?" New topic

how to hide html element underneath?

lily zou
Ranch Hand

Joined: Jan 15, 2002
Posts: 50
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,
Bear Bibeault
Author and ninkuma

Joined: Jan 10, 2002
Posts: 63873

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?

[Asking smart questions] [About Bear] [Books by Bear]
lily zou
Ranch Hand

Joined: Jan 15, 2002
Posts: 50
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,
Michael McNally
Ranch Hand

Joined: Aug 22, 2002
Posts: 53
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...
lily zou
Ranch Hand

Joined: Jan 15, 2002
Posts: 50
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

Joined: Nov 08, 2001
Posts: 15385
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.
I agree. Here's the link: http://aspose.com/file-tools
subject: how to hide html element underneath?
It's not a secret anymore!