Chapter 16: Navigation and Site Visit Improvements

There are numerous ways in which JavaScript can improve the usability of your site. We’ve already seen some examples in previous chapters covering form validation, window manipulation, and interactive fundamentals such as layer movement and visibility. But the DHTML capabilities of modern browsers can be used to do more than just implement rollovers and animation; they are often employed to provide the user with GUI-like navigation aids and taskbars. The idea behind such enhancements is that they present the user with an interface to the site that emulates the familiar interface of a typical computer program.

The reality of site navigation enhancement with JavaScript is more complex than you might initially expect. Many site “improvements” turn out to be too unintuitive, bulky, or poorly written to be of much use. In fact, often such site enhancement is designed to showcase fancy DHTML effects rather than improve the user experience. Even when implemented with usability in mind, the addition of complex JavaScript to your site can be more of a hassle than it is worth. Doing so increases the amount of work that must be done to accommodate site reorganization or a shift in browser demographics. Writing robust code for site enhancement demands a higher level of skill, knowledge, and testing than writing “plain” (X)HTML. In all likelihood, it will probably make more sense for you to use a well-tested, publicly available JavaScript library to implement fancy DHTML controls than to roll your own.

Implementation Issues

Even the simplest DHTML application can be implemented in a variety of ways. The examples in this chapter are by no means the only way to achieve the desired functionality. Stylistic attributes can be defined or linked to in the document header or included inline with the style attribute of individual tags. JavaScript code can be linked into a page as an external library or included in the page itself with the help of event handler attributes. It is up to the programmer to choose an approach that is appropriate for the task at hand and that addresses the numerous browser bugs that exist.

Because the amount of code involved in many site improvement tasks is often considerable, software engineering considerations should play a role in your design process. Large sites with numerous menus and a large number of pages are much easier to manage when your code is reasonably organized. They’re even easier to manage when the code is written, maintained, and distributed by someone else!

Suppose you wish to use a hierarchical menu system on your site. The amount of time it will take to change the entries of these menus to reflect a new site organization will largely depend on how the menus were implemented. Making such changes can be a very laborious task if all your code resides inline in each individual page. It is for this reason that DHTML coders for large, professional sites and libraries spend almost as much time thinking about ease of use for the programmer as they do thinking about utility for the user.

In this chapter we’ll take a look at a few of the basic JavaScript and DHTML navigation scripts used in Web sites. Seeing how such applications are built will give you insight into some common techniques and tricks, but readers are also encouraged to look at Web sites like www.dynamicdrive.com and www.webreference.com/dhtml for more examples of JavaScript navigation aids.