| click
and go
This trick is a good way to avoid cluttering up your pages with ugly JavaScript-generated
buttons. Say that you want to put a list of links in a scrollable box as a nice,
space-saving alternative to a long list using <OL>, <UL>,
or just a bunch of <BR>
tags. Normally your visitors would select a link, then hit a Go button to go to the page.
You
can take out the extra step of clicking the Go button by having the new page load as soon
as the scrollable link is selected. Here's how:
Step 1
Paste the following code into the part of your page where you want the scrollable list box
to display:
<FORM
name="QuickIndex" >
<SELECT size=5 name="URL"
onChange="if(options[selectedIndex].value)
window.location.href=
(options[selectedIndex].value)">
<OPTION value="ss01.html">Fade in, fade out</OPTION>
<OPTION value="ss02.html">Click 'n' go</OPTION>
<OPTION value="ss03.html">Timing your splash page</OPTION>
<OPTION value="ss04.html">Easy includes for everyone</OPTION>
<OPTION value="ss05.html">Super ninja mailtos</OPTION>
<OPTION value="ss06.html">Home sweet home page</OPTION>
<OPTION value="ss07.html">Slick slide show</OPTION>
<OPTION value="ss08.html">Add a watermark</OPTION>
<OPTION value="ss09.html">Search me</OPTION>
</SELECT>
<NOSCRIPT>
<INPUT type=submit value="Go">
</NOSCRIPT>
</FORM>
Step 2
Replace our links (in the <OPTION>
tags' value attributes) and
link text with your own. Add or remove <OPTION> elements as needed.
Step 3
Make sure not to omit the <NOSCRIPT>
option from the code. This gives people with older browsers that can't see your
JavaScript-powered list a button to click so they can still navigate your site. If you see
that button in our example below, your browser doesn't support this JavaScript (unless
you're on Navigator 2.0, which doesn't support <NOSCRIPT>). Note that the Go button will
only work if you have a CGI program that can process the form.
Here's what you'll get:
To save even more space, change this scrolling box to a one-line drop-down menu by
removing the size=5
attribute from the <SELECT>
tag. To make the first option explanatory and not navigate when selected, give it an empty
value attribute (value=""), as in <OPTION value="">Go to page:</OPTION>.
|
