HierMenus CENTRAL: HierMenus In Progress. Browser Specific Parameter Settings
Browser Specific Parameter Settings
D.M Ragle, June 24, 2003
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
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.
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.
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.
Created: June 24, 2003
Revised: June 24, 2003