Home arrow Design Usability arrow Page 4 - Easy as A,B,C – dynamic A to Z indexes

Easy as A,B,C – dynamic A to Z indexes

It's a good idea to offer your visitors as many logical ways to navigate your website as possible. This gives them more chances to find exactly the product or information for which they came to your site in the first place. Sitemaps are a wonderful solution, but many of your visitors may find an A to Z index of your site easier to understand. Chris Heilmann explains how to implement such an index.

Author Info:
By: Chris Heilmann
Rating: 4 stars4 stars4 stars4 stars4 stars / 37
March 30, 2005
  1. · Easy as A,B,C – dynamic A to Z indexes
  2. · Our friend the user agent
  3. · The Redmond spoiler
  4. · Making the list dynamic
  5. · Customizing the script

print this article

Easy as A,B,C – dynamic A to Z indexes - Making the list dynamic
(Page 4 of 5 )

What we want to achieve is that users with JavaScript enabled will only see the section of the links they chose in the navigation, and initially the first one.

The stage directions of our script are the following:

  • Check whether the browser is capable of understanding DOM manipulation.

  • Check whether the necessary elements are available.

  • Find out whether there is already a target in the URL, to allow other sites to link directly to a certain section.

  • If there is one, define this as the current section; otherwise define the first one in the navigation.

  • Loop through all the links in the A to Z navigation.

    • Read the target of the link and compare it with the current section – if they match, make the link the "current" one.

    • Hide the section the link points to.

    • Define a function and apply it to the current link that will:

      • Read the target of the link.

      • Show the section it points to and set the link as the current one.

      • Hide the old section and remove the current state from the last link that was activated.

    • Show the current section.

In order to keep our code clean and the functionality separated, we use classes in the style sheet that get applied to or removed from the different elements.

ul#atoz li a.current{











This extra style and the script (example:dynatoz.js) turns our list into a dynamic A to Z index (example:dynatoz.html).

When the document is loaded, all sections but the first (or the one in the URL) get hidden. Activating any of the links in the navigation will show the section and change the window’s location – something that is necessary to allow the visitor to bookmark the page.

If that is not fancy enough, we can activate the change when the mouse hovers over the link by adding a class to the list navigation:

<ul id="atoz" class="dohover">

This will trigger the change of the sections when the link is activated and when the mouse is hovering over it (example:hoveratoz.html). Note that this will not change the location of the browser and negates the option to bookmark.

blog comments powered by Disqus

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C – dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials