Electric Development Blog

Tuesday, July 12, 2005

User script: AutoTOC

Update 2005-12-01: Version 1.6 has been released, which fixes a few bugs, adds FF1.5 compatibility etc. See separate post here.

This user script (a.k.a. Greasemonkey script) creates a select box in the lower right corner of your screen (sort of a Start menu for your web page), containing quick-links to all headers (H1,H2,H3,H4) - an automagically created table of contents. It really helps navigating through long documents (with a certain amount of standard HTML tags), no matter how hard it used to be. Here, another 1000 words on the subject:



(hey - why didn't I think of that last year when I handed in those 3000-word essays ??)

The script should be working nicely in Firefox (with Greasemonkey installed) and Opera 8. For Firefox installation instructions, see previous post (except the part where you log into bloglines (c: ), for Opera installation instructions, see the official Opera User Script tutorial.

The script can be downloaded from here:
http://www.runeskaug.com/greasemonkey/autotoc.user.js

Update 2005-07-06: Made the script even more standards-friendly, thanks to the strict userjs.org moderators ;)

Update 2005-07-11: Version 1.1. Improved the tag scanning algorithm, and added a "Hide TOC" button (thanks to Julien for the suggestion) - which can be turned off by using setting in the script.

Tags: , ,

.

posted by Rune at 10:36 am

18 Comments:

  • Nice script. I was surprised that sites use the headers tags pretty consistently.
    Small feature idea: you could also include a "close" button on the right corner of the TOC toolbar.

    By Anonymous Anonymous, at 23:43  

  • Thanks Julien,

    The latest and greatest version includes a setting: showHide - if set to true, you will get a 'Hide TOC' button on the right.

    Rune

    By Blogger Rune, at 10:33  

  • Can you tell me why this site isn't working (http://www.softwaretraining4u.de/impressum.html or any other page on this site)? It has header tags. Do I miss something.
    (my contact is a.kucera /at/ babylondreams /dot/ de)

    By Anonymous Anonymous, at 11:36  

  • Hello anonymous,

    Problem is that the site only uses H5 tags. AutoTOC is currently configured to read H1 to H4 tags only. If you wish to change this behaviour (to include all tags from H1 to H6), edit the file and change the expressions:
    "node.tagName.match(/^h[1-4]$/i)" to "node.tagName.match(/^h[1-6]$/i)".

    In my next update I will improve the support for custom levels of headings.

    By Blogger Rune, at 11:54  

  • Hi rune,
    thanks for your quick reply. I see, thanks for your help.

    Alex

    By Anonymous Anonymous, at 15:18  

  • Alex,

    I updated (again), and the default configuration is now set to sniff for h1 to h6 tags.

    Download latest version.

    By Blogger Rune, at 15:24  

  • Hi rune,
    thanks for the update, but it still isn't working on the homepage. Is that because it is too short to make serious use of a ToC?

    Alex

    By Anonymous Anonymous, at 15:02  

  • Alex,

    Only some of the pages on your site contain the number of H-tags required to create a TOC (3 or more). The Impressum page does, Leistungen does, as well as Links. And probably some more.

    By Blogger Rune, at 09:28  

  • Thanks for your patience with me rune. You have been a great help.

    Alex

    By Anonymous Anonymous, at 18:28  

  • Great work, Rune. Could you maintain a bookmarklet version as well? I love how well it works, but I prefer to only have the TOC when I call it up.

    To make a bookmarklet from what you have now, all you have to do is:
    1) remove all the comments
    2) put everything on one line
    3) put "javascript:" at the start

    I'd wanted something like this for a long time but had no idea it could be done so simply. I thought it would require specific knowledge of each site's page structure. Thank you.

    By Anonymous Anonymous, at 03:07  

  • This comment has been removed by a blog administrator.

    By Blogger Rune, at 12:32  

  • Anonymous, thanks for your suggestion - see a separate post for the AutoTOC bookmarklet here.

    (Deleted the previous comment.)

    By Blogger Rune, at 20:34  

  • Rune, it's me, Anonymous again. The bookmarklet works great. (That was fast.) Thanks!

    By Anonymous Anonymous, at 12:00  

  • Neat script dude!

    By Anonymous Anonymous, at 22:53  

  • Very cool. What I was imagining is a keyboard shortcut like Ctrl+Alt+T (and status bar icon) that would pop up the TOC in the middle of the page. That way it doesn't take up any space when not used.

    Each element in the TOC would get a number or letter placed to the left, perhaps, and pressing that number or clicking on the element would then un-pop the TOC and place the browser at that header.

    By Anonymous Anonymous, at 02:55  

  • Well Done! Firefox has an extension which shows a Document Map in a sidebar, but it took way too much room. This sits nicely at the bottom.

    I have a suggestion. Others can chime in whether or not they think this iss useful. For instance, on your site, clicking "About Me" in the TOC, scrolls the page, but its not immediately clear where the "About Me" content is, since the eye is already looking at the left portion of the page, it takes a moment to realize the information is on the right in the sidebar. Perhaps, the script could utilize the "yellow-fade" technique to highlight the header picked from the TOC.

    By Anonymous Anonymous, at 22:22  

  • This user script breaks in Greasemonkey 0.6.4 and Firefox 1.5 Release

    By Blogger Singpolyma, at 10:23  

  • This script is great, especially for large FAQ's! It's so much easier than to go to the top and search for the next interesting item.

    Bastian

    By Anonymous Anonymous, at 08:29  

Post a Comment

<< Home