a handy tool
Interactive Elements for Your Web Site
how to use javascript and shockwave

go to:


javascript navigation menu
If you've used the pull-down menu at the top of any page in this workshop, you've been using a JavaScript navigation menu. These can be handy features to add to your pages,saw because they can collapse a great deal of information (a long list of web pages/sites to link to) into a small amount of space.

In this workshop, the menus link to other web pages in the same file location (relative file links) as you would write a normal HTML link tag. The same JavaScript code can also be used to link to external web sites.

The other features of this navigator is that you can code a particular menu item to do nothing, and you can add a divider line that is ignored if it is selected. It also resets the menu to point at a designated menu item if you return to this page from somewhere else (i.e. using the browser's "back" button).

examples
As we have said, the navigator menus appear throughout the site for this workshop. We've also set up a little template example for you. Another example performs the same function, but loads the web pages into a new window-- this is built into our "Swiss Web Knife" (Have you seen that knife before?). The advantage for this long list of web site links is that it makes for a more compact web page.

what you will need
You won't need much here! We'll just make an HTML file from scratch. You should have your plain text editor (SimpleText for Macintosh or the Windows NotePad) ready. We will give you step-by-step intructions, and you can just Copy and Paste right from this page.

how to

  1. Launch your text editor and create a new, blank document. Save it as a file called "go.html"
  2. Copy and Paste this HTML code to your HTML document. This is the typical stuff for the top of a web page, and the beginnings of the JavaScrtip code area: 
    <HTML>
<HEAD>
<TITLE>JavaScript Takes me Places</TITLE>
<script language="JavaScript">
<!-- hide scripts from crusty old browsers
  3. The next portion to copy/paste is the JavaScript function that examines what the user has selected and then takes appropriate action: 
    function goTo (page) {
/* This function is called from the navigation menu
   to jump to the designated URL. Empty values
   are ignored and "--" indicates a menu seperator    */
   
	if (page != "" ) {
		if (page == "--" ) {
			resetMenu();
		} else {
			document.location.href = page;
		}
	}
	return false;
}
  4. Now we have another function that is used to reset the menu to display the item we want to appear when ever we view or return to this page. For this example, it will always be reset to display the first menu item (menu items are numbered starting at 0). If we wanted it to display the 6th item, we would replace the 0 with a 5. function resetMenu () { 
    function resetMenu () {
/* Resets the menu to the specified menu item           */   
	document.gmenu.page.options[0].selected = true;
}
  5. The following code to copy and paste marks the end of the JavaScript function, and the beginning of the web page content. The onLoad command on the <BODY> tag makes sure that the menu reset function is called whenever we enter the page. 
    // done hiding -->
</script>
</HEAD>

<BODY bgcolor=#FFFFFF onLoad="resetMenu()">
<center><font size=+3>JavaScript Takes me Places</font></center>
  6. Here is where we create the menu. It uses HTML FORM tags. The JavaScript "goTo" function is called whenever we move the mouse off of the menu. It takes what item the user has selected and sends the string inside the value tag to the "goTo" function. Again, values of "" are just ignored. Values of "--" are used to denote lines that are used as menu item separators, and our function will just reset the menu selection to the deafult for this page. And any other value is either a link to a local document or a remote URL. 
    <form name="gmenu">
<font size=+3>go to:</font>
<select name="page" onChange="goTo(this.options[this.selectedIndex].value)">

<option value="">JavaScript menu demo
<option value="--">-- workshop --
<option value="http://www.mcli.dist.maricopa.edu/show/conn98/">Workshop Web Site
<option value="http://www.ctt.bc.ca/edtech/etconnex.html">Connections 98 Conference
<option value="http://www.mcli.dist.maricopa.edu/alan/">All About Alan
<option value="--">-- places --
<option value="http://www.boulderutah.com/slickrock/">Slickrock Gallery, Utah
<option value="http://www.mcli.dist.maricopa.edu/alan/pix/antelope/">Antelope Canyon, Arizona
<option value="http://www.grandcanyon.com/">Grand Canyon, Arizona
<option value="http://www.whitehouse.gov/">Bill's Pad
<option value="--">-- others --
<option value="link goes here">menu name goes here
</select>
</form>
  7. Last, but not least, we need to properly end the document: 
    </BODY>
</HTML>
  8. Now Save your HTML file and try loading it into your web browser. If you recieve a JavaScript error, the most likely cause is a typographical error (e.g. forgetting a ";" or a QUOTE character). If it still does not work, compare your HTML file to the source HTML of the example page.
  9. If you've gotten the menu to work, try adding other HTML code to expand the page. Experiment with editing the code in the menu to build your own links.

what's next
Now you may select any of the other JavaScript examples from the navigation menu at the top of this page. Or you may want to jump over to the Shockwave section.