HierMenus CENTRAL: HierMenus In Progress. Hiding Page Elements (1/3)

[next]

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 releases¹. 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:

1. HM_GL_UponDisplay/HM_PG_UponDisplay: A global or Page-Specific variable that allows you to specify a JavaScript statement that should be executed each time a menu is made visible. It allows you to call a routine that will hide (among other possibilities) an element from view at the exact point each menu is displayed. Statements assigned to HM_GL_UponDisplay/HM_PG_UponDisplay are, by default, executed for all menus on the site (with the exception of the top-most level of permanently displayed menus, which are designed to be a part of the actual page). See column 42 for further information and an example.

2. HM_GL_UponHide/HM_PG_UponHide: A global or Page-Specific variable that allows you to specify a JavaScript statement that should be executed each time a menu is hidden. It allows you to call a routine that will restore the visibility of an element (among other possibilities) at the exact point each menu is hidden. Statements assigned to HM_GL_UponDisplay/HM_PG_UponDisplay are, by default, executed for all menus on the site. Again, see column 42 for further information and an example.

3. evaluate upon tree show: Not a named variable per se, but on optional parameter that can be supplied on a menu tree level. It overrides the HM_GL_UponDisplay/HM_PG_UponDisplay setting for a specific menu tree, allowing you to specify a JavaScript statement that should be executed each time a menu in that tree is made visible. See column 36 for further information and an example.

4. evaluate upon tree hide: Not a named variable per se, but on optional parameter that can be supplied on a menu tree level. It overrides the HM_GL_UponHide/HM_PG_UponHide setting for a specific menu tree, allowing you to specify a JavaScript statement that should be executed each time the menu tree is hidden. See column 36 for further information and an example.

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.

The Code

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:

<script type="text/javascript">
<!--
   HM_DOM = document.getElementById ? true : false;
   HM_IE  = document.all ? true : false;
   HM_NS4 = document.layers ? true : false;
   function HM_f_ToggleElementList(show,elList,toggleBy) {
      if(!(HM_DOM||HM_IE||HM_NS4)) return true;
      if(HM_NS4&&(toggleBy=="tag")) return true;
      for(var i=0; i<elList.length; i++) {
         var ElementsToToggle = [];
         switch(toggleBy) {
            case "tag":
               ElementsToToggle = 
     (HM_DOM) ? document.getElementsByTagName(elList[i]) :
     document.all.tags(elList[i]);
               break;
            case "id":
               ElementsToToggle[0] = 
     (HM_DOM) ? document.getElementById(elList[i]) :
     (HM_IE) ? document.all(elList[i]) : 
     document.layers[elList[i]];
               break;
         }
         for(var j=0; j<ElementsToToggle.length; j++) {
            var theElement = ElementsToToggle[j];
            if(!theElement) continue;
            if(HM_DOM||HM_IE) {
               theElement.style.visibility = 
                  show ? "inherit" : "hidden";
            } else {
               theElement.visibility = 
                  show ? "inherit" : "hide";
            }
         }
      }
      return true;
   }
// -->
</script>

The impatient among you can have a look at this page to see the function in action, (opens in a new window) and on the next page we'll discuss the function and its use.

[next]

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