Site Navigation

8. Combo Navigator

Now all that remains to be done is to combine the combo box that we just created with the navigation function that we have been looking at. Since the combo box only works with Javascript enabled we'll look at a Javascript only solution, you'll need to provide alternate navigation for those whose browsers don't support Javascript.

To get the text field populated from the drop down list we need to provide the file names of the most common files as the names in the list. We don't need to provide the full names though, we can make the suffix common for example and add the '.htm' to the end when we press the GO button to transfer to the new page.

Here is a working version of the combo navigator with the drop down list containing the pages from my author time script (you might want to look at using more descriptive filenames):

Your visitors can either select one of the listed options or type in their own. Provided that something has been entered into the text field, selecting the GO button will transfer to the specified page (if it exists). Where your visitor will end up if the page that they specify doesn't exist depends on how your server handles "404 page not found errors".

The code for the above combo navigator is as follows, you simply have to replace the entries for the options in the drop down list with those that you wish to use:

<form name="ex">
<table align="center" border="0"><tr><td>
<div style="background:#cccccc;border:solid 1px
#000000">
<input type="text" name="nav" value=""
size="10" /><br />
<select name="s" size="1"
onchange="document.ex.nav.value = document.ex.s.options[document.ex.s.selectedIndex]
.value;document.ex.s.value=''">
<option value=" " selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
<option value="bltime1">bltime1</option>
<option value="bltime2">bltime2</option>
<option value="bltime3">bltime3</option>
<option value="bltime4">bltime4</option>
</select></div></td><td><input type="button"
onclick="if (document.ex.nav.value != '')location = ''+
document.ex.nav.value+'.htm';" value="Go!" />
</td></tr></table></form>
<noscript><p style="color:#ff0000">The combo box requires
Javascript to be enabled. As you don't have Javascript
enabled the combo box will not function
correctly.</p></noscript>

One final change that you could make to the above script if you need to have all of your file names start with some particular character combination. If you place those characters between the two apostrophes following the location= then you can omit those characters from all of the entries in your list and they will be automatically added to the front of all of the file names entered. For example, all of the filenames in my example start with 'bl' and many of the other pages on the site also start with that so I could change the code to location='bl' and remove the bl from the front of all of the entries in the list. All entries will then have bl added to the front whether they were selected from the list or typed in. You could use a similar method to add a sub-directory name to the front of all of the file names if the navigator is to link exclusively to pages in a sub-directory.

Of course our visitors will on occasion enter something in the combo box that doesn't correspond to a page on the site. We need to decide how we will handle Page Not Found.