• Shop
  • Web Forms
  • Directory
  • Contact
  • Profile
    •

    Learn how to connect an HTML form to the database and email! It takes only 3 minutes. Read more

    javascript by
    Free Download

    Elixon TOC

    Buy Now! 5 $
  • Home
  • Demo
  • Gallery
  • Documentation
  • Contents
  • Questions

    • Introduction

    Elixon TOC generator is easy-to-use jQuery plugin that automatically creates smart HTML table of contents. It automatically tracks window scrolling and highlights currently viewed chapters.

    Highlights

    • You don't need to write a single line of javascript.
    • 12 templates included.
    • Bootstrap 3 support.
    • Automatic TOC item highlighting based on what chapter is being viewed.
    • Smooth scrolling.
    • TOC can be generated even from non-header elements.
    • Custom label callback filter.
    • and more...

    Get Started

    Include jQuery

    This script requires jQuery. If you don't have jQuery on your page already add this line to your head element: 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

    Include jQuery Elixon TOC

    Include jQuery Elixon TOC after the jQuery script link: 
    <link href="…/jquery.toc.css" type="text/css" rel="stylesheet"/>
    <script src="…/jquery.toc.js" type="text/javascript"></script>
    Replace … with correct path.

    Insert TOC

    Place the TOC generating HTML tag anywhere on the page: 
    <div toctemplate="elegant"></div>
    For more HTML options refer to HTML Element section.

    Simple Examples

    1. HTML Way

      Generate elegant TOC from h2 and h3 elements inside the #body element. 

      <div tocfrom="#body h2, #body h3" toctemplate="simple"></div>

    2. Javascript Way

      Generate modern TOC appended to an element with id myElement from h2 and h3 elements inside the element with id article. 

      $("#myElement").toc("#article h2, #article h3", "modern");

    3. Nonstandard Headers

      You can generate Table Of Contents using other elements then h1, h2 and so on. Simply specify the ordered array with jQuery selectors.

      Consider this example 

      <a title="About Us" class="lvl1">Chapter 1</a>
      <p>Lorem ipsum …</p>

      <a title="Company" class="lvl2">Chapter 1.1</a>
      <p>Lorem ipsum …</p>

      <a title="Location" class="lvl2">Chapter 1.2</a>
      <p>Lorem ipsum …</p>

      <a title="Map" class="lvl3">Chapter 1.2.1</a>
      <p>Lorem ipsum …</p>

      <a title="Products" class="lvl1">Chapter 2</a>
      <p>Lorem ipsum …</p>

      Generate headings from three levels of HTML links. Use the title attribute on the link as TOC item label. 

      $("#myElement").toc([".lvl1", ".lvl2", ".lvl3"],  function() {return $(this).attr('title');});

    Complete Example

    <!doctype html>
<html>
  <head>
	<title>Example Domain</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
	<link href="…/jquery.toc.css" type="text/css" rel="stylesheet"/>
	<script src="…/jquery.toc.js" type="text/javascript"></script>
  </head>

  <body>
	<div>

	  <h1>Table Of Contents</h1>
	  <div toctemplate="default:nohilite"></div>

	  <h1>Chapter 1</h1>
	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

	  <h2>Chapter 1.1</h2>
	  <p>Fusce ut iaculis risus. Quisque vehicula elementum neque.</p>

	  <h1>Chapter 2</h1>
	  <p>Ac feugiat leo vehicula eget. Aenean rutrum ornare nulla vel iaculis.</p>

	  <h2>Chapter 2.2</h2>
	  <p>Phasellus velit tortor, mollis ullamcorper purus.</p>

	</div>
  </body>
</html>
    Replace … with correct path.

    API

    HTML Element

    Syntax: 
    <HTMLELEMENT [ tocfrom="SELECTOR" ] [ toctemplate="TEMPLATENAME" ] [ tocoffset="OFFSET" ]/>
    Example: 
    <div tocfrom=".contents h1, .contents h2" toctemplate="modern"></div>
    • HTMLELEMENT any element name on the page. For example: span, div, ….
    • SELECTOR jQuery selector string that selects heading elements.
    • TEMPLATENAME Template name. Template name can have feature keywords appended at the end of the name separated by : (eg. elegant:collapsible:roman).
      • default (default) Supported features: nohilite collapsible nonum mixed roman alpha disc square
      • modern Supported features: nohilite collapsible nonum mixed roman alpha disc square
      • elegant Supported features: nohilite collapsible nonum mixed roman alpha disc square
      • simple Supported features: nohilite collapsible
      • bootstrap3.dropdown Supported features: nohilite
      • bootstrap3.buttons Supported features: nohilite
      • bootstrap3.pills Supported features: nohilite
      • bootstrap3.pills.stacked Supported features: nohilite
      • bootstrap3.pills.justified Supported features: nohilite
      • bootstrap3.pager Supported features: nohilite
      • bootstrap3.list Supported features: nohilite
      • bootstrap3.navbar Supported features: nohilite
    • OFFSET Number of pixels. When scrolling the element will be centered OFFSET pixels from the top. Solves the problem with fixed-position menu bars that may overlay the target text.
    Note that elements dynamically generated after document load must be initialized using Javascript.

    Javascript

    Syntax: 
    jQueryObject.toc([ARG[, ARG[, …]]]);
    Example: 
    $("#mainTOC").toc("modern");
    Where ARG can be one of
    • SELECTOR jQuery selector string that selects heading elements.
    • JQOBJECT jQuery object with heading elements.
    • LABELER Custom labeler callback function(info) that extracts and returns the text from an element to be displayed in TOC. Default: function(info) {return $(this).text();}
    • TEMPLATENAME Template name. Template name can have feature keywords appended at the end of the name separated by : (eg. elegant:collapsible:roman).
      • default (default) Supported features: nohilite collapsible nonum mixed roman alpha disc square
      • modern Supported features: nohilite collapsible nonum mixed roman alpha disc square
      • elegant Supported features: nohilite collapsible nonum mixed roman alpha disc square
      • simple Supported features: nohilite collapsible
      • bootstrap3.dropdown Supported features: nohilite
      • bootstrap3.buttons Supported features: nohilite
      • bootstrap3.pills Supported features: nohilite
      • bootstrap3.pills.stacked Supported features: nohilite
      • bootstrap3.pills.justified Supported features: nohilite
      • bootstrap3.pager Supported features: nohilite
      • bootstrap3.list Supported features: nohilite
      • bootstrap3.navbar Supported features: nohilite
    • OFFSET Number of pixels. When scrolling the element will be centered OFFSET pixels from the top. Solves the problem with fixed-position menu bars that may overlay the target text.
    • MAPPING Level mapping. Ordered array of jQuery selectors identifying which level the heading belongs to. Default: ["h1", "h2", "h3", "h4", "h5", "h6", "*"]
    • OPTIONS Options object. Simple javascript array with following properties:
      • headers same as SELECTOR or JQOBJECT above.
      • callback custom callback function($active) called everytime when TOC item is highlighted upon click or scroll.
      • labeler same as LABELER above.
      • template same as TEMPLATENAME above.
      • offset same as OFFSET above.
      • tocLevels same as MAPPING above.
      • className additional class names to add on the TOC root element.

    Features

    The FEATURES keyword explanation:
    • nohilite - switch highlighting of currently viewed chapter off.
    • collapsible - collapse subchapters in other branches then the current viewed one.
    • nonum - don't use CSS list style numbering.
    • mixed - mixed alpha and numeric numbering style.
    • roman - roman numberig style.
    • alpha - alpha numbering style.
    • disc - use a disc symbol in front of every item.
    • square - use a square symbol in front of every item.

    Related