Universal Related Popup Menus / Future Improvements | WebReference

Universal Related Popup Menus / Future Improvements

Future Improvements

Universal Related Popup Menus


Nick Heinle's May 2, 1997 column in Web Coder demonstrates nicely how to use ActiveX to create related menus for Explorer 3+ users. We chose not to incorporate ActiveX in this version because we wanted stability, and had to hard code the initial menus. Notice that this code has the same resize problem we discussed earlier. In VBscript, option text is read only so this wasn't an option, but in ActiveX option text is read/write. The ActiveX popup control needs to be dynamically written to use with a JavaScript version, so our stability criteria precluded this.

We could, however, use the "hidden frame" trick to direct users to browser-optimized pages, one of which could be an Explorer/ActiveX page (see Cool Central for an example of the hidden frame trick).

WYSIWYG - If we (or one of you intrepid readers) could figure out a way to avoid the resize problems we found with document.writes, we could include the ActiveX code. Any solutions? If you find one, we'll mention your name in the next version of this article and the home page's source code.

Features/Version of JavaScript Supported vs. Browser Type

Brute force method - A better way to optimize the code for different browsers (i.e., type=n3) is to check for feature support or the version of JavaScript support:

    <script language="JavaScript"><!-- _version = 10; // --></script><script language="JavaScript1.1"><!-- _version = 11; // --></script><script language="JavaScript1.2"><!-- _version = 12; // --></script> ... <script> if (_version >= 11) { put JavaScript 1.1+ code here } else { put JavaScript 1.0 code here } </script>

This crude but effective method works correctly for Internet Explorer (unlike the <NOSCRIPT> tag) and is extensible for all future versions of JavaScript. This "version of JavaScript" method is a more elegant way to conditionally run certain code than our "check type and version" of the browser method. However, you can't rely on Explorer's JScript 1.1 supporting all of Netscape's JavaScript 1.1 (or 1,2 etc.), some JavaScript 1.1 features (namely the new Option command) are not supported in JScript 1.1. The best way is to check directly for features or objects supported.

Object/Feature Supported Method - The most bulletproof way to conditionally run code is to check if the specific feature(s) or object(s) you're using are supported.

    <script language="JavaScript"> v=false; </script><script language="JavaScript1.1"> if (typeof(Option)+"" != "undefined") v=true; </script>

Thanks to Peter Belesis of Dynamic HTML Lab for this elegant solution.

Fourth Related Menu

For the more adventurous among you, consider adding a fourth related menu. You can extend the techniques we used in our three related menus (use a simulated 4-D array) to control a fourth or even fifth menu. Our site is not that deep, hierarchically speaking, so we felt that this wasn't necessary. For more levels, or if you want to trigger menus off of graphics or links, try Peter Belesis' popular hierarchical menus that have an infinite number of levels.


The CGI redirect does not jump out of a frame. In JavaScript this is easy, just tack on a top to the location property (top.location = ... in jumpPage) and you're done. To force your redirect script to jump out of a frame (and fill the current window) use TARGET="_top" in the FORM tag.

    <FORM NAME="menu1" METHOD="POST" ACTION="/cgi-bin/redirect.cgi"
    onSubmit="return false" TARGET="_top">

HTML 4 Nested Menus

The new HTML spec allows one-level deep nested pull-down menus with the new option group (optgroup) tag. Unfortunately, current browsers and the current version of Gecko don't yet support this new feature. See Webreview.com, Dec. 18, 1998 for details.

Further Improvements

The current version of the code has been tweaked and refined since Netscape 3.0b1 came out but there's always room for improvement. If you think of any, especially those that make the code more generic or smaller, let me know and I'll give you credit in this article.

Comments are welcome

Created: Mar. 10, 1997
Revised: Feb. 12, 1999

URL: http://webreference.com/dev/menus/future.html