When working on long pages with a lot of headings, a technique often used to give the reader an overview what follows on the page is using a "table of contents" or "jumplinks". Anchors are attached to the all headings and a list of links is added to the top of the page that "jump" to the corresponding heading. Creating and maintaining these jumplinks is a tedious job. Mostly you want the links to be the same as the heading titles and as soon as the titles change, you need to edit the table of contents too.
I've created a small module, called Table of Contents, that creates this table of contents automatically for you by inspecting your node's body and gathering all your heading tags (h1 through h7). The module uses jQuery to do all the heavy lifting. It actually uses a jQuery plugin by Doug Neiner.
I have also implemented a Smooth Anchors jQuery plugin which changes the default "jumping" behavior of browsers to a "scrolling" one.
This module is not hosted on drupal.org but you can download it here.
You could also prefer to use the contributed Table of Contents module from drupal.org which uses Drupal's input filter system instead of jQuery to generate the table of contents.
| Attachment | Size |
|---|---|
| toc.tar_.gz | 6.98 KB |
Comments
thank you. i tried to look into the TOC module hostt on d.o but its a little too much stuff. I try to take yours tu understand the concept. Thnak you for your code.
I prefer this module over tableofcontents on drupal.org, keep up the good work! Something I had noticed though, while viewing a site on the iTouch/iPad they don't seem to like linking to the anchor tag.
I did fix this issue by adding an id attribute to the header tag itself, rather than creating an empty anchor tag.
changed:
$(element).prepend('');
to:
$(element).attr("id",id);
This minor change got it working on the ipad/itouch as well.
@NancyDru : Why would this method only be good on non-cached sites?
I do not have the intention nor the time to contribute this or help to merge this with another module. Everyone wants to merge this functionality in the contributed "table of contents" module is freely to learn from this or copy this code.
Have you tried working with the maintainer of that module. Perhaps site owners could have an option of which way they wanted to go on this.
It would seem to me that sites that are cached or on a CDN, the module's way would be good, but on a non-cached site, your way would be good. And if you could blend your scroll method with the input filter method, you might have a super module for those of us who are in between.
Looks promising! Nice and simple. Table of contents module looks a bit to messy for me personally.
Please keep us updated.
@justpassinthru. I considered using the contributed module. But the whole [toc] thing was a bit too much of fuzz. Especially when working with wysiwig. There were other reasons too. But I don't remember those very well anymore. It didn't take too long to throw this small gem together. So I decided to go for it.
Any reason you didn't just use http://drupal.org/project/tableofcontents ?
Thanks for sharing and for the effort to create the nice screencast!
Post new comment