Universal Related Popup Menus v 2.2

Abstract

This document describes the features, techniques, and tradeoffs behind WebReference.com's Universal Related Popup Menus and Scrolling Select Lists (URPM). URPM provide a compact way to represent two or more levels of Web site hierarchy in one line, and degrade gracefully for browsers without JavaScript to a redirect CGI script. Highlights of the JavaScript code are discussed in depth with illustrative code fragments.

These popup menus (SELECTs in FORMs) are related, changing one menu changes all submenus, so you can fit entire site hierarchies into one line of popups. A complete rewrite, version 2 features a recursive relate for unlimited levels, and external arrays for multiple related menus per page. Enhanced with JavaScript, they are live for JavaScript-enabled browsers, and gracefully degrade to a redirect CGI so they work on all browsers, either as related (for JavaScript 1.1 browsers), live (JavaScript 1.0 browsers), or as CGI redirects (no-JavaScript). And of course, it's open source.

Contents

• Introduction
• Another way (2-D Array)
• Three Related Menus (3-D Array)
• Two, Three, Four, or More! Related Menus (recursive, frame-enabled)
• Feature Highlights
  • Stability
  • Related menus (where the "new Option" command is supported)
  • Live popups
  • Non-live single popup
  • Non-live related popups
  • Conditional Submit
  • Universal Browser Support
• Future Improvements
• Conclusions

Code - Open Source

• 2-D Live Related Menus - Example Code
• 3-D Live Related Menus - Example Code
• 4-D Live Related Menus (frame-enabled) - Example Code (991104)
• 4-D Live Related Menus (frame demo) - Example Code (991104)
• redirect.txt CGI script to redirect non-JavaScript-enabled browsers
• Michaël Guitton's version with generic array names passed and separate data array files to allow multiple sets of menus per page.
• Single Form Version (zip) Robert Gravelle's original improvement uses a single form for three related popups in order to easily submit all values to the server. His revised Single Form Version II (zip) provides a means for submitting menu values to the server instead of descriptions, and includes an ASP based back-end that dynamically populates the URPM select boxes. New! 011002
• Single-multiple-form version - Now you can mix single form and multiple forms URPM within the same document using the same API script. You'll find attached this new version with working samples. See HTML comments for tidbits. Michael Guitton (saramaca@mail.dotcom.fr)

Change History

• v 2.2 - 011002 - Single Form Version II
• v 2.1 - 010130 - Single Form Version
• v 2.03 - 001027 - live popups improved
• v 2.02 - 991104 - Frame targeting added
• v 2.01 - 991008 - Relate simplified further, easier function call, update function added, ref removed
• v 2.0 - 991005 - Complete rewrite, unlimited levels (recursive relate), multiple related menus/page (external arrays).
• v 1.35 - Netscape 2.02 (JavaScript 1.0 fix) fix, switched to named form to avoid getFormNum bug
• v 1.34 - Netscape 2.02 (JavaScript 1.0 fix) fix, ("a" not defined)
• v 1.33 - added 2-D 3-D example code to download and modify, went open source.
• v 1.32 - added IE5 persistent menus to 2-D and 3-D related menu examples.
• Bug Fix v 1.31 - IE5 Fix: Our newest version allows persistent menus for IE5 and Netscape 3+.
• Bug Fix v 1.3: This version fixes two bugs, the click on second select list bug, and the IE4+ back button bug that used to unsynch the menus.
• Bug Fix: The latest version squashes two recently discovered bugs, with browsers that support only JavaScript 1.0 (like Netscape 2.0, that doesn't support named forms).

Comments are welcome