Tech Support Section Home Mekong Network Home
About This Site...
Mekong.Net Sites...
Recently Updated...
Recommended Links...
Contact Us...
Questions? Comments? Requests? Click here to contact us.

A Javascript for Managing Footnotes

From time to time, I'll write a grotesquely long, boring article on some arcane subject, and to make it look even more dull and uninviting, I'll cram it full of footnotes.Strictly speaking, it would be more accurate to describe them as end notes. But you get the idea.

After laboriously writing two such articles and manually inserting hyperlinks to the footnotes, and painstakingly numbering each and every footnote, I realized that there had to be a better way.The first two articles I wrote, with the footnotes inserted manually, were a critique of Noam Chomsky, and an analysis of estimates of the death toll from the Khmer Rouge regime in Cambodia.

This realization was driven home vividly when I discovered that I needed an additional footnote between notes 41 and 42... which meant that I suddenly need to relabel every one of the sixty-four footnotes that came after the one I left out. Ouch.

I'm sure that several tools probably have some method of managing footnotes built in... but I didn't want to have to switch to a different tool. I like my tiny little Notetab Light editor just fine, thank you, and I have no intention of changing to something else.Notetab is a fantastic text editor, ideal for working with HTML. It's available from http://www.notetab.com/. Since Notetab allows you to create custom tags, I was able to create a "clip" that pops open a text box which lets me enter the desired footnote text; then I click "OK" and it inserts the necessary HTML into the document.

It occurred to me that I could probably use Javascript to assign the numbers to the footnotes... and then it occurred to me that someone else had probably already thought of that, and had probably already written a script to do it.

A quick Google search led me to a terrific script by the good folks at brandspankingnew.net. Their solution was light-years better than what I had envisioned; not only did it number the footnotes dynamically, it allowed you to embed the text for each footnote into the document, right next to the text you were annotating. For me, this was a godsend: it made it wonderfully simple to keep the right source notes with the right text.

I highly recommend the Brandspankingnew version of the script, which is available at http://www.brandspankingnew.net/archive/2006/01/footnotes-with-css-and-javascript.html.Actually, I apparently came across an older version of the script, without realizing that it had been updated. The version I used was here: http://www.brandspankingnew.net /archive/2006/01/footnotes-with-css-and-javascript.html

I made a few very simple modifications to the script; BSN's original version had required you to click a button to display the footnotes, and I had no interest in concealing them. And as a firm believer in keeping things simple, simple, simple, I edited out a few styles that were not necessary for the script to actually function. Finally, the original version of the script had added a "back" link after each footnote; instead of that, I simply linked the number of the footnote back to the source text.

So why did I bother creating this page, when the people at Brand Spanking New already have a more powerful version? Two reasons: one is that this slightly simplified version is easier for non-programmers (like me) to understand and adapt; and the other is that by putting a page on my site, I know where to go when I need to do this same thing again. I don't have wade through a bunch of Google results, trying to remember which script was the one I actually wound up using.

If you want to see the script itself, you can view the source code of this page. You'll need to do just a couple things to adapt it for your own pages: first, copy the javascript itself; then add the necessary "div" elements to your page,The containers I am using are "annotated_text" and "footnotes." If you change those names, you'll need to change the parameters of the onload event in the body tag.

and then add the necessary "onload" event to the body tag.

I could easily stop writing at this point, but I suppose it might make it easier to see the way the script actually functions if there is more text on the page. Since more text would be a good thing, I might as well add a link to the article was working on when I first discovered the BSN script: It's a review of the work of Michelle Malkin. Malkin, in case you don't know, is... well... she's...

Oh, hell, just read the article. Then you decide what she is.OK, I know that "analyzing" Malkin is kinda like "analyzing" the collective wit of the Brady Bunch kids. Still, she's prolific enough that she's overdue for a reality check.