HTML Demo pages: Javascript

Javascript

Here is a pull-down menu navigation tool

You can use a tool like this to provide navigation to a complex site while saving space.

This is a two part script with the first set of instructions in the <head> of the document and the second in the <body>

You make a selection and GO!. In this case, the links do not work. When you click on the button, it will return a "404 Not Found" message (but since it's not a javascript error, we know it's working)

Here are the scripts that make it work

Here's the first part of the script that goes in the <head> of the document.

<script language=javascript type="text/javascript">

</script>

The purpose of this part of the script is to define a function called getPage and a variable called page. Unlike the example of the pop-up window, the script merely defines the function as locating a new page, which it will place directly on top of the parent page.

Here's the second part of the script. It is in <body> of the document and is enclosed within the form. Notice that it is a single line of javascript!

<form name="menuForm">


<select name="Places"

<option value="place.html">My place
<option value="place1.html">Your place
<option value="place2.html">Someone else's place
<option value="place3.html">His place
<option value="place4.html">Her place
<option value="place5.html">Their place
<option value="place6.html">Another place
<option value="place7.html">That place
<option value="place8.html">Not that place
<option value="place9.html">A place in time
<option value="place10.html">Mary Kay Place
<option value="place11.html">Place Holder
<option value="place12.html" SELECTED>Space is the place

</select>

<input value="Blast Off!" type="Button"

onClick = "getPage(document.menuForm.Places.options[Places.selectedIndex].value)">

</form>

This script uses a predefined event handler called onClick, which means that the action takes place when the button or link is clicked.

What follows is the set of instructions that should be carried out when the button is clicked. The first part of the instructions indicate where in the firm markup the specific instruction can be found. In the document there is a form object called menuForm which is a pull-down menu called Places.

This menu has a number of options. Out of these options, one will be selected [Places.selectedIndex] and the particular value will be the object of the action.

When the menu option is selected and the button is clicked, the new page specified in the value attribute is called. This script works because of the getPage function defined in the first part of the script.

Removing the "GO!" button

With some different javascript, the script can be modified so that the "GO!" button is no longer needed. When a selection is made, the script is activated and the page is called.

Here is the script, which goes in the <body> of the document:

<form name="menuForm2">

<select name="morePlaces"
onChange="getPage(this.options[this.selectedIndex].value)">

<option value="place.html">My place
<option value="place1.html">Your place
<option value="place2.html">Someone else's place
<option value="place3.html">His place
<option value="place4.html">Her place
<option value="place5.html">Their place
<option value="place6.html">Another place
<option value="place7.html">That place
<option value="place8.html">Not that place
<option value="place9.html">A place in time
<option value="place10.html">Mary Kay Place
<option value="place11.html">Place Holder
<option value="place12.html" selected>Space is the place
</select>

</form>

What has happened here is that a new event handler called onChange has been used in place of onClick used in the previous example. This event handler is used when the action depends on a form element being selected.

Note that the entire script has been moved from the button markup (which is gone) to the opening select tag.

Also note that this script also uses the getPage function described above. This is another example of the ability to reuse functions in javascript.

The script provides a similar set of instructions as was used in the example that used a button, but because getPage is now using the onChange event handler, the script is executed when the selection is made.

Return to Javascript for home use.

Page by Howard Rosenbaum
Find me at hrosenba@indiana.edu	http://www.slis.indiana.edu/hrosenba/www/Demo/nav_tool.html