This is my week end project: a table of contents generator. Well, technically, it’s more like a two hour project interrupted four times over the course of a Saturday but I guess it still qualifies as a week end project.
I got tired of managing the table of contents of my documentations manually and in particular, of having to modify all the section numbers by hand whenever I moved things around. This short Javascript program now automatically takes care of it for me. Here is the quick documentation:
// A simple HTML "table of contents" generator. // // 1) Include toc.js in your HTML file: // <script type="text/javascript" src="toc.js"></script> // // 2) Call generateToc() in your onLoad() method: // <body onLoad="generateToc();"> // // 3) Declare a div with the id "table-of-contents" where you want // your table of contents: // <div id="table-of-contents"></div> // // 4) Put each of your sections in an <a> tag with class "section", // specifying an "indent" representing the indentation of that section. // Only the length of the indent matters, now its content. If no indent // is found, a string of size 1 is the default. // // Example: // <a class="section" name="Section 1">Section 1</a> // <a class="section" indent=".." name="Section 1a">Section 1a</a> // <a class="section" name="Section 2">Section 2</a>
This script now powers both testng.org and jcommander.org, go take a look there if you want to see what it looks like.
Ideas for potential improvements:
- Make the numbering optional or configurable.
- Have the script add CSS classes to the sections for easier styling (“section1”, “section2”, etc…), since the indenting is pretty crude right now.
#1 by Dan Fabulich on December 11, 2011 - 9:27 am
It might be more semantically correct to wrap these in h1, h2, h3 tags. Additionally, Google recommends it in its SEO starter guide.
#2 by Cedric on December 11, 2011 - 9:33 am
Actually I was thinking even this was going too far. Ideally, you just want to wrap them in divs or spans with the correct class (indent1, indent2, etc…) and slap a CSS on them.
#3 by JB on January 6, 2012 - 8:53 am
I agree with Dan. h1, h2 etc. are the standard tags used to define a title hierarchy. The indentation should be directly deduced from the enclosing heading tag.