Footnotes with CSS and Javascript - the final word

Posted on January 26, 2006

I've finally got around to writing the definitive version of the footnotes script I wrote in 2005.

There were a number of issues raised that I've resolved in this (probably final) version:

  • Footnote links accessible from the keyboard
  • Inline HTML works in footnotes (images, links, emphasis, etc.)
  • Separate footnote formatting for multiple articles on one page

Here's the demo of the FINAL VERSION. The javascript can be downloaded below.

Download javascript source

The script is called by embedding the following javascript function calls at the end of the document. (In older versions the function was called by pressing a button, to show the workings of the script better. This is a more "real-world" implementation.)

<script type="text/javascript">
	formatFootnotes('article1','artnotes1');
	formatFootnotes('article2','artnotes2');
</script>

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 in the demo to see how the footnotes are styled.

There is also an updated sidenotes version (note: it only works for one article per page).



Comments (15)

Keith Free Ellis said

This is great. I'm slowly getting my feet wet with javascript again and this is exectly what I needed to find this morning! Thanks!!

Posted by: Keith Free Ellis at January 26, 2006 05:39 PM .

Henning said

Perhaps a silly question, but how can they be accessed from the keyboard?

Posted by: Henning at January 26, 2006 06:55 PM .

tim said

@Henning - The problem with the original version was that I left the original span as it was and attached an onclick handler to it, which meant that a user only using the keyboard to access the page wouldn't have been able to activate the links, because tabbing only highlights anchor tags and form elements, not spans.

This time I went to the trouble of attaching a real anchor tag ('#') using the DOM, and set the javascript function to return a boolean false to prevent the link actually being activated, which causes the page to jump around because the browser wants to jump to a named anchor (at least some browsers do).

Safari, by default, only tabs to form fields - you have to activate "Press tab to activate each item on a webpage" in the advanced preferences. I'm not sure about other browsers, I think explorer has tabbed browser active by default.

Posted by: tim at January 26, 2006 09:05 PM .

Henning said

Thanks for the explanation. I don't like to tab each item on a page, so I leave it deactivated. I just thought when I read it that you can access the footnotes via accesskeys or something similar (like in Gmail). So that you could type 1 for the first footnote and 2 for the second. But I don't know whether this would be useful.

Posted by: Henning at January 27, 2006 05:18 PM .

tim said

It would be possible, but it might conflict with access keys already set for the page/site, for example the UK government has designated the following access keys in an attempt to create a standard:

S - Skip navigation
1 - Home page
2 - What's new
3 - Site map
4 - Search
5 - Frequently Asked Questions (FAQ)
6 - Help
7 - Complaints procedure
8 - Terms and conditions
9 - Feedback form
0 - Access key details

Posted by: tim at January 27, 2006 05:51 PM .

Jegindø said

This looks great. Is there anyway I can use this with wordpress, and if so how?

Posted by: Jegindø at February 9, 2006 08:46 PM .

Muninn said

Fantastic! Thanks so much for sharing this with everyone! I think I have this working for Wordpress, and explained how I did it at my own weblog:

http://muninn.net/blog/2006/02/footnotes-for-weblogs-revisited.html

Posted by: Muninn at February 27, 2006 02:08 PM .

Ed said

how about adding an image gif to the test [back] as well?

Posted by: Ed at June 6, 2006 04:06 PM .

vanni said

Wow! This something that I can really use with my new project... one article that i am working on has 50 footnotes, and this will help in moving around 'tween article and footnote...easily. well done and many thanks!
PS any way that one can automate the workflow in adding 50 or > footnotes to the javascript? (ie to make it work with all the tags etc.)

Posted by: vanni at March 22, 2007 06:22 PM .

vanni said

I have a very long book to do. i will be breaking it up into articles on ONE page. Can i have this script work if i use the ONE article i.e i have this code: [formatFootnotes('article1','artnotes1');]

for each article... that is i don't have to keep adding 'article1' 'article2' 'article3'
'article4' ...etc. any insights appreciated.

Posted by: vanni at March 23, 2007 12:33 AM .

vanni said

me again: any notion on how we can add utf-8 code to the [back ↩] option in the js? i tried adding in various ways without success. "& # 8 6 1 7;" I broke up the utf string so it wil lshow herein ;-)

Posted by: vanni at March 23, 2007 05:16 PM .

vanni said

Hi,,, someone suggested thsi and it worked...
Just use the Unicode escape sequence :

blink.appendChild( document.createTextNode( " [ back \u21a9 ] " ) );

Posted by: vanni at March 24, 2007 05:36 AM .

CodeBit.cn said

I'am a Chinese, Please forgive me for my poor English.

I've build a script base on your technique. Please take a look , Thanks !

http://www.codebit.cn/temp/footnote.html

Posted by: CodeBit.cn at May 8, 2007 04:40 AM .

Chris said

Can anyone out there tell me if something like this can be implimented in Blogger? I'm able to use other javascript code in my template (I use some, for example, to create expandable text blocks in individual posts), but it seems the footnoting code needs certain template elements passed to it for it to work. Blogger has, I think, the elements I would need, but I'm not sure how to incorporate them into the script. Any help with a Blogger implementation would be appreciated!

Posted by: Chris at June 19, 2007 08:49 PM .

dimitri said

Hi i would like to know how the replace an element by the "newElem" that contains the note number.

exemple-----------------------------------+
The House of Wine welcomes you, and invite you to discover the vineyards bal bla bla lba blablabla lablablalbalblalbalblalblaVineyard information centre with presentation of the AOC wines, discovery-testing and sale of a wide of wine form an annual selection.
-------------------------------------------+

I'm using XML for a book so i would like to replace the element but the "newElem" that contains the note.

Thanks for your help.

Posted by: dimitri at September 10, 2007 09:52 PM .