Cheesetoast » automatic http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.10 Automatically Generate a Table of Contents with JQuery http://www.cheesetoast.co.uk/automatically-generate-table-of-contents-jquery/ http://www.cheesetoast.co.uk/automatically-generate-table-of-contents-jquery/#comments Sat, 03 Jul 2010 22:57:39 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=30 I'm going to walk through a little JQuery script that automatically generates a table of contents at the top of the page. This is useful when you have content arranged under several sub-headers (a typical Wikipedia page is a good example) and want to have quick links to each section. Continue reading

The post Automatically Generate a Table of Contents with JQuery appeared first on Cheesetoast.

]]>
I’m going to walk through a short JQuery script that automatically generates a table of contents at the top of the page. This is useful when you have content arranged under several sub-headers (a typical Wikipedia page is a good example) and want to have quick links to each section.

This script will use JQuery to search through the a page for H2 tags and add an anchor to each one so that the table of contents can jump to it. Then it adds the table of contents in the form of a list at the top of the page, after the main header.

First of all we’re going to set up some variables:

$(“document”).ready(function(){

var header_type = “h2″;
var number_of_headers = 2;
var counter = 0;
var table_of_contents = $(“<ul id=’table_of_contents’>”);

// This is the HTML code that will eventually become our table of contents.

You can change these variables to suit your needs. For example you could change the header type to H3. The number_of_headers variable is the minimum number of headers allowed on the page before the table of contents if generated (after all, you probably don’t want a table of contents when there are only one or two sections).

Next comes the ‘if’ statement:

if($(header_type).size() > number_of_headers) {

This uses the size() function which basically counts to see if there are more than 2 (or whatever you set as ‘number_of_headers’) of the header tags on the page, since a table of contents is not necessary when there’s only one or two headers. One issue with this is that you might have a webpage shell that contains other H2 tags, as menu headers for example. To get around this you could perhaps use a header tag that is isn’t in use OR you could give your H2 tags a class and use that to narrow down the search.

Then we want to use JQuery to select all the H2 tags and iterate through them, like so:

$(header_type).each(function() {

Once these are selected, we perform the following:

$(this).html(“<a name=’bookmark” + counter + “‘></a>” + $(this).html());

table_of_contents.append($(“<li><a href=’#bookmark” + counter++ + “‘> ”
+ $(this).text() + “</a></li>”));

} );    //  Close the bracket for the current function.

First of all we take the HTML code for the H2 tag and place an anchor before it. This anchor marks the spot that the user is taken to when they click on the table of contents. The ‘counter’ variable is used to give the anchor name a unique ID.

The second line appends the HTML code stored in the ‘table_of_contents’ variable (the unordered list code) by adding some list items to it. Inside these list items we place a link to the anchors we just placed in the previous line of code. We also increment the counter so that the next ID is unique. Then we just use the text of the header as the text for the link and close our tags (you don’t need to worry about closing the <ul> tag, since JQuery takes care of this for you).

The final step is to add the ‘table_of_contents’ code we’ve just assembled to the page. For this example we are assuming that we want the table of contents page to come right after the main heading. We can use a selector to place the code after the first H1 tag on the page. Alternatively, you could instead create a div on the page with a ID and tell the JQuery to plonk the code right inside that instead.

$(“h1:first”).after(table_of_contents);

Here is the code all together:

$(“document”).ready(function(){

var header_type = “h2″;
var number_of_headers = 2;
var counter = 0;
var table_of_contents = $(“<ul id=’table_of_contents’>”);

if($(header_type).size() > number_of_headers) {

$(header_type).each(function(){

$(this).html(“<a name=’bookmark” + counter + “‘></a>” + $(this).html());

table_of_contents.append($(“<li><a href=’#bookmark” + counter++ + “‘> ”
+ $(this).text() + “</a></li>”));

});

$(“h1:first”).after(table_of_contents);

}
})

If you have any ideas about how to improve this little script or even just points that you’d like to make about it, please leave a comment.

Update [23rd March, 2012]: I found a great JQuery plugin for table of contents simply called TOC. It’s easy to setup and customize. It also comes with nice smooth scrolling.

The post Automatically Generate a Table of Contents with JQuery appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/automatically-generate-table-of-contents-jquery/feed/ 0