Content Navigator JQuery plugin

ContentNavigator is a JQuery plugin that generates a table of content or index from a page.

This plugin is realy helful when you have a documentation page, a manual page or whatever another long text. Just call the plugin and a table of content will be created automatically.

Demos

• Basics examples: https://rawgit.com/aewebsolutions/contentNavigator/master/demos/basic.html
• Indexing : https://rawgit.com/aewebsolutions/contentNavigator/master/demos/indexing.html
• Collapsable : https://rawgit.com/aewebsolutions/contentNavigator/master/demos/collapsable.html

Features

• Minimum markup required
• Easy to specify blocks of contents and titles
• Titles on table of contents can be collapsables
• Generates ids for URL hashing
• Compatible with multiple instances per page

Installation

Include JQuery js and plugin’s css and js files in your HTML code.

<script src="/lib/jquery.js"></script> 
<link rel="stylesheet" href="/dist/connav.min.css" type="text/css" /> 
<script src="/dist/connav.min.js"></script> 

Usage

Wait until document is ready. Then, you can call the plugin.

$(document).ready(function(){

   $('#navigator').contentNavigator();

});

Markup

Some markup is required. You need to add an element for getting the content table.

By default, titles of the content table will be generated from page headings (h2, h3, etc). An easy way to tell plugin where to search is wrapping content inside a "connav-auto-block" classname element.

<div id="navigator"></div>

<div class="connav-auto-block">

  <h2>First Level Title</h2>
  <p>Some text here.</p>
  
  <h3>Second Level Title</h3>
  <p>This item will be nested.</p>
  
  <h2>First Level Title. Second one</h2>
  <p>Some text here.</p>
  
  <h3>Second Level Title</h3>
  <p>etc</p>
  
</div>

Sometimes you need to get more controll over each block of content or you don't want to use headlings. So, you can use default classes for blocks of content and titles: "connav-block" and "connav-title", or use your custom ones.

<div id="navigator"></div>

<div class="connav-block">
  <div class="connav-title">Here is a first level title</div>
  <p>Some text here.</p>
</div>

<div class="connav-block">
  <div class="connav-title">Here is another first level title</div>
  <p>Some text here.</p>
  
  <div class="connav-block">
    <div class="connav-title">Here is a second level title</div>
    <p>Some text here.</p>
  </div>
</div>

For more details, you can see the demos pages.

Options

Name	Type	Default	Description
wrapper	string	'body'	CSS selector for a wrapper to find content
updateURL	boolean	false	Auto update hash (if id were defined, or id of parents were defined)
autoId	boolean	true	Auto generate id (if no one were defined)
autocontent	string	'connav-auto-block'	CSS selector for auto content generator.
content	string	'connav-block'	CSS selector for content blocks. Use it when autocontent is not used.
title	string	'connav-title'	CSS selector for titles. Use it when autocontent is not used. If is not defined, h2, h3, h4, etc will be use. For level 1 use h2; for level 2 use h3; etc.
indexOnTable	boolean	true	Shows index on table
indexOnContent	boolean	false	Shows index on title content
indexType	string	'1.1.1'	E.g : 'A.1.a', ' .1.1'
nestedIndex	boolean	true	Each index will be have parents' index, so result will be '2.1.a' instead of just 'a'
marginTop	number	0	Space between top of screen and block
btnCollapse	string	' '	Markup for collpse button
collapsable	boolean	false	Makes items collapsable
autocollapse	boolean	false	Auto toggle collapsable items of table of content when scrolling.

Events

Event	Params	Description
connavReady	event , instance	Fires when table is ready
connavChange	event, activeBlock	Fires when a block is activated
connavToggleCollapse	event, tableNode	Fires when an item form table of content is open or close