Generate a table of contents using JQuery

One of the under-used features of our company’s CMS is Virtual Documents: these are actually large HTML documents that can also be displayed and managed within the Media Manager in the same way as a “physical” file (such as Word or PDF). However, one of the ways that Virtual Documents could be made far more useful is through the ability to generate a table of contents.

Virtual Documents came about because one of our customers had a huge document library in Lotus Notes: they wanted to import these documents into our CMS, but maintain all of the permissions and access rights already applied.

The entire library was exported as XML-based PDFs, and we then wrote a parser to interpret and import the content (complete with styles), and also to gather and apply all of the access rights. The resulting imports became known as Virtual Documents.

A number of our customers have been interested in Virtual Documents, but felt that some features were lacking; one of these was pagination, but this could be by-passed by creating a table of contents that was derived automatically from the headings—as, indeed, Word and Pages do.

There has not been enough demand for us to devote heavy resources to this aim within the product itself, so I started looking around for front-end solutions. And I found a post by Janko at Warp Speed which details how to built a table of contents in JQuery.

It will need some tweaking to get it to behave with our current structure, but I believe that it is a very decent solution—especially the final scaled and fixed table of contents demo.

Leave a Reply

Your email address will not be published. Required fields are marked *