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
The script parses all
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).
Keith Free Ellis said
Posted by: Keith Free Ellis at January 26, 2006 05:39 PM .
Perhaps a silly question, but how can they be accessed from the keyboard?
Posted by: Henning at January 26, 2006 06:55 PM .
@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.
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 .
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 .
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 .
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 .
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:
Posted by: Muninn at February 27, 2006 02:08 PM .
how about adding an image gif to the test [back] as well?
Posted by: Ed at June 6, 2006 04:06 PM .
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!
Posted by: vanni at March 22, 2007 06:22 PM .
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 .
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 .
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 .
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 !
Posted by: CodeBit.cn at May 8, 2007 04:40 AM .
Posted by: Chris at June 19, 2007 08:49 PM .
Hi i would like to know how the replace an element by the "newElem" that contains the note number.
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 .