HierMenus CENTRAL: HierMenus In Progress. Hiding Page Elements (1/3)
Hiding Page Elements
D.M Ragle, August 11, 2003
A longstanding problem that rears its head in many HierMenus implementations is the infamous "menus can't display over form elements" issue. This issue is the first--and one of the oldest--listed among our frequently asked HM questions and is triggered by the fact that many browsers treat certain HTML elements as separately windowed elements that are unaffected by the z-order that we assign to DHTML--or any other element we may create in an HTML page. The question continues to be asked by new HM user's today. We don't intend to dwell on the cause and depth of the problem in this article; those who are interested should visit Peter's popular Positioned Elements article for further information. The article was written some time ago, and browser/plug-in developers have made great progress in eliminating and reducing the problem in their latest releases1. But problems do remain for users of older browsers and some specific browser/element combinations even in the latest browsers. A more recent user-submitted article to WebRef entitled Form Elements Overlapping A Styled Layer offers further discussion of the problem and a workaround example.
Our primary line of defense from a HierMenus perspective (short of "redesign your pages so the menus don't appear over the problem elements") is to hide the offending elements from view temporarily while the menus are being displayed, and restore them when the menus are hidden. (The z-order of the problem elements cannot be overridden, i.e., we can't force the menus to appear over the elements. However, we can--at least for most browsers--hide the elements from view temporarily.) Four configurable parameters were introduced back in HierMenus 4.x to specifically assist HM implementors in this task:
Each of the above parameter definitions refers to a page that includes sample code which uses the parameter to hide a specific element from view when the menus appear (and restore those elements when the menus are hidden). The examples on those pages work well and are more than adequate if you only need to hide one particular element of the page. But as an example, what if you want to hide all of a particular element, such as all of the <select> objects? Or perhaps several elements with known ID attributes? In this article, we present and describe a more generic function that will allow you to do each of these things. This function can be used independently or in combination with HierMenus, and we'll discuss both uses in the remainder of this article.
Enough introduction, let's have a look at our generic element
hiding/showing function. We've added some line wrapping here, to make the
function display properly on this Web page:
1. Macromedia Flash, in particular, offers the wmode parameter that can be applied to Flash movies in some browsers, forcing the flash animations into a windowless mode and therefore allowing DHTML elements to appear over the top of them. See the How to make a Flash movie with a transparent background and Flash content displays on top of all DHTML layers technotes from the Macromedia Flash Support Center for further information. Back
Created: August 11, 2003
Revised: August 11, 2003