Dynamic Table of Contents

In this article you will learn how you can employ DHTML to quickly and easily add a dynamic Table of Contents feature to your (lengthy) web pages.

Introduction


Whether managing a simple static HTML web site or a complex database-driven application, at some point every developer comes across the task of building a section with some form of content listing.
Company News, Products Features, Frequently Asked Questions, Blogs and Tech Notes are perfect examples of content listings.
All these various types of content have at least one thing in common: each of them has a listing of content blocks and needs a way of navigating between the listing items.



$2.89
- OR -

Overview

Designing your application in a smart way (using templates and server-side includes, storing the appropriate data in a database) will reduce the time required for building and managing content listings. The real challenge comes in when you need to create a usable navigation interface that will eliminate unnecessary clicking, scrolling and jumping between the pages, and will make it easy for the users to find the desired content.

 

In many cases the most logical solution would be to have a panel with a set of buttons or text links where each link would launch the listing item in the same or a separate window (a pop-up, a frame, a new browser window, etc).

In the example with the Frequently Asked Questions the links would be the questions.  Each one would link to an individual answer. In the example with Blog those would be the blog entries’ titles which would link to the actual blog entries, and so forth.

Quite often (for various reasons) this approach might not be the best solution - for example, when storing data in the database is not possible or feasible. Obviously, you would always want to avoid managing multiple pages. So, if the volume of the content is reasonably small (“reasonably” is measured by the time user has to wait for the page to load) you can safely store/display it on a single page.

The method described in this article uses the approach implemented in Microsoft Word where TOC (Table of Contents) can be generated dynamically based on document headings and heading levels (to determine the depth of the item in the TOC). Control clicking the item in the TOC will bring you to the “bookmarked” heading in the document.

Adobe Acrobat can use the same convention to generate bookmarks tree when converting Word Document to a PDF.

Alex July

Alex JulyAlex July is a Vancouver-based (Canada, British Columbia) Web Developer/ Graphic Artist who has an extensive experience in both creative realms.
He is also a host of Linecraft.com where he is showcasing his skills and sharing experience with the developers community. For the past 3 years Alex has been focusing on the development of Rich Internet Applications using Macromedia Flash technology.

When away from the computer Alex is practicing Martial Arts, playing guitar and enjoying time with his wonderful family.

See All Postings From Alex July >>

Reviews

Be the first to write a review

You must me logged in to write a review.