Snippets: Howto Automatically Make A Page Index

Filed: Wed, Apr 04 2007 under Programming|| Tags: snippets getelementsbytagname index

Recently I've started doing more reference oriented material on my site, some of such length that they required an index. Previously I'd built the index by hand, but since I was always linking to heading 4 elements, I figured it was time to build the index automatically.

Overview

This is an incredibly simple script. All it does is pull each <h4> element and create an index to it. It stuffs the headings it finds in a division named indexDiv and if it didn't find any H4 tags it will even make the indexDiv invisible.

You can see an example of the dynamically created index in the upper right-hand corner of this page. All the <h4> elements are listed and linked to, automatically, the only thing I had to do was create a division and drop in a few section headers (something I always do anyway because the Google loves them!).

Create the HTML

You actually need to create two divisions, one outer and one inner. The outer division will let you create a title and maybe a little text explaining what the user is seeing. The inner division is where the indexes will be placed. If there aren't any indexes, the javascript will make the outer division (and thus the inner division) invisible.

You'll need to place the division on your page where you want it to be seen and you'll need to style it so it looks a bit better than an un-styled division. 

<div id='indexDiv'>
   <div id='indexContents'></div>
</div>

As you can see, the outer division is named indexDiv and the inner is named indexContents. The only thing the script will do to indexDiv is to set the object.style.display to none if there are no <h4> elements on the page. Don't put anything into indexContents though -- it will be overwritten by the index!

The Javascript

You'll want to create this script at the bottom of the page either right before the </body> tag or in a new <head> tag right below it (yes you can have a 2nd header below the body, in fact you need it if you want to work around some of Internet Explorer's caching issues.

Just insert this script at the end of your program (below your content) and, if you've created your index division and they're named properly (case counts!) then you should have a nice, automatic index of all your <h4> index. 

<script type='text/javascript'>
var els=document.getElementsByTagName('h4');
if (!els.length) {
  document.getElementById('indexDiv').style.display='none';
} else {
  var idx='';
  for (i=0; i<els.length; i++) {
    idx += '<a href="#quickIDX'+i+'">'+els[i].innerHTML+'</a><BR>';
    els[i].innerHTML='<a name="quickIDX'+i+'"></a>'+els[i].innerHTML;
  }
  document.getElementById('indexContents').innerHTML=idx;
}
</script>

Its pretty simple code when you see it all laid out like that. All it does is ask for getElementsByTagName and the tag in this case happens to be <h4> (you can change this if you want to use a different header tag like maybe H1, or H2). This returns an array, and we loop through each element of the array, building the index and inserting an <a name="quickIDX"> element right before the the actual header. This is invisible to the user but it creates a little landing zone for our index's hyper-links to scroll to.

After the loop is done, if there weren't any <h4> elements the indexDiv is made invisible (you don't need an empty index box cluttering up your page!), if there were items and we did build an index then it's inserted into the indexContents div, and it should now be visible and usable by your users.

Useful, Practical, Brain-Dead Simple

This is incredibly useful if you use a template system for publishing articles. Once the division and script are in your template, the indexes are built completely automatically for you. Set it and forget it! (sorry, couldn't resist).

Even if you don't necessarily need this functionality, seeing how it works you might see clever ways to adapt it to uses which would increase your productivity. Say maybe attaching an event to all anchor tags, or adding a copyright message to all blockquote tags. The uses are only limited by your imagination.

Really!

I'm not just making that up! So go imagine something!