Format Footnotes with Javascript & CSS

Posted on July 20, 2005

Having read Daring Fireball's post on footnotes in blogs, I thought it shouldn't be that difficult to come up with a css/javascript solution.

Here's the result.

There are two divs, "content" and "footnotes". "Content" holds the content, "footnotes" is empty. The footnotes are added in-line in span tags (with class="footnote") within the content.

When the button is clicked, the javascript function looks for spans with class "footnote" in the "content" div. It then swaps the text in the span for a superscripted link, and places the footnote in a div within the "footnote" div.

Normally, the function would be called onLoad.

The function can be called for multiple content and footnote divs.

Advantages:

  • You don't have to worry about numbering, for one thing.
  • The footnotes can be edited at their insertion point.
  • You could give users the choice of how footnotes are formatted, or whether they are shown at all.

Disadvantages:

  • Without Javascript, footnotes are left in-line.

Tested on a Mac (Firefox/Safari) and a PC (Firefox/Explorer6).



Comments (19)

Alexw said

Now that is very slick. I could imagine a 'Open footnote'/'Close footnote' button being available in the WYSIWYG editors for the popular CMS's. Nice work.

Posted by: Alexw at July 21, 2005 06:53 AM .

barry said

This _is_ wicked. I love the hide/show feature. You should make an easy to use plugin for moveable type/wordpress, could be quite popular i think. I looked at a few footnote plugins for wordpress but they werent very good. nice code.

Posted by: barry at July 21, 2005 03:42 PM .

Andreas said

Great solution. Inline footnotes are definitely the way to go. I was wondering if it is possible to merge your solution with a CSS3 driven sidenote technique I wrote about a while ago (http://andreas.web-graphics.com/footnotes/ ). Sidenotes don't require you to jump up and down on the page all the time...

Posted by: Andreas at July 24, 2005 10:47 PM .

timg said

For a sidenotes version, see the next entry: http://www.brandspankingnew.net/archive/2005/07/css_footnotes_r.html

Posted by: timg at July 25, 2005 10:53 AM .

Dr. ZAx said

I just came across this post via IfElse. I just thought I'd stick in a mention for a WordPress plugin I wrote last month to do exactly this.

Footnotes plugin for WordPress It does add an open/close footnote button in the post writing/editing screen.

I like your solution though, it's very cool. The only advantage I see to mine is that it won't fall over without javascript.

Simon.

Posted by: Dr. ZAx at August 13, 2005 07:49 AM .

Dr. ZAx said

And it's a pitty you stripped all my HTML there. This is where I found your site:

http://ifelse.co.uk/archives/2005/08/13/footnotes-using-css-and-js/

And this is where you can get a Footnotes plugin for WordPress:

http://www.elvery.net/drzax/index.php/2005/07/29/new-wordpress-plugin-footnotes/

Cheers,
Simon

Posted by: Dr. ZAx at August 13, 2005 08:01 AM .

Hatem said

Great feature, I just try it on my blog, it just need some changes to make it suitable when it display list of articles (like home page).

Posted by: Hatem at August 13, 2005 11:30 AM .

muljono said

Materi bagus.
Brilian sekali!

Posted by: muljono at July 15, 2006 05:30 AM .

minah said

no comments....

Posted by: minah at July 16, 2006 01:00 PM .

santosh said

Nice site good job

Posted by: santosh at September 24, 2006 05:51 AM .

cokarabesk said

duder, nice work.

Posted by: cokarabesk at January 21, 2007 09:44 PM .

polarizer said

Nice stuff man. Thank u 4 sharing. To "correct" the javascript bug you may want play with "display:none" or "visibity:hidden" as standard style and make footnotes visible with the javascript?!

polarizers 2 cent

Posted by: polarizer at February 1, 2007 10:46 AM .

dankos said

thanks duder.

Posted by: dankos at April 10, 2007 01:25 PM .

CodeBit.cn said

good job!
thanks !

Posted by: CodeBit.cn at April 23, 2007 09:27 AM .

Tapas Biswal said

Dear Sir,

Please tell me 2 question's answer.

1. How to create a time format in javascript.
2. please send me some code of status bar murquee of javascript.


Regards
Tapas Biswal
Kalingasoft
Bhubaneswar
Orrissa

Posted by: Tapas Biswal at July 2, 2007 07:00 AM .

bsn said

@Tapas


ha ha ha

Posted by: bsn at July 2, 2007 09:17 AM .

wheaet said

This is a very elegant solution. It's perfect for the online lectures I'm currently revising, letting me quickly define terms w/o interrupting the flow of the text. Nice work. Thanks for sharing it.

Posted by: wheaet at November 27, 2007 04:49 AM .

Luke said

How can I generate the footnotes when the page is loaded, instead of requiring the user to press a button?

Posted by: Luke at December 1, 2007 04:17 AM .

Mark B. said

Flippin' BRILL! Pure genius. :)

Luke, your answer is waiting at CSScreator.

Posted by: Mark B. at December 1, 2007 04:36 AM .