jQuery progress indicator for table of contents

The toc-scrolling-progress is a jQuery progress indicator for table of contents. Indicated the progress of reading in a nice way!

jQuery progress indicator with TOC – show the progress of reading

A jQuery plugin that auto generates a fixed table of contents progress bars, that are increasing the progress when user is reading the page (scrolling).

An useful and human-friendly solution, perfect for purposes like long scrolling pages with multiple sections, news pages, online magazines and books, documentations, etc.

An example of jQuery progress indicator for table of contents
An example of jQuery progress indicator for table of contents

Usage

The plugin is really easy to setup and use.

1. Create the HTML element, that will contain our table of contents:

<div id="progress"></div>

2. Add the scripts and call the plugin:

<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" 
  src="jquery.toc.scroll.progress.js"></script>

<script type="text/javascript">
  $('#progress').tocProgress();
</script>

Customizing the plugin

We can style our UI component with CSS, and adjust the defaults in JS:

{
  // Use this if you have a fixed navbar at the top
  offsetElem: '.nav-container',

  // This is the wrapper for each chunk of content
  storyElem: '.story',

  // ID of the wrapper around all the progress bars
  barsContainer: 'barsContainer',

  // Class that is used for each bar in the TOC
  barClass: 'toc-storybar',

  // Plugin checks for first occurence of this element 
  // within storyElem to populate the TOC entries
  headlineSelector: 'h2',

  // Text displayed for for the back to top link
  topText: 'Back to top'
}

That’s it!

Demo:

http://jfitzsimmons2.github.io/toc-scrolling-progress/demos/garden/book.html

GitHub:

https://github.com/jfitzsimmons2/toc-scrolling-progress

You may also like:

JavaScript table of contents generator – TocJS

Table of Contents jQuery Plugin

Tutorial: jQuery quote rotator with a nice progress indicator

A percentage loader jQuery plugin

Slim progress bar jQuery plugin – NProgress

Progression.js – jQuery form progress indicator

Enjoy the reading!

Share:Share on Facebook0Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1