TOCit! Bookmarklet

Add a Table of Contents to any page in the form of a drop down at the bottom of the browser window.
This script is very nice to have when you are on a loooong web page (like a spec or something) and need a Table of Contents.

Source (blog.runeskaug.com)

Download Bookmarklet:

(How do I add this bookmarklet to my browser?)

TOCit!

View Bookmarklet Code:

[Edit Javascript]

Show Source Code

Bookmarklet Source Code:

javascript%3Avar%20fullTOCText%3D%2522Table%20of%20Contents%2522%3Bvar%20hideBtnText%3D%2522%5Cu00a0X%5Cu00a0%2522%3Bvar%20RXmatch%3D/%5Eh%5B1-4%5D%24/i%3Bvar%20XPmatch%3D%2522//h1%7C//h2%7C//h3%7C//h4%2522%3Bvar%20resetSelect%3Dtrue%3Bvar%20showHide%3Dtrue%3Bvar%20useCookie%3Dtrue%3Bvar%20addMenuItem%3Dtrue%3Bfunction%20f%28%29%20%7B%20if%20%28document.getElementsByTagName%28%2522html%2522%29.length%20%26%26%20%28%20document.getElementsByTagName%28%27h1%27%29.length%20%7C%7C%20document.getElementsByTagName%28%27h2%27%29.length%20%7C%7C%20document.getElementsByTagName%28%27h3%27%29.length%20%7C%7C%20document.getElementsByTagName%28%27h4%27%29.length%20%29%20%26%26%20%28%21useCookie%20%7C%7C%20%28useCookie%20%26%26%20getCookie%28%27autotoc_hide%27%29%21%3D%27true%27%29%29%29%20%7B%20var%20aHs%3DgetHTMLHeadings%28%29%3Bif%20%28aHs.length%3E1%29%20%7B%20var%20body%3Ddocument.getElementsByTagName%28%27body%27%29%5B0%5D%3Bbody.style.marginBottom%3D%252224px%20%21important%2522%3BaddCSS%28%20%27@media%20print%20%7B%20%23js-toc%20%7Bdisplay%3A%20none%3Bvisibility%3A%20hidden%3B%7D%7D%5Cn%27+%20%27@media%20screen%20%7B%20%23js-toc%20%7Bposition%3A%20fixed%3Bleft%3A%200%3Bright%3A%200%3Btop%3A%20auto%3Bbottom%3A%200%3Bwidth%3A%20100%25%3Bdisplay%3A%20block%3Bborder-top%3A%201px%20solid%20%23777%3Bbackground%3A%20%23ddd%3Bmargin%3A%200%3Bpadding%3A%203px%3Bz-index%3A%209999%3B%7D%5Cn%27+%20%27%23js-toc%20select%20%7B%20font%3A%208pt%20verdana%2C%20sans-serif%3Bmargin%3A%200%3Bmargin-left%3A5px%3Bbackground%3A%20%23fff%3Bcolor%3A%20%23000%3Bfloat%3A%20left%3Bpadding%3A%200%3Bvertical-align%3A%20bottom%3B%7D%5Cn%27+%20%27%23js-toc%20option%20%7B%20font%3A%208pt%20verdana%2C%20sans-serif%3Bcolor%3A%20%23000%3B%7D%5Cn%27+%20%27%23js-toc%20.hideBtn%20%7B%20font%3A%20bold%208pt%20verdana%2C%20sans-serif%20%21important%3Bfloat%3A%20left%3Bmargin-left%3A%202px%3Bmargin-right%3A%202px%3Bpadding%3A%201px%3Bborder%3A%201px%20solid%20%23999%3Bbackground%3A%20%23e7e7e7%3B%7D%5Cn%27+%20%27%23js-toc%20.hideBtn%20a%20%7B%20color%3A%20%23333%3Btext-decoration%3A%20none%3Bbackground%3A%20transparent%3B%7D%20%23js-toc%20.hideBtn%20a%3Ahover%20%7B%20color%3A%20%23333%3Btext-decoration%3A%20none%3Bbackground%3A%20transparent%3B%7D%7D%27%20%29%3Bvar%20toc%3Ddocument.createElement%28window.opera%7C%7CshowHide%3F%27tocdiv%27%3A%27div%27%29%3Btoc.id%3D%27js-toc%27%3Bif%20%28showHide%29%20%7B%20var%20hideDiv%3Ddocument.createElement%28%27div%27%29%3BhideDiv.setAttribute%28%27class%27%2C%27hideBtn%27%29%3Bvar%20hideLink%3Ddocument.createElement%28%27a%27%29%3BhideLink.setAttribute%28%2522href%2522%2C%2522%23%2522%29%3BhideLink.setAttribute%28%2522onclick%2522%2C%2522document.getElementById%28%27js-toc%27%29.style.display%3D%27none%27%3B%2522%29%3BhideLink.appendChild%28document.createTextNode%28hideBtnText%29%29%3BhideDiv.appendChild%28hideLink%29%3Btoc.appendChild%28hideDiv%29%3B%7D%20tocSelect%3Ddocument.createElement%28%27select%27%29%3BtocSelect.setAttribute%28%2522onchange%2522%2C%20%2522if%28this.value%29%7Bfunction%20flash%28rep%2Cdelay%29%20%7B%20for%20%28var%20i%3Drep%3Bi%3E0%3Bi--%29%20%7Bwindow.setTimeout%28%27el.style.background%3D%5C%2522%23ff7%5C%2522%3B%27%2Cdelay*i*2%29%3Bwindow.setTimeout%28%27el.style.background%3Delbg%27%2Cdelay*%28%28i*2%29+1%29%29%3B%7D%3B%7D%3Belid%3Dthis.value%3Bel%3Ddocument.getElementById%28elid%29%3Belbg%3Del.style.background%3Blocation.href%3D%27%23%27+elid%3Bflash%285%2C100%29%3B%2522+%28resetSelect%3F%2522this.selectedIndex%3D0%3B%7D%2522%3A%2522%7D%2522%29%29%3BtocSelect.id%3D%27toc-select%27%3BtocEmptyOption%3Ddocument.createElement%28%27option%27%29%3BtocEmptyOption.setAttribute%28%27value%27%2C%27%27%29%3BtocEmptyOption.appendChild%28document.createTextNode%28fullTOCText%29%29%3BtocSelect.appendChild%28tocEmptyOption%29%3Btoc.appendChild%28tocSelect%29%3Bdocument.body.appendChild%28toc%29%3Bfor%20%28var%20i%3D0%2CaH%3BaH%3DaHs%5Bi%5D%3Bi++%29%20%7B%20if%20%28aH.offsetWidth%29%20%7B%20op%3Ddocument.createElement%28%2522option%2522%29%3Bop.appendChild%28document.createTextNode%28gs%28aH.tagName%29+getInnerText%28aH%29.substring%280%2C100%29%29%29%3Bvar%20refID%3DaH.id%20%3F%20aH.id%20%3A%20aH.tagName+%27-%27+%28i*1+1%29%3Bop.setAttribute%28%2522value%2522%2C%20refID%29%3Bdocument.getElementById%28%2522toc-select%2522%29.appendChild%28op%29%3BaH.id%3DrefID%3B%7D%7D%20%7D%7D%20%7D%3Bfunction%20autoTOC_toggleDisplay%28%29%20%7B%20if%20%28document.getElementById%28%27js-toc%27%29%29%20%7B%20if%20%28document.getElementById%28%27js-toc%27%29.style.display%20%3D%3D%20%27none%27%29%20%7B%20document.getElementById%28%27js-toc%27%29.style.display%3D%27block%27%3Bif%20%28useCookie%29%20%7Bdocument.cookie%3D%27autotoc_hide%3D%3Bpath%3D/%27%3B%7D%7D%20else%20%7B%20document.getElementById%28%27js-toc%27%29.style.display%3D%27none%27%3Bif%20%28useCookie%29%20%7Bdocument.cookie%3D%27autotoc_hide%3Dtrue%3Bpath%3D/%27%3B%7D%7D%3B%7D%20else%20%7B%20if%20%28useCookie%29%20%7Bdocument.cookie%3D%27autotoc_hide%3D%3Bpath%3D/%27%3B%7D%20f%28%29%3B%7D%7D%20function%20getHTMLHeadings%28%29%20%7B%20function%20acceptNode%28node%29%20%7B%20if%20%28node.tagName.match%28RXmatch%29%29%20%7B%20if%20%28node.value+%27%27%21%3D%27%27%29%20%7B%20return%20NodeFilter.FILTER_ACCEPT%3B%7D%7D%20return%20NodeFilter.FILTER_SKIP%3B%7D%20outArray%3Dnew%20Array%28%29%3Bif%20%28document.evaluate%29%20%7B%20var%20nodes%3Ddocument.evaluate%28XPmatch%2C%20document%2C%20null%2C%20XPathResult.ANY_TYPE%2C%20null%29%3Bvar%20thisHeading%3Dnodes.iterateNext%28%29%3Bvar%20j%3D0%3Bwhile%20%28thisHeading%29%20%7B%20if%20%28thisHeading.textContent+%27%27%21%3D%27%27%29%20%7B%20outArray%5Bj++%5D%3DthisHeading%3B%7D%20thisHeading%3Dnodes.iterateNext%28%29%3B%7D%7D%20else%20%7B%20var%20els%3Ddocument.getElementsByTagName%28%2522*%2522%29%3Bvar%20j%3D0%3Bfor%20%28var%20i%3D0%2Cel%3Bel%3Dels%5Bi%5D%3Bi++%29%20%7B%20if%20%28el.tagName.match%28RXmatch%29%29%20outArray%5Bj++%5D%3Del%3B%7D%7D%20return%20outArray%3B%7D%20function%20addCSS%28css%29%20%7B%20var%20head%2C%20styleLink%3Bhead%3Ddocument.getElementsByTagName%28%27head%27%29%5B0%5D%3Bif%20%28%21head%29%20%7B%20return%3B%7D%20styleLink%3Ddocument.createElement%28%27link%27%29%3BstyleLink.setAttribute%28%27rel%27%2C%27stylesheet%27%29%3BstyleLink.setAttribute%28%27type%27%2C%27text/css%27%29%3BstyleLink.setAttribute%28%27href%27%2C%27data%3Atext/css%2C%27+escape%28css%29%29%3Bhead.appendChild%28styleLink%29%3B%7D%20function%20gs%28s%29%7B%20s%3Ds.toLowerCase%28%29%3Bvar%20ret%3D%2522%2522%3Bfor%20%28var%20i%3D1%3Bi%3C%28s.substring%281%29*1%29%3Bi++%29%20%7B%20ret%3Dret%20+%20%2522%5Cu00a0%20%5Cu00a0%20%2522%3B%7D%20return%20ret%3B%7D%20function%20getInnerText%28el%29%20%7B%20var%20s%3D%27%27%3Bfor%20%28var%20i%3D0%2Cnode%3Bnode%3Del.childNodes%5Bi%5D%3Bi++%29%20%7B%20if%20%28node.nodeType%20%3D%3D%201%29%20s%20+%3D%20getInnerText%28node%29%3Belse%20if%20%28node.nodeType%20%3D%3D%203%29%20s%20+%3D%20node.nodeValue%3B%7D%20return%20s%3B%7D%20function%20getCookie%28cname%29%20%7B%20%20var%20namesep%3Dcname%20+%20%2522%3D%2522%3B%20var%20ca%3Ddocument.cookie.split%28%27%3B%27%29%3B%20for%28var%20i%3D0%2C%20c%3Bc%3Dca%5Bi%5D%3Bi++%29%20%20%7B%20%20%20c%3Dc.replace%28/%5E%5Cs*%7C%5Cs*%24/g%2C%2522%2522%29%3B%20%20if%20%28c.indexOf%28namesep%29%20%3D%3D%200%29%20%7B%20%20%20return%20c.substring%28namesep.length%2Cc.length%29%3B%20%20%7D%20%20%7D%20%20return%20null%3B%7D%20f%28%29%3B

Rate it:

Tags:

Table of Contents readability