WebReference.com - Chapter 6 of Beyond HTML Goodies, from Que Publishing (6/8)

[previous] [next]

Beyond HTML Goodies, chapter 6

Select Box Links Menu

This tutorial is a series of basic drop-down link menus. I remember very well when this form of creating links came out. Everyone wanted to know how to do it. Because of that, everyone tried at once, and many different methods of getting a FORM-based drop-down menu to act as links started floating around the Web. This is a very basic format. I think it's a good one, but just keep in mind that this certainly isn't the only way of getting the job done.

You can find this tutorial, and all of its examples, online at https://www.htmlgoodies.com/stips/scripttip38.html.

You can download just the examples at https://www.htmlgoodies.com/wpg/.

As you'll see, this link menu uses a button to trigger its effect. That can be eliminated, and after we understand how this format works, we'll alter the script a bit so that the button isn't required. It'll just make the link when the user chooses from the menu.

This format works outside of frames. After the no-button version, we'll alter it again so that it works within a frames format by loading its URLs into a separate frames window. Basically, we're going to beat this drop-down menu to death.

Figure 6.9 is a look at the first version of this navigation system.

Figure 6.9
Pull the menu, click the button, and wheeeeeee!

The Script

Here's the entire script:

<SCRIPT LANGUAGE="javascript">
function LinkUp() 
{
var number = document.DropDown.DDlinks.selectedIndex;
location.href = document.DropDown.DDlinks.options
[number].value;
}
</SCRIPT>
<FORM NAME="DropDown">
<SELECT NAME="DDlinks">
<OPTION SELECTED>--> Choose a Link <--
<OPTION VALUE="scripttip1.html"> Page One
<OPTION VALUE="scripttip2.html"> Page Two
<OPTION VALUE="scripttip3.html"> Page Three
</SELECT>
<INPUT TYPE="BUTTON" VALUE="Click to Go!" onClick="LinkUp()">
</FORM>

We'll get underway by once again starting from the bottom up. Here's the HTML that creates the drop-down box and the button:

<FORM NAME="DropDown">
<SELECT NAME="DDlinks">
<OPTION SELECTED>--> Choose a Link <--
<OPTION VALUE="scripttip1.html"> Page One
<OPTION VALUE="scripttip2.html"> Page Two
<OPTION VALUE="scripttip3.html"> Page Three
</SELECT>
<INPUT TYPE="BUTTON" VALUE="Click to Go!" onClick="LinkUp()">
</FORM>

You should be quite familiar with the drop-down link format by now. We start by setting a FORM and giving it a name. This form will be named DropDown. See that in the code?

Next, we'll set up the select box and give it a name. We'll call this one DDlinks. Are you still with me?

The first "option" is the one that will display, so we will not give that a VALUE. It will display the following text:

"--> Choose a link <--". 

Next, we start listing the options that will be used to create links. Each is given a VALUE that represents the link it will point toward. Now, I only have that page name because the files I'm linking to are in the same directory. If you want to set this to links outside of your site, just put the entire URL in for the VALUE. For instance,

<OPTION VALUE="https://www.htmlgoodies.com/new.html">

I have three items to choose from. You can have 50 or more, if you want. I'm just keeping it small for the example.

The </SELECT> ends the drop-down box.

The button comes next:

<INPUT TYPE="BUTTON" VALUE="Click to Go!" onClick="LinkUp()">

Its job is to trigger the function that will grab the VALUE and turn it into a link. See the onClick="LinkUp()"? That's what will do it.

Finally, </FORM> wraps up the FORM elements of this script's HTML side. Now that we know the players, we can go after the function.

The Function

This is what we're interested in:

function LinkUp() 
{
var number = document.DropDown.DDlinks.selectedIndex;
location.href = document.DropDown.DDlinks.options[number].value;
}

See how the long lines of code should stay on one written line?

That's the format. If you change it from that, you'll get errors. The entire script, a little higher up on the page, truncates the second line. That's bad. Keep it all on one line.

The function is named LinkUp() for no other reason than that's what I've chosen. It's a name I completely made up. Then comes the curly bracket that will surround the function commands. Then comes the first line of the function itself:

var number = document.DropDown.DDlinks.selectedIndex;

This first line assigns a variable name, number, to the value returned from the drop-down menu. Remember, the name of the form is DropDown, the name of the select box itself is DDlinks, and the value chosen by the user is represented in JavaScript by selectedIndex.

Now you have the number chosen by the user returned and assigned to the variable number. Just keep in mind that JavaScript counts everything, and it starts counting at zero. So the first choice, the zero choice, is no good. That's the one that reads "Choose a Link."

Now here's the second line of the function:

location.href = document.DropDown.DDlinks.options[number].value;

You might remember "location.href" as the JavaScript that creates a hypertext link. If not, that's what it does. The link then is created by gathering the VALUE from the choice the user has made.

Once again, a hierarchy statement is created using the name of the form, the name of the select box, and then option[number].

That [number] is the variable name we just created. It represents the hierarchy statement that will grab the number of the drop-down box the user chose. Thus when this script runs, the text "number" will actually be replaced with the number the user chose. Because this drop-down box only offers three choices (past the zero choice "Choose a Link"), that number will be 1, 2, or 3.

After the script replaces number with an actual number, it then asks for the VALUE. And what is the value for each OPTION? It's a hypertext link!

The script grabs that hypertext link VALUE and the location.href creates the link. Ta da! That's pretty clever. However, the link does not actually happen until the function is triggered to work. That happens through the button's onClick="LinkUp()" Event Handler statement. See that in the preceding code?

But what if we could set it up so that the button wasn't needed? The user simply made her choice, and the link went off immediately. Wouldn't that be cool?

No Button

Figure 6.10 shows the effect we're going for next. It's the same navigation format, but this time around it just happens. No buttons are required.

Figure 6.10
Pull the menu, let go, and wheeeeeee!

This is a rather easy effect to generate. Notice that the button code has been taken out. The function remains the same, as does the code for the drop-down box itself. Here's the new code that does the trick:

<SELECT NAME="DDlinks" onChange="LinkUp(this.form)">

An Event Handler, onChange, is used to fire the function, LinkUp(). onChange works just as you think it does. As soon as something changes, it's triggered. When the page loads, the OPTION SELECTED is the item displayed. When someone changes that, the function is triggered.

This hasn't come up a lot in the Script Tips, but do you see the text within the instance (the parentheses)? That text is known as a "parameter." In this case, it is information that is going to be passed to the function.

The information passed to the function couldn't be more clear, this.form. The output of the form, the index number of the user's choice, is sent up to the function and used, along with the VALUE, to create the hypertext link just as it was when we had the button.

Here's one more thing. Notice where I placed the onChange Event Handler? It is in the SELECT flag, not the first OPTION flag. That's because the SELECT will change. The first OPTION will always stay the same and never trigger the function.

It sounds easy enough, but will it work across frames? Sure, it will!

Across Frames

Ever since I announced we would be playing around with this drop-down menu, the mail has been coming in saying, "When are you going to get to the configuration that allows me to use this across frames?" Wait no longer. We're there. Figures 6.11 and 6.12 show this script's latest configuration.

Figure 6.11
Pull the menu, click the button, cross the frame, and . . .

Figure 6.12
Wheeeeeee!

The Code

You sharp-eyed readers will notice that I brought the button back. If you want to be rid of it, reread the last tutorial and follow the same format. For this across-frames format, I want the button. Here we go:

<SCRIPT LANGUAGE="JavaScript">
function acrossFrames() 
{
if (document.FrameForm.DDFrameForm.options[0].selected)
parent.frames[0].location='menuframes.html'
if (document.FrameForm.DDFrameForm.options[1].selected)
parent.frames[1].location='scripttip1.html'
if (document.FrameForm.DDFrameForm.options[2].selected)
parent.frames[1].location='scripttip2.html'
if (document.FrameForm.DDFrameForm.options[3].selected)
parent.frames[1].location='scripttip3.html'
}
</SCRIPT>
<FORM NAME="FrameForm">
<SELECT NAME="DDFrameForm">
<OPTION SELECTED> --> Pick One <--
<OPTION>Script Tip One
<OPTION>Script Tip Two
<OPTION>Script Tip Three
</SELECT>
<INPUT TYPE="button" VALUE="go there" onClick="acrossFrames()">
</FORM>

Let's start at the bottom. It should look very familiar. The only reason I am showing it to you is that I have changed the name of the form and the drop-down box. It looks like this:

<FORM NAME="FrameForm">
<SELECT NAME="DDFrameForm">
<OPTION SELECTED> --> Pick One <--
<OPTION>Script Tip One
<OPTION>Script Tip Two
<OPTION>Script Tip Three
</SELECT>
<INPUT TYPE="button" VALUE="go there" onClick="acrossFrames()">
</FORM> 

The FORM itself is called "FrameForm" and the SELECT box is named "DDFrameForm". The button is back and is set to trigger a function called acrossFrames(). Let's see the function that passes info from frame window to frame window.

The Function

It looks like this:

function acrossFrames() 
{
if (document.FrameForm.DDFrameForm.options[0].selected)
parent.frames[0].location='menuframes.html'
if (document.FrameForm.DDFrameForm.options[1].selected)
parent.frames[1].location='scripttip1.html'
if (document.FrameForm.DDFrameForm.options[2].selected)
parent.frames[1].location='scripttip2.html'
if (document.FrameForm.DDFrameForm.options[3].selected)
parent.frames[1].location='scripttip3.html'
}

Let me first point out a basic tenant of JavaScript. JavaScript counts everything, and it starts counting at 0. This means that the items in the SELECT box have already been assigned numbers. The first choice is 0, the next choice is 1, and then the choice is 2, and then the choice is 3.

In addition to that, the frames have also been given numbers starting at 0. The first frame listed in a page's FRAMESET is frame window 0. The second is frame window 1. The third one listed would be frame window 2, and so on.

The frameset format for the example is a simple two-frame window, in rows, set to 30% and 70%:

<FRAMESET ROWS="30%,*">
<FRAME SRC="menuframes.html">
<FRAME SRC="lookhere.html">
</FRAMESET>

The first FRAME SRC listed will be known as frames[0]. The second one listed will be known as frames[1]. That's the format of denoting a specific frame in JavaScript hierarchy statements.

Let's look at the first two small blocks of code in the function:

if (document.FrameForm.DDFrameForm.options[0].selected)
parent.frames[0].location='menuframes.html'
if (document.FrameForm.DDFrameForm.options[1].selected)
parent.frames[1].location='scripttip1.html'

The first choice is the text "Pick One." We do not want that to produce any linking, so I have set that link to reload the same page into the same frame window.

See that? If the item chosen by the user is option[0], the first choice, load menuframes.html in to frames[0], which is the one it is already in. Follow that? It just reloads the same page in the same frame window.

The next block of code is for the second choice. That is choice number 1 because JavaScript starts counting at 0. It reads that if someone chooses options[1], that page is to be loaded into frames[1], the lower frame window. Get it?

Follow along with the next two blocks of code. Each one says that if a specific option is chosen, load it in to frames[1], the lower frame.

Other Frames

But what if you have multiple frames? It's no sweat. Just remember to count your frame windows from 0, top to bottom. If you have five frame windows, they would be numbered 0 through 4. You could set each choice in the drop-down menu to load into a different window simply by putting in the appropriate frame window number.

Each of the function blocks of code is an If statement. Usually, an If statement ends with an Else. This does not because I am sure one of the If statements will be true every time someone chooses one of the SELECT box items. The Else statement is not needed.

You now know more ways to play with a drop-down menu than you will probably ever need to know. So enjoy it. It's a great script that can look very professional on your pages.

[previous] [next]

Created: August 9, 2002
Revised: August 9, 2002

URL: https://webreference.com/programming/javascript/goodies/chap6/6.html