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

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

JavaScript Tip of the Weekfor November 4, 1996: Simple ActiveX Popup Menu

You may be wondering why I am endorsing ActiveX. Well, I'll tell you why: It adds increased functionality to scripts by allowing for new and more useful interfaces. Whereas before I had to depend on a limited supply of form objects as my interface, with ActiveX controls I can create my own interfaces or use other peoples'. You may now be wondering, "What the heck is an ActiveX control?". An ActiveX control is a piece of code that follows Microsoft's OLE (Object Linking and Embedding) model. This means that an ActiveX control can be incorporated (or embedded) into a C++ or VB app, a Word document, or in this case a web page.

This tip will show you how to work with an ActiveX control. You are by no means going to be creating an ActiveX control, you are just going to be embedding it into a web page and then playing around with it. For this example, I've used Microsoft's "Popup Menu Control" to create an effect similar (but more pleasing to the eye) to that of the Simple Select Menu. Take a look at the button below; assuming the control has loaded, and assuming you've pressed yes in the control's security check window. This little button will display a popup menu with a list of pages when you click it. To jump to one of those pages simply click on its name. User friendly? I think so. Space saving? I have to agree there, too.

Embedding The Control

The First step in creating the Popup Menu is embedding the popup menu control in the page. This can be done easily using the object tag:
     ID = "Pop1"
     WIDTH = 0
     HEIGHT = 0
     CODEBASE = ",70,0,1161"
     CLASSID = "CLSID:7823A620-9DD9-11CF-A662-00AA00C066D2">
       <PARAM NAME = "enable" VALUE = "1">
This may look to you like a discombobulated Java applet tag; but I can assure you it is not. The <OBJECT> tag is similar to the <EMBED> tag in that it embeds something in the page. But in this case the embedded object is not a document, it is a working piece of code; the Popup control. The first attribute, ID, is the name that you use to refer to the Popup menu. It's very similar to the NAME attribute in a form object (such as a text input). This object's name is "Pop1"; so the script will refer to it as that. The HEIGHT and WIDTH attributes are not important since this control can appear anywhere on the web page, not just in one static location. The CODEBASE attribute gives the location of the object's files (source code). In the popup menu there is only one file, "iemenu.ocx". In some cases a control will require more than one file. In that scenario CODEBASE will refer to something called a "cab" file, which contains the locations of all the code that is needed for that particular control. But don't get tied up on this; it's not very important and, unless you are creating your own controls, it will rarely be an issue. Just think of it as you would the SRC attribute in an image tag.

Nested inside the <OBJECT> tag is one <PARAMETER> tag; this is similar (in function) to the tag used when embedding a Java applet. The "enable" parameter simply instructs the control to be in the enabled state. In other words, it means the control is on. Now that you have your ActiveX control waiting in the wings, it's time to put it to some use.
Where's The JavaScript

Before I talk about using the control, I would like to address how JavaScript ties into this. JavaScript is used to do three things: create the page titles and URLs, display the popup control when the input button is pressed, and go to the location of the selected page. So what does the control do? It simply displays it's little popup menu when it is asked to and it returns the value of the choice (in this case page) that is selected. The two technologies work hand-in-hand, and surprisingly it's not all that difficult to communicate between the two.
Creating the Page Object

Before you do anything, you have to create a simple way for pages and their respective URLs to be added to the popup menu. 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
    Pop1.AddItem(menuItems[num].desc)         <-- add that page's description to
    num++;                                        the popup control
Function newItem() takes two parameters, desc and url, which contain the description/title of the page that you want to appear in the popup control and the URL that you want to go to when that page is selected, respectively. It then creates an object with those two properties. This object goes by the name menuItems[x], and is actually an array. You may think, "Why make things more complicated by using objects?", I say to that, "It may make things more difficult to understand now, but later on you'll thank me." The object that these two functions create looks like this:
    menuItems[number in array].desc <-- page's title or description
    menuItems[number in array].url  <-- page's url
After the object has been created, function newItem() then proceeds to add the title of the page to the actual popup menu. This is the first time that the control is actually being accessed through JavaScript. Earlier, the control was given the ID (or name) "Pop1". So, to add a page's title to this popup menu, you would use this line of code:
Pop1 is the name of the popup control, AddItem() is the method (or function) that is used to physically add a popup menu item to the popup menu. The data that you pass AddItem() is added to the popup menu. In this case, menuItems[num].desc was passed, so the page's title will be added to the popup menu and displayed as a choice when the popup menu becomes visible.
Put Two and Two Together

Enough of that, now it's time to get to the meat of this app. I'm referring to "the meat" as the page titles and URLs that you want to be displayed in the popup menu. To add pages to the popup menu, use this function:
    function init() {
    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');
This function is called when the document is done loading, so it won't try to add items to a popup control that's not there. Because of this, it is important to add onLoad = "init()" to the <BODY> tag. The popup menu that I created has five pages listed on it; "Tip Repository", "This Week's Tip", etc. Function init() takes that group of pages and adds them to the popup menu by calling newItem() five times; each time passing it a page title and a URL. When broken down, it looks like this:
    newItem ('title of page', 'url of page');
It does not matter how many times you do this, each time a new item will be added. The order that you place these in init() determines the order that they will be displayed in the popup menu. That's the great thing about objects; once you've created the page object code, adding the pages is a cinch.
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:
     TYPE = "BUTTON"
     NAME = "JumpButton"
     VALUE = "Jump to" 
     onClick = "Pop1.PopUp()">
Using the onClick event handler in the jump button, the Pop1 popup menu's PopUp() method is called (try saying that five times fast). What this means is that whenever the button is clicked, the popup menu is displayed at the mouse's current position. The next logical step is to determine when an item in the popup menu is clicked and then go to the desired page. It would make sense to put an onClick event handler in the actual object tag, but this is not the case. Instead, this function must be used:
    function Pop1_Click(item) {
        if (menuItems[item - 1].url != null) window.location = menuItems[item - 1].url;
Function Pop1_Click() is actually an event handler and a function. The first part of the function's name Pop1, refers to the name of the object at hand. The second part of the name, Click, is the event in Pop1 that is being caught. The underscore in between the two in simply a separator. When translated into English this means: when the popup menu is clicked, run this function. The function itself has a parameter called item; this simply tells the function which item in the popup menu was selected. In the case of my popup menu, the first item is "Tip Repository". If that is chosen, then item is equal to one. If the second item is chosen, "This Weeks Tip", then item is equal to two, and so on. Now that you know which page has been chosen, you can go to the desired page with only that one line of code:
    if (menuItems[item - 1].url != null) window.location = menuItems[item - 1].url;
This says, "If there is a URL for the page that was selected, then go to that URL." Notice the use of the menuItems array. Since each element (number in the array) in menuItems is a page object, you can go to a different page by inserting item - 1 (because the array starts at zero as opposed to one) into the array.

Perhaps I have over-analyzed this. Looking back, it now seems to be more complicated than it actually is. But trust me, when you copy this source into your page a tweak it to fit your needs, you'll see that it really is a simple popup menu.


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.