HierMenus CENTRAL: HierMenus In Progress. Browser Specific Parameter Settings

Browser Specific Parameter Settings

D.M Ragle, June 24, 2003

One of the more frequently asked questions we receive here at HierMenus Central (and subsequently a new entry in our FAQ list) is how to conditionally set certain HierMenus parameters based on the user's browser, platform, or some other user-specific condition. With a little JavaScript know-how, many of these questions can be answered immediately--by you--via minor adjustments to your HM_Loader.js file.

Let's first work on that "JavaScript know-how" we just mentioned. As you are probably already aware, the HierMenus global variables are typically set from within the HM_Loader.js file. A common setting might look like this:

HM_GL_FontSize = 10;

This is a simple assignment statement that sets the FontSize of the menu elements to a value of 10. This assignment is perfect if you want the font size to be 10 for all browsers; but what if you want it to be a different size when displayed, for example, in Macintosh Netscape 4?

The Conditional Operator

There are several JavaScript methods you can use to set parameters conditionally within HM_Loader.js (it is, after all, a normal JavaScript file and will respond to any normal JavaScript instructions), but one of our favorites is to use the conditional operator, also called the ternary operator because it utilizes three different operands. The conditional operator comes in very handy with this type of assignment, as it allows both the condition, i.e., the unique thing that needs to be identified, and the actual results of the condition, i.e., the values returned if the condition is true or false, to be specified on a single line. The conditional operator is represented by the insertion of a question mark (?) and a colon (:) between the condition to be tested, the value to be returned if the condition is true, and the value to be returned if the condition is false.

If this literal explanation confuses you, have a look at this example and it should make more sense:

HM_GL_FontSize = (HM_NS4&&HM_Mac) ? 11 : 10;

The above line tests the HM_NS4 and HM_Mac variables--which respectively indicate that the browser in use is Netscape 4 and the platform is Macintosh--and if both are true sets the FontSize to 11. Otherwise, the FontSize is set to 10. The condition, i.e., the part that precedes the question mark, can be as simple or complex as necessary (and in fact the return value can be complex too, though in practice this is rarely the case). The following, for example, sets the FontColor to red in Netscape 4 and green in all other browsers:

HM_GL_FontColor = HM_NS4 ? "red" : "green";

And this example sets the FontFamily to "Geneva, sans-serif" in Macintosh Netscape 4 or Macintosh IE, but uses "Arial, sans-serif" in all other browsers:

HM_GL_FontFamily = (HM_Mac&&(HM_NS4||HM_IE)) ? 
                  "Geneva, sans-serif" :
                  "Arial, sans-serif";

The above is line wrapped for clarity, but will work as is. Note the use of && and || in the condition. && means and, and || means or; therefore, the above condition reads like this: "If the platform is Macintosh, and the browser is either Netscape 4 or Internet Explorer." If this statement is true, the first value--the one between the question mark and the colon--is used; otherwise the second value--the one following the colon--is used.

The HM_Loader.js file provides several predefined variables that you can use in your conditional parameter settings. Some of the more common ones include:

• HM_DOM - Browser is capable (for the most part) of DOM based logic
• HM_NS4 - Browser is Netscape 4
• HM_IE - Browser is Internet Explorer
• HM_IE4 - Browser is Internet Explorer 4
• HM_Mac - Platform is Macintosh
• HM_IsMenu - Browser can display HierMenus
• HM_Opera - Browser is Opera
• HM_Konquerer - Browser is Konquerer

Careful with these last two variables, however; they were not introduced until HM version 4.1.

In addition to the predefined HM parameters set above, you can also use your own parameters, or available global JavaScript variables as supplied by the browser in your conditions. For example, if you want the menu colors to be different if the page has loaded within a frameset, you might use this:

HM_GL_BGColor = (top == self) ? "white" : "yellow";

which sets the background color to white if you are not in a frameset, and yellow otherwise. One caution: make sure that the variables you use have been defined earlier in the page (or, preferably, in the HM_Loader.js file) before you actually use them.

Page Specific Parameters

The above discussion focused entirely on the setting of global parameters within the HM_Loader.js file. You can also use the same type of logic when setting page specific parameters, with one important exception: you cannot use the predefined HM variables mentioned above. Why? Because they haven't been defined yet. Recall that those specific parameters are not set until HM_Loader.js is called, and you need to have all of your page specific parameters defined before HM_Loader.js.

If you need a pre-defined HM parameter to set a page specific variable, you need to find the logic in HM_Loader.js that sets that specific variable and copy it into your pages at a point before you set your page specific variables. For example:

HM_NS4 = (document.layers) ? true : false;
HM_PG_FontColor = HM_NS4 ? "red" : "green";

Here, we needed the HM_NS4 variable for the purposes of setting the font color within a specific page. We therefore copied the line in HM_Loader.js responsible for setting HM_NS4 and placed it just before our page specific FontColor assignment, ensuring that the HM_NS4 variable is set before we actually make use of it.

Our Favorites

We conclude this brief tutorial with a few real-world examples of conditional HM parameter settings using JavaScript's conditional operator:

HM_GL_FontSize = (HM_NS4&&HM_Mac)?10:8;

As described earlier, this is one of the more popular conditional assignments in HM_Loader.js. This assignment allows you to specify a different font size for menu items in Macintosh Netscape 4 (which tends to render font sizes much smaller than other browsers). Remember that you can also set HM_GL_FontFamily conditionally, allowing you to select a more legible font for Macintosh browsers, as well.

HM_MacN7=(HM_Mac&&
         (HM_UserAgent.indexOf('Netscape/7')!=-1))
         ?true:false;
HM_GL_ScrollInterval = (HM_MacN7) ? 100 : 20;

This is a two part conditional assignment that first determines if the browser is Netscape 7.x on the Macintosh platform. If so, the HM_GL_ScrollInterval parameter is set to 100 (for slower scrolling). Otherwise, HM_GL_ScrollInterval is set to the quicker scrolling value of 20. This is a good example of a practical use of conditional parameter settings, as Netscape 7 on some Macintosh platforms tends to not display the scrolling menu between each scroll interval when that interval occurs too quickly (resulting in a menu that "jumps" immediately to the top or the bottom of the menu instead of scrolling smoothly).

HM_GL_ScrollOver=(HM_Opera) ? true : false;

The earliest Opera 7 browsers (prior to, but not including Opera 7.10) had some problems with the onmouseup handler that prevented scrolling menus from working correctly when used with mouse clicks (the default HM behavior). Opera versions after v7.10 can also display menu items as selected text when they scroll beneath a mouse button which is being held down (again, typical behavior for clicked HM menu scroll bars). The above assignment adjusts for both of these scenarios, by forcing Opera to use the new HM_GL_ScrollOver setting instead of relying on the mouse click behavior. Of course, if you adopt this usage then be sure that on-screen instructions (if you provide any specifically) note this difference for Opera users on your site.

Use of the conditional operator in your JavaScript code can, in some cases, help to both lighten and simplify your code. Appropriate use of conditional HM parameter settings can streamline your specific HM installation to work at its best no matter what browser hits your site. We encourage you to experiment with your parameter settings to find the configuration most appropriate for your pages.