Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Practical example 2: Automatic TOC generator

From: jQuery Essential Training

Video: Practical example 2: Automatic TOC generator

All right, in this example, what we are going to do now is take what we've learned in this chapter and we are going to build a practical finished example. The example what I am going to build is an automatic table of contents for a document. If you look inside the exercise files, you will see these two files right here, AutoTOC_start and AutoTOC_finished, so I am going to build this example starting from the starting point and you could either follow along with me or you could just go ahead and jump right to the finished version. Before I do that though, I am going to bring up the finished version in the browser so you can see what it's doing.

Practical example 2: Automatic TOC generator

All right, in this example, what we are going to do now is take what we've learned in this chapter and we are going to build a practical finished example. The example what I am going to build is an automatic table of contents for a document. If you look inside the exercise files, you will see these two files right here, AutoTOC_start and AutoTOC_finished, so I am going to build this example starting from the starting point and you could either follow along with me or you could just go ahead and jump right to the finished version. Before I do that though, I am going to bring up the finished version in the browser so you can see what it's doing.

So let's just double-click on this guy. You can see that this is a document that's got a whole bunch of you know Lorem ipsum text in it and there is a whole bunch of these headings, right. There is the Introduction. There is this heading here and so on. This right here, this Table of Contents, contains a bunch of links that jump to the various places in the document. So for example, if I click on this guy, you see it jumps right down to that heading and I go back. I can jump to this guy down here and it goes right to that heading. This Table of Contents, what's happening is this is being built up automatically by some jQuery code.

So we are going to see how to build that automatic TOC Generator, which will look through the document for various kinds of headers and then use those to build named anchors inside the document where we want to jump to. Okay, so let's do that. I will close this and I am going to bring this up in my editor. So here is the starting point and what we are going to do is write this function here called buildBookmarks.

You can see that when the document.ready event fires that function is being called and it's being called with two arguments. The first argument is the type of header tag that we want to serve as the TOC locations and the second argument is the id of the div that we want to append the resulting Table of Contents HTML into. So you can see that that's this div right here that has the header id on it. So that's where the title is. This is where the subtitle is.

So we are going to build that Table of Contents and put it in right at the end of this div here. The other thing you should realize also is that each one of these sections in the document is enclosed in a div and has an id and there is these h3 tags that are at the top of each one of the sections. These are the headers for each section in the document. So what we are going to do is write some jQuery code that builds this bookmark list. So what we are going to do right off the bat is write a jQuery statement that creates the unordered list that's going to serve as the table of contents.

So, the way we are going to do that is just tell jQuery to make me a new list. So we are just going to say make me an unordered list whose id is equal to bookmarksList and we'll just close that off. Okay. So now I've got my new unordered list there. So for each one of the header tags, there is two things we need to do. First, we need to create a named anchor and insert it into the header tag because that's going to serve as the jump location for the links in the TOC.

Then we need to add that link into this unordered list right here that will point to the named anchor. So what we are going to do is get all the divs, because the sections are all divided into divs. So I am going to write a jQuery that says get me all of the divs but I don't want, so we'll just say not the div where the id attribute is equal to header, because we are not going to be looking inside this guy right here. That's where the TOC is going to go.

So get me every div that doesn't have an id that's equal to the header, okay, plus, so we'll look inside divs, but we want the h3 tags. That's what we need. So I am going to add on the strWhichTag argument and you can see strWhichTag is the h3 that's being passed in. So we are looking for h3s inside the divs that are not the header div. Now I am going to get a little bit tricky here. So recall from earlier in the course when I covered the Traversing section there is a function called each, and I am going to use the each function and the each function is going to iterate over each one of the contents that we find, because there is two things that we have to do.

So I am going to write a function and my each function is going to do a couple of different things. The first thing it's going to do is create the named anchor and since we need named anchors to be unique in the document, we have to have unique way of naming them. So what I am going to do is create a little variable up here named AnchorCount and I am going to initialize that to 0, and we are going to increment that value each times so that. That way all the named anchors have unique names.

So what I am going to say is inside the each function, I am going to write this, because the this keyword will refer to the h3 tag. So I am going to set the html for the h3 tag to be a named anchor so, a name = and then the name is going to be bookmark and we are going to add the AnchorCount to it, so that's going to be cAnchorCount. Okay.

So now we are making the unique named anchor and we are going to close that off now. So we close off that named anchor tag and that's going to set the HTML to the named anchor, but now we need to add in the existing HTML for the h3. We don't want the h3 to be blown away. So we are going to say add this.existing html. So what that does is take the existing HTML for the h3 and just put a named anchor right in front of it.

So now we have created the named anchor, what we need to do now is add our link to the list that we are creating. So to do that, we are going to write oList.append, so that's the list. So we are going to say oList.append and we are going to make a new list item. So we are going to use jQuery to do that. And I am just going to pass the jQuery object some html. That's going to be a list item, and inside the list item, there is going to be an anchor or a link and the href is going to go to the named anchor for the bookmark, right.

That's this guy that we made up here, plus the cAnchorCount and then we are going to increment the AnchorCount, Plus. So closing HTML, plus the text that's inside the h3. And remember to get the text that's inside the h3, we'll write this.text. So we have created the anchor. We need to close off the named anchor tag. So before I forget that, we need to close off the list, the link, and we need to close off the list item.

So now we have created the named anchor, we have created the list item and we should be pretty much good to go at this point. So let's scroll back on over here. Okay. So now after we have finished creating the content that's going to go in the list and the named anchor when this loop here terminates, we need to put the list of links we just created inside this div. So now we are going to say jQuery, get me the id for the BookMarkNode, right.

Remember it's passed in as a variable and that's going to be header. So get me the id for the div, .append, and we are going to put the list into that div. Okay, one more time. Let's just see what this is doing. So we have a variable that keeps track of a counter, so that all of our named anchors are unique. We create an unordered list. That's going to be the list of TOC. For every div that's not the header, plus the h3s, we are going to loop over each one of those guys and we are going to create a named anchor that goes in front of the h3 tag.

That's the link destination. Then we create a list item that has the link into it that jumps to that named anchor and so we do that for each one of the h3s and when we have done that, we put the entire list into the div. All right, here we are on the browser and you can see that when I bring up the document, that's exactly what happened. So now each one of these h3s has a little invisible named anchor in front of it. So when I click, it jumps right there and you can see that the text of each one of these link items is the same text as the h3.

Okay, that pretty much wraps it up. Now you know how to use content manipulation and retrieval to solve a real practical problem.

Show transcript

This video is part of

Image for jQuery Essential Training
jQuery Essential Training

49 video lessons · 95840 viewers

Joe Marini
Author

 
Expand all | Collapse all
  1. 2m 52s
    1. Welcome
      1m 9s
    2. Using the exercise files
      1m 43s
  2. 17m 37s
    1. What is jQuery?
      5m 19s
    2. Downloading and installing jQuery
      2m 20s
    3. Creating a simple jQuery-enabled page
      7m 12s
    4. Overview of features in jQuery
      2m 46s
  3. 59m 57s
    1. Overview of selectors and filters
      2m 9s
    2. Using basic jQuery selectors
      9m 6s
    3. Using basic jQuery filters
      8m 35s
    4. Using jQuery attribute filters
      6m 7s
    5. Child, visibility, and content filters
      9m 59s
    6. Form selectors and filters
      9m 3s
    7. Traversing documents
      9m 1s
    8. Understanding jQuery statement chaining
      1m 42s
    9. Practical example 1: Annotating page links
      4m 15s
  4. 47m 16s
    1. Creating, getting, and setting content
      5m 53s
    2. Manipulating attributes
      5m 43s
    3. Inserting content
      4m 57s
    4. Wrapping, replacing, and removing content
      5m 27s
    5. Working with CSS
      6m 19s
    6. Associating data with page elements
      9m 30s
    7. Practical example 2: Automatic TOC generator
      9m 27s
  5. 33m 6s
    1. Understanding the jQuery event handling features
      2m 4s
    2. Binding and unbinding events
      6m 23s
    3. Convenient event helper methods
      4m 40s
    4. Using the jQuery event object
      6m 21s
    5. Using miscellaneous event features
      4m 38s
    6. Practical example 3: Table striping and highlighting
      9m 0s
  6. 28m 45s
    1. Hiding and showing elements
      5m 23s
    2. Fading elements in and out
      4m 2s
    3. Sliding elements
      4m 3s
    4. Creating custom animations
      5m 58s
    5. Practical example 4: Image rotator
      9m 19s
  7. 25m 30s
    1. Introduction to jQuery UI
      3m 40s
    2. Exploring the jQuery UI widgets
      5m 24s
    3. Exploring the jQuery UI effects
      3m 58s
    4. Using the jQuery UI ThemeRoller
      4m 11s
    5. Downloading and installing jQuery UI
      8m 17s
  8. 47m 49s
    1. Overview of the sample web site
      3m 50s
    2. Using the accordion widget
      9m 14s
    3. Creating an image rotator
      10m 22s
    4. Building hover tooltips
      7m 26s
    5. Making an image selector
      9m 30s
    6. Using the Resizable effect
      7m 27s
  9. 30m 2s
    1. Working with Asynchronous JavaScript and XML (AJAX)
      10m 8s
    2. Using AJAX helpers
      4m 34s
    3. Understanding AJAX data types
      10m 14s
    4. Using global AJAX event handlers
      5m 6s
  10. 20s
    1. Goodbye
      20s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed jQuery Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.