A Quick Jump Menu

 

Introduction.  One of the things we will do this semester is develop some "templates" for what should be relatively common features on webs.  This quick jump menu is something that can be very useful.  For example, check out

http://www.utampa.edu/

and look at the quick jump menu at the top of the home page.  They also carry this through to many oter pages.  It is convenient and it requires very little space on a page.  While it is not a nice looking as I would like for many webs, it is very functional.

We will create a very minimal page with a form and a quick jump menu to plaes of importance on the Quinnipiac University web site.  You should copy this code into a file called QuickJump.html.

 

<html>
<head>
<title>A Quick Jump to Some Universities</title>
<script language="JavaScript">
function visitSite(the_site_name)
{

var school_site = window.open(the_site_name,"school_site");

} 
</script>

</head>

<body bgcolor="#666699">

<p><b><font size="5" color="#C0C0C0">A Quick Jump Menu to Universities in My Past</font></b></p>
<p>&nbsp;</p>

<form name="FindOldU">

<select name="cboUniversities" size="1" onChange="visitSite(window.document.FindOldU.cboUniversities.options[window.document.FindOldU.cboUniversities.selectedIndex].value);">
<option value="http://www.msu.edu/home/">Michigan State University
<option value="http://www.purdue.edu/">Purdue University
<option value="http://www.rider.edu/">Rider University
<option value="http://www.syracuse.edu/">Syracuse University
<option value="http://www.utk.edu/">University of Tennessee
<option value="http://www.vt.edu/">Virginia Tech
</select>

</form>

</body>
</html>

 

You should actually see something like the following upon first entering the URL, though your inputs should differ.

 

 

After you select a university it should open a new window for the home page of that school.

Notice how the value = "http://linkname/ has been passed to the visitSite( ) function that actually opens the window.  This is a somewhat clever use of a function and value in an HTML tag.

Notice the onChange code

onChange="visitSite(window.document.FindOldU.cboUniversities.options[window.document.FindOldU.cboUniversities.selectedIndex].value);"

and its nested use of the window.document.form.control.property references.  This statement can be cleaned up considerably by using a this reference or pointer to refer to the control and its containers.

You should create another file called ThisQuickJump.html and see that the line of code

onChange="visitSite(this.options[this.selectedIndex].value);"

still works every bit as well and is much cleaner.

 

<html>
<head>
<title>A Quick Jump to Some Universities</title>
<script language="JavaScript">
function visitSite(the_site_name)
{

var school_site = window.open(the_site_name,"school_site");

} 
</script>

</head>

<body bgcolor="#666699">

<p><b><font size="5" color="#C0C0C0">A Quick Jump Menu to Universities in My Past</font></b></p>
<p>&nbsp;</p>

<form name="FindOldU">

<select name="cboUniversities" size="1" onChange="visitSite(this.options[this.selectedIndex].value);" >
<option value="http://www.msu.edu/home/">Michigan State University
<option value="http://www.purdue.edu/">Purdue University
<option value="http://www.rider.edu/">Rider University
<option value="http://www.syracuse.edu/">Syracuse University
<option value="http://www.utk.edu/">University of Tennessee
<option value="http://www.vt.edu/">Virginia Tech
</select>

</form>

</body>
</html>