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 .
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 .
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 .
