jquery.toc.js
jquery.toc.js , an automatic table of contents script, which uses jquery. there is no css, for this, you will have the option to style it the way you want it.
The Table of Content will be put in the article tag, including tocbutton. You can change that by renaming the article tag to anything you want: body, div, span etc. Jquery allows selectors, such as div#toc, div.toc.
-
$("article").prepend(index); - and also the tocbutton:
-
$("article").prepend(tocbutton);
When you don't want to display the ToC anymore, press the tocbutton: [-]. Nothing is display: none; but .remove();, or .removeAttr. It will remove the added id= to the headers, and the Table Of Content itself. and add the tocbutton: [+].
jquery.toc.full.js
This has all the style needed and will load them in a style tag in the
head. When the tocbutton is clicked [+], it will add the needed css files and apply id's to the headers. When you click the tocbutton [-] it will remove everything, not onclick display: none; but onclick .remove();. or removeAttr, it cleans itself completely.
Browser support
This script is writen with the help of Jquery, so when when it comes to browsers support:
Both versions 1.x and 2.x of jQuery support "current-1 versions" (meaning the current stable version of the browser and the version that preceded it) of Firefox, Google Chrome, Safari, and Opera. Version 1.x also supports Internet Explorer 6 or higher. However, jQuery version 2.x dropped Internet Explorer 6–8 support (which represents less than 28% of all browsers in use) and supports only IE 9 and later versions. jQuery #Browser support - Wikipedia, the free encyclopedia.
- Mozilla Firefox √
- Google Chrome √
- Opera √
- Safari √
- Internet Explorer √
Internet Explorer
Tested it in IE8, no problems encountered.
Paragraphs support
I'm working on a more detailed jquery.toc.js, that includes paragraph support. In the future maybe more, if i can find out a way to incorporate them properly!
Double headers names
Double headers are not supported and not recommended!
body not body onload="onLoad()"
If you edited the .prepend section, then you need to be exact. So, if typ in the body tag, it will search for exactly that, not <body onload="Onload">.