#TOC
TOC is a jQuery plugin that will automatically generate a table of contents for your page. You can see an example of it on the left side of the page.
##Features
##Download
##Usage
`javascript $('#toc').toc();
###Options Defaults shown below
`javascript $('#toc').toc({ 'selectors': 'h1,h2,h3', //elements to use as headings 'container': 'body', //element to find all selectors in 'smoothScrolling': true, //enable or disable smooth scrolling on click 'prefix': 'toc', //prefix for anchor tags and class names 'onHighlight': function(el) {}, //called when a new section is highlighted 'highlightOnScroll': true, //add class to heading that is currently in focus 'highlightOffset': 100, //offset to trigger the next headline 'anchorName': function(i, heading, prefix) { //custom function for anchor name return prefix+i; }, 'headerText': function(i, heading, $heading) { //custom function building the header-item text return $heading.text(); }, 'itemClass': function(i, heading, $heading, prefix) { // custom function for item class return $heading[0].tagName.toLowerCase(); } });
##Example CSS
`css #toc { top: 0px; left: 0px; height: 100%; position: fixed; background: #333; box-shadow: inset -5px 0 5px 0px #000; width: 150px; padding-top: 20px; color: #fff; } #toc ul { margin: 0; padding: 0; list-style: none; } #toc li { padding: 5px 10px; } #toc a { color: #fff; text-decoration: none; display: block; } #toc .toc-h2 { padding-left: 10px; } #toc .toc-h3 { padding-left: 20px; } #toc .toc-active { background: #336699; box-shadow: inset -5px 0px 10px -5px #000; }
##History
##Future
##Contributors