Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 

Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format



Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

JavaScript Tip:
Select And Go Menus In JavaScript

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
September 2000
(Part 2)
Vol. 3, No. 12
 • JavaScript Tip
 • Beginner Tip
 • Promotion Tip
  

Standard navigation menus let you navigate through a Web site by selecting a destination and clicking on the "GO" button. That requires two mouse clicks: one to select the option and the second on the "GO" button. Save your visitors that extra click and give your site a snappier look and feel with a simple JavaScript function.

Create A Select And Go Menu

Select and Go menus are easy to create in JavaScript and provide a space saving way to include site navigation on your Web page. They are a variation on basic SELECT menus used on many Web pages. The only difference from a standard SELECT menu is that, in a Select and Go menu, the SELECT tag uses the onChange event to call a JavaScript funtion.

In this example, we're going to create a SELECT menu that you can use to navigate through NetMechanic's Web tools. The first option - "Explore our site" - is merely descriptive: it doesn't take you anywhere, and just explains the purpose of the menu. The other options will take you to free trials of our Web tools. Use your browser's BACK button to return to this article.

Select and Go Menus With JavaScript Use the menu options to navigate through the NetMechanic Web Site

Include this JavaScript function definition inside the HEAD section:

In the changePage function, the value of newLoc.selectedIndex will equal from 0 to 4 because there are five possible choices in the select list. One confusing aspect of JavaScript is that it often begins counting with 0 instead of 1. In this case, JavaScript counts the option value "Explore Our Site" as 0 because it's the first value.

When you select an option, that value between 0 and 4 is passed to the variable nextPage. The function doesn't change the page if the descriptive value (Explore our site) is the selected value. If any other value is selected, your visitor's browser requests the selected page URL from the server.

The actual HTML code for the SELECT menu goes in the BODY, inside a FORM tag:

Non-JavaScript Browsers

Some of your visitors may have JavaScript turned off in their browsers. Others may be using browsers (like WebTV) that don't offer full support for JavaScript. Since you're relying on the changePage function to load the selected page, the menu doesn't work without JavaScript. The solution is to include a Go button that displays if the browser doesn't recognize JavaScript.

You'll need to have access to a CGI bin on your server though, since a CGI script is the only other way to change pages within a form. Most web hosts have predefined CGI scripts that you can include on your Web page. Check with your host to see if they have a CGI script to jump from one page to another. You can also browse through free CGI scripts at the CGI Resource Index.

You will have to change your FORM tag slightly and add a <NOSCRIPT> tag:

The opening FORM tag should read:

Note that you've changed the form method from POST to GET and added a form action to call the name of the CGI script. So, if JavaScript isn't enabled, the form calls and executes the CGI script. Enclose the Go button in the <NOSCRIPT> tag. The button will only display if JavaScript isn't enabled:

Put the NOSCRIPT tag after the </SELECT> tag, before the closing FORM tag.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.