JavaScript Tip of the Week for November 4, 1996: "JavaScript, Say Hello to ActiveX" | 3 | WebReference

JavaScript Tip of the Week for November 4, 1996: "JavaScript, Say Hello to ActiveX" | 3

JavaScript Tip of the Weekfor November 4, 1996: Relational ActiveX Popup Menus

A simple popup is okay, but in my opinion relational menus are à la mode. Assuming that you have read the simple popup tip, this one should be a breeze. Otherwise, you probably will have a lot of trouble with this. What I like about relational popup menus is that they save a lot of space while managing to look attractive (much like their Netscape 3.0 counterparts).

Embedding The Controls

The First step in creating relational popup menus is embedding the two popup menu controls in the page. This can be done easily using the object tag:
     ID = "Pop1"
     WIDTH = 0
     HEIGHT = 0
       <PARAM NAME="enable" VALUE="1">
     ID = "Pop2"
     WIDTH = 0
     HEIGHT = 0
       <PARAM NAME="enable" VALUE="1">
The ID, or name, of the category menu is "Pop1". The ID of the page menu is "Pop2". Other than that, these objects are exactly the same as the simple popup menu's object tag.
Creating Categories and Pages

The first thing that you need to do is create the category menu. This is done using one simple function:
    function newCat(desc) {
When you pass newCat a category (a simple description), it adds that category to the category popup menu, Pop1. This is pretty straightforward. To create my four categories, I used this code:
    newCat ('Tip Related');
    newCat ('More JavaScript');
    newCat ('JavaScript Sites');
    newCat ('Favorite Tips');
For the pages, it's a little different. Once again you are going to use objects. The two functions below work with each other two accomplish this task:
    function makeItem (desc, url) {           <-- 'page' object constructor
    this.desc = desc;
    this.url = url;
    function newItem(desc, url) {
    menuItems[num] = new makeItem (desc, url) <-- create a small 'page' object
    Pop2.AddItem(menuItems[num].desc)         <-- add that page's description to
    num++;                                        the page popup menu
Function newItem() takes two parameters, desc and url. These contain the title of the page that you want to appear in the page popup menu and the URL that you want to go to when that page is selected. It then creates an object with those two properties. Finally, function newItem() proceeds to add the title of the page to the actual page popup menu.
Combine the Menus

When the category menu button is clicked, the categroy popup menu is displayed. You already know how that works. But, when the category is chosen, the list of pages in the page popup menu needs to reflect the chosen category. This is done by determining which category was chosen and then displayed the related pages:
    function Pop1_Click(item) {
    num = 0;
        for (i = menuItems.length; i > 0 ; i--) Pop2.RemoveItem(i)
        if (item == 1) {
        newItem ('Tip Repository', '../tip_week_past.html');
        newItem ('This Week\'s Tip', '../this_week/index.html');
        newItem ('E-Mail', '../e-mail.html');
        newItem ('Tippettes', '../tippettes.html');
        newItem ('Awards', '../awards.html');
        if (item == 2) {
        newItem ('The Hut', '../thehut/jtotw_intro.html');
        newItem ('JavaScript and ActiveX', '../activex/index.html');
        newItem ('Beginner\'s Guide', '../guide/index.html');
        if (item == 3) {
        newItem ('Netscape Handbook', '');
        newItem ('JavaScript Index', '');
        newItem ('Live Software', '');
        if (item == 4) {
        newItem ('Highligthed Image Menus', '../960930/index.html');
        newItem ('Modifiable Select Menus', '../960902/select_boxes.html');
        newItem ('Eye Catching Intros', '../961028/part02.html');
        newItem ('Browser Compatibility', '../961104/index.html');
In my popup menus, when the "Tip Related" category is chosen, variable item is equal to one. If item is one, then "Tip Repository", "This Week's Tip", etc. are displayed in the page menu. If the "More JavaScript" category is chosen, then item is two and "The Hut" etc. are displayed. This pattern can go on for up to any number of categories.
It's Time to Run This Baby

Now that you have all of your data, you need to display the popup menu control. In this case the popup menu should be displayed whenever the "Jump to" button is clicked:
 NAME = "Category"
 VALUE = "Category"
 onClick = "Pop1.PopUp()">
 NAME = "Page"
 VALUE = "Page"
 onClick = "Pop2.PopUp()">
Using the onClick event handler in the two buttons, the two popup menus are displayed. I already went over what happens when the category menu is clicked, but when the page menu is clicked this function is run:
    function Pop2_Click(item) {
        if (menuItems[item - 1].url != null) window.location = menuItems[item - 1].url;
It simply jumps to the page of the selected item; in exactly the same way that the simple popup menu does.


Afterthoughts: If you want to change a different frame, then change window.location to parent.frame_name.location where frame_name is the name of the frame you want changed.