 |
|
|
|
 |
| Bulletins |
| About |
| Documentation |
| FAQ |
| Samples |
| Known Issues |
| Technology Jobs |
|
|
 |
 |
|
Hiding Page Elements D.M Ragle, August 11, 2003 [The function described in this article was originally designed as an add on tool for HierMenus version 5. A version of the function is automatically included (and therefore immediately available) in the HierMenus version 6 HM_Loader.js file. The version supplied in the version 6 loader file is used in the same manner as the version described here. -Ed.] 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. The CodeEnough 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. |
