Avoid cluttering your site pages with buttons. Learn how to have your site load pages when a scrollable link is selected.
By Lauren Guzak and Patrick Joseph
(1/26/99, updated 6/22/01)
<UL>, or just a bunch of
<BR> tags. Normally your visitors would select a link and then click 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:
Paste the following code into the part of your page where you want the scrollable list box to be displayed:
<FORM name="QuickIndex" ><br> <p> <SELECT size=5 name="URL"<br> onChange="if(options[selectedIndex].value)<br> window.location.href=<br> (options[selectedIndex].value)"> <br> <OPTION value="ss01.html">Fade In, Fade Out</OPTION><br> <OPTION value="ss02.html">Click 'n' Go</OPTION><br> <OPTION value="ss03.html">Timing Your Splash Page</OPTION><br> <OPTION value="ss04.html">Easy Includes for Everyone</OPTION><br> <OPTION value="ss05.html">Super Ninja Mailtos</OPTION><br> <OPTION value="ss06.html">Home Sweet Home Page</OPTION><br> <OPTION value="ss07.html">Slick slide show</OPTION><br> <OPTION value="ss08.html">Add a Watermark</OPTION><br> <OPTION value="ss09.html">Search Me</OPTION><br> </SELECT><br> <br> <NOSCRIPT><br> <INPUT type=submit value="Go"><br> </NOSCRIPT><br> </FORM>
Replace our links (in the
value attributes) and link text with your own. Add or remove
<OPTION> elements as needed.
Make sure not to omit the
<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>.
Lauren Guzak is a project manager for Ask Jeeves, and Patrick Joseph is a freelance writer.