Help Desk
By Christopher Schmitt, Guest Webmaster
Drop-Down Dilemma
Dear Help Desk,
I use drop-down menus for navigation on my framed site, as they let users hop around my site's content. How can I include forward and back buttons in addition to the drop-down menu for people who want to surf the site linearly?
- Dee
Dear Dee,
Drop-down menus are an excellent way to provide a supplemental means of navigation. Their effectiveness is also their downfall. How so? Drop-down menus provide a way for users to hop from section to section of a Web site. Granted, if you provide the list in the drop-down menu in a linear fashion, a user might actually go through your entire site. But in reality, users get bored or distracted easily thanks to our ever-shrinking attention spans.
To help a user fully explore your content, you can provide Next and Back buttons as well as the drop-down menu. The script in
Listing 1 should help you do this.
First, the makeArray object is really for older Web browsers that don't support true arrays. You should modify the items in the pages and urls arrays to match the titles and URLs of actual pages on your site.
Next, the script sets up the variable for the page number. The page number changes as a user interacts with the drop-down menu, Next button, or Back button. The page number is initially set to 0, because we are assuming the user will be arriving at the entry point for navigation. If the page is in a different place in the order, change the value accordingly.
Most of the magic takes place in the uberNav function. Here, the script redirects the user to a given Web page depending on whether he or she pressed the Next button or the Back button, or used the drop-down menu.
If the Back button was pressed, the function will first check to see if the page value is greater than zero. If it is, then it will decrease the value by one and load the correct page into the content frame and refresh the drop-down menu with the correct text.
For the Next button, the script ensures that the page value isn't greater than the number of pages listed in the array. If this condition is satisfied, the correct page is loaded into the frame and the drop-down menu is refreshed with the correct text.
The last part of the function handles the drop-down menu. Because the drop-down menu already contains a limited number of options, the code doesn't need to check whether a user has selected an invalid page (one that's not listed in the array). The script simply pulls the value of the currently selected page from the drop-down menu and tells the browser to load that page.
In the BODY of your HTML document, insert the snippets of code from
Example 1 where you want the navigation to appear in your page.
Then, insert this code in your document to create simple Back and Next buttons:
<A HREF="../../../../docs/new1013637242/javascript:uberNav('backbutton');">BACK</A>
<A HREF="../../../../docs/new1013637242/javascript:uberNav('nextbutton');">NEXT</A>
That's the basic code. For extra credit, replace the text links with images and add rollovers to the Next and Back links.
Name That Page
Dear Help Desk,
How can I streamline the navigation-building process for my site? On my site, when a user views a given page, the navigation link to that page is "turned off." Because we update, add, and delete pages frequently, I find myself spending hours reworking the navigation.
- Linda
Dear Linda,
I too used to hand-code the HTML for this sort of navigation feature. Like you, I didn't want to have a text link for the page that users were currently viewing (a type of redundancy you should avoid). Second, I wanted to provide a visual reference for users so that they could know what page they were on.
Of course, having to rewrite all the pages whenever you add a new section to your nav bar can be a problem, so I wrote a script, shown in
Listing 2. The script prints out a list of available pages, with the name of the current page displayed as bold text instead of a linked URL.
The first thing you should do is change the items in the globallinks and globallabels arrays to match the actual pages and URLs on your site. Use absolute paths when defining your URLs (to avoid any potentially nasty page location problems). I'm using true arrays here, so if you're worried about older browsers, see the code for
Listing 1.
The script uses the print_links function to loop through each item in the labels array and display the item as normal HTML text or as a text link.
At the end of the script, I've inserted a call to the auto_nav() function that starts the entire process.
This script becomes especially interesting if you call it externally in your HTML page. You can do this by placing the JavaScript code in a separate file and naming it something like "autonav.js". (To do this, you have to remove the <SCRIPT> tags and the comment tags that surround the code.) In the BODY of the HTML page where you want the navigation to appear, place this code snippet:
<SCRIPT TYPE="text/javascript" SRC="../../../../docs/new1013637242/autonav.js">
</SCRIPT>
With this snippet in place of your static navigation bar, you can add to your site's navigation simply by updating the autonav.js file, not the individual HTML pages.
Finished Forms
Dear Help Desk,
We publish a B2B magazine and have built online subscription and renewal forms within our Web site. The form works fine, except for one thing: An online subscriber can submit his or her information without filling in some of the necessary fields in the form. We would like to set up our forms so that when a user clicks on submit, and one or more of the necessary fields isn't filled in, a message appears that informs the user to go back and complete the form. I've looked through all the form markup tags and can't figure out how to do this.
- John
Dear John,
You can use a client-side script to verify that a user has entered data into specific fields before the form gets sent to the server for processing. However, even with the client-side script, your first priority should be to make sure the script on the server side returns a friendly error message. Form validation via JavaScript is an excellent way to reduce needless tasks, but it's not a substitute if a user has JavaScript turned off.
In the HEAD of the HTML document where your form resides, add the code from
Listing 3.
The emptycheck function will check all the fields in your form, ensuring that they're not empty. If any field is empty, the code that appears later in the script (within the if statements) will pop open an alert box, asking the user to fill the field in.
You will have to build the JavaScript if statements specifically to handle each field in your form. Make sure you carry over the form element's name in each if conditional, otherwise the JavaScript will not execute properly.
Listing 3 was written for an example form that has two input fields, one called username and one called address. You should change these accordingly and add more if statements as needed.
Finally, if the form passes the conditionals, the script automatically submits the form to the server, via the submit function.
Be sure to update your form to include the "trigger" that will activate the form validation script. To do this, modify your <FORM> tag to look like this:
<FORM onSubmit="return formCheck(this)">
Now your form can't be submitted until all the fields have been filled.
Christopher created the Web Design Pad, Web-safe colors arranged in a color wheel, and was a moving force behind the design magazine High Five. Currently, he works for Mindcomet.com as a Web production lead. You can reach him at schmitt@christopher.org.
Ask a Webmaster
Got questions? Send them to helpdesk@webtechniques.com, or snail mail Web Techniques Help Desk, 600 Harrison Street, San Francisco CA 94107. Queries may be edited for length and clarity.
