Full version: jsB@nk » Misc » Format Footnotes
URL: https://www.javascriptbank.com/format-footnotes.html
Arrange your footnotes in a format that is easy-to-read and navigate. This JavaScript makes it easy for your readers to return to where they were in the document.
Full version: jsB@nk » Misc » Format Footnotes
URL: https://www.javascriptbank.com/format-footnotes.html
<style type="text/css">/* footnotes as they original appear inline, before reformatting */#content span.footnote { color: #f30;}/* footnote links in text */#content a.ftnlink { vertical-align: super; font-size: 0.8em;}/* div to hold all reformatted footnotes */.footnoteholder { border-left: 1px solid #ccc; margin: 20px 0 50px 0; padding: 20px 10px; font-size: 0.8em; line-height: 1.2em;}/* div to hold single reformatted footnote */.footnoteholder div.footnote { margin: 0 0 10px 0;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript">// Created by: Timothy Groves :: http://www.brandspankingnew.net//* The script parses all spans with class="footnote" within the element with id="article1", and lists them in the element with id="artnotes1". Check the CSS to see how the footnotes are styled. */var articles = 0;function formatFootnotes(contID,noteID) { // check for DOM capabilities if (!document.getElementById) return false; var cont = document.getElementById(contID); var noteholder = document.getElementById(noteID); var spans = cont.getElementsByTagName("span"); var notes = 0; articles++; for (i=0;i<spans.length;i++) { if (spans[i].className == "footnote") { notes++; // get content of span var noteNode = spans[i].cloneNode(true); // remove css styling noteNode.className = ""; // create a new div to hold the footnote var newEle = document.createElement("div"); newEle.appendChild( document.createTextNode(notes + ". ") ); newEle.appendChild( noteNode ); // add backlink blink = document.createElement("a"); blink.href = "#ftnlink"+articles+"_"+notes; blink.appendChild( document.createTextNode(" [back]") ); newEle.appendChild( blink ); noteholder.appendChild( newEle ); // add id & style noteholder.lastChild.id = "ftn"+articles+"_"+notes; noteholder.lastChild.className = "footnote"; // insert link into span var newEle = document.createElement("a"); newEle.href = "#"+noteID; newEle.title = "show footnote"; newEle.id = "ftnlink"+articles+"_"+notes; newEle.className = "ftnlink"; newEle.appendChild( document.createTextNode(notes) ); // empty span while (spans[i].childNodes.length) spans[i].removeChild( spans[i].firstChild ); spans[i].appendChild( newEle ); } }}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="content" style="text-align: left;"><div id="article1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span class="footnote">This is a footnote.</span> Integer accumsan placerat magna. Duis tincidunt adipiscing mi. Mauris tincidunt, ante nec mollis consequat, nibh lectus consectetuer massa, vitae vestibulum nisl nunc dapibus sem. <span class="footnote">Sed molestie. In nibh risus, aliquet in, sodales id, imperdiet sit amet, risus.</span>, laoreet non, ligula. Suspendisse malesuada tincidunt tortor. Curabitur sagittis tristique diam. Cras sem wisi, tincidunt et, condimentum id, aliquam sed, velit. <span class="footnote">Praesent porta, odio ac commodo pulvinar, wisi risus interdum tellus, vel facilisis nunc sem et elit. Curabitur placerat interdum felis.</span> Facilisis sit amet, iaculis ut, tristique vulputate, lorem. Vivamus pretium diam sed neque.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p></div><div id="artnotes1" class="footnoteholder"></div><script type="text/javascript"> formatFootnotes('article1','artnotes1');</script></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->