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{

            background:#ddd;

}

.hidden{

            position:absolute;

            left:-999em;

}

.shown{

            position:relative;

            left:0;

}

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.

Next: Customizing the script >>
 

More Design Usability Articles
More By Chris Heilmann

Comments On: Easy as A,B,C – dynamic A to Z indexes

· Very neat article. I should have loved to get a little more about the javascript,...   >>> Post your comment now!