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

[previous]

Using HM_f_ToggleElementList in HierMenus

Installing and using HM_f_ToggleElementList within a HierMenus installation (i.e., using the function to automatically hide or display elements when the menus are displayed or hidden) is quite simple, and in fact, you can most likely use the instructions on the previous page to install the script and then call the function using the HM_GL_UponHide and HM_GL_UponDisplay parameters as previously documented and described on the first page of this article. HierMenus is, after all, a JavaScript program, and as such will allow you to use HM_f_ToggleElementList in the same way that you would use it with other JavaScript applications.

When actually installing the function, we recommend simply inserting it as an additional function within the HM_Loader.js file. This guarantees that it is loaded along with the menu scripts and arrays themselves and is therefore always available to HM. Another possibility is to include the function within the HM_Arrays.js file. Examples of both loading scenarios can be found later on this page.

There are some points specific to HM installations that you may need to consider when using HM_f_ToggleElementList. We conclude this article by discussing those considerations and providing a live, in page HM example for your examination.

Browser Identifiers Unnecessary

Our generic form of the HM_f_ToggleElementList function began by assigning some specific variables to identify the various browsers; i.e.:

HM_DOM = document.getElementById ? true : false;
HM_IE  = document.all ? true : false;
HM_NS4 = document.layers ? true : false;

When installing HM_f_ToggleElementList to be used in conjunction with HM, these variable definitions are unnecessary and may be removed, as they are defined automatically in HM_Loader.js. Of course, it will do no harm to leave them in and redefine them prior to HM_f_ToggleElementList (other than waste some space and a split second of processing time).

Hiding in the Content Frame

As mentioned earlier, Most HM installations can use the HM_f_ToggleElementList function as already defined directly within their HM installations. The exception to this rule is if you're using HM in a cross-frames scenario.

The problem is that the HM_f_ToggleElementList function as previously defined assumes that it will be running in the same window in which the menus and elements to be hidden were created. In a cross-frames scenario this is not the case; the scripting is contained within the navigation page of the document, but the actual menus (and therefore the elements that you want to hide) are in the content frame of the document. Therefore, for cross-frames scenarios you will want to use this function instead, which accounts for the discrepancy by using HM's own HM_MenusTarget variable to identify the window in which the menus were created:

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) ? HM_MenusTarget.document.getElementsByTagName(elList[i]) :
   HM_MenusTarget.document.all.tags(elList[i]);
            break;
         case "id":
            ElementsToToggle[0] = 
   (HM_DOM) ? HM_MenusTarget.document.getElementById(elList[i]) :
   (HM_IE) ? HM_MenusTarget.document.all(elList[i]) : 
   HM_MenusTarget.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 if (HM_NS4) {
            theElement.visibility = 
               show ? "inherit" : "hide";
         }
      }
   }
   return true;
}

Optimized Code Set Considerations

Finally, when using HM in a cross-frames scenario and using the space-optimized code set, one further adjustment must be made to the function. The internal variable HM_MenusTarget relied on in the previous code is shortened to Hg in the optimized code set (refer to the optimized code cross-reference for a complete list of variable and function name changes), therefore all references to it in our custom functions must also be changed:

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) ? Hg.document.getElementsByTagName(elList[i]) :
   Hg.document.all.tags(elList[i]);
            break;
         case "id":
            ElementsToToggle[0] = 
   (HM_DOM) ? Hg.document.getElementById(elList[i]) :
   (HM_IE) ? Hg.document.all(elList[i]) : 
   Hg.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 if (HM_NS4) {
            theElement.visibility = 
               show ? "inherit" : "hide";
         }
      }
   }
   return true;
}

Sample Insertion Points

Earlier, we mentioned that when installing HM_f_ToggleElementList in an HM setting, it's easiest to just insert the function directly within the HM files themselves. When installing the function in HM_Loader.js your installation might look something like this:

function HM_f_ToggleElementList(show,elList,toggleBy) {
   if(!(HM_DOM||HM_IE||HM_NS4)) return true;
...
   return true;
}
if(HM_IsMenu) {
   HM_BrowserString = HM_NS4 ? "NS4" : HM_DOM ? "DOM" : "IE4";

while an HM_Array.js based implementation might look like this:

function HM_f_ToggleElementList(show,elList,toggleBy) {
   if(!(HM_DOM||HM_IE||HM_NS4)) return true;
...
   return true;
}
HM_Array80=[
[150,                          // menu_width
"findXY('imSS0','x')",         // left position
"findXY('imSS0','y')",         // top position
"red",                         // font_color
"yellow",                      // mouseover_font_color
"yellow",                      // background_color
"black",                       // mouseover_background_color
"blue",                        // border_color
...

Example

But does it all work? See for yourself! The yellow menu below is created using the same HM scripts that generate the menu on the top left side of this page. The select element is enclosed in an absolutely positioned element called dv, and we use the evaluate upon tree show and evaluate upon tree hide parameters of the menu tree to control the display of the select:

HM_Array80=[
[150,                   // menu_width
"findXY('imSS0','x')",  // left position
"findXY('imSS0','y')",  // top position
"red",                  // font_color
"yellow",               // mouseover_font_color
"yellow",               // background_color
"black",                // mouseover_background_color
"blue",                 // border_color
"green",                // separator_color
1,                      // top_is_permanent
1,                      // top_is_horizontal
0,                      // tree_is_horizontal
1,                      // position_under
1,                      // top_more_images_visible
1,                      // tree_more_images_visible
"HM_f_ToggleElementList(false,['dv'],'id')",  // evaluate_upon_tree_show
"HM_f_ToggleElementList(true,['dv'],'id')",   // evaluate_upon_tree_hide
,                       // right_to_left
0,                      // display_on_click
false,                  // top_is_variable_width
...

Have fun toggling the visibility of elements on your own HierMenus pages!

[previous]