Advanced Search

Javascript Footnote Creator

/ Published in: JavaScript
Save to your folder(s)
Finds footnotes and adds them to a list. Just put "footnote" into the class of an element, and it'll automatically pull it out of context, replace it with a reference link, put the footnote into the list with id 'notes', and include a backreference so that your readers don't get lost. Embedded markup and nested footnotes work fine. Everything has CSS classes, so you can style it to your heart's content. Requires Prototype.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. var Footnote = Class.create({
  2. 	initialize: function(element) {
  3. 		var notes = this.findNotes();
  4. 		var number = notes.select('li').length + 1;
  5.  
  6. 		var ref = document.createElement('a');
  7. 		ref.className = 'footnote-reference';
  8. 		ref.href = '#footnote-' + number;
  9. 		ref.id = 'reference-' + number;
  10. 		ref.appendChild(document.createTextNode(number));
  11. 		element.parentNode.insertBefore(ref, element);
  12.  
  13. 		$(element).removeClassName('footnote')
  14.  
  15. 		var li = document.createElement('li');
  16. 		li.className = 'footnote';
  17. 		li.id = 'footnote-' + number;
  18. 		li.appendChild(element);
  19.  
  20. 		var backref = document.createElement('a');
  21. 		backref.className = 'footnote-backreference';
  22. 		backref.href = '#reference-' + number;
  23. 		backref.appendChild(document.createTextNode("\u21A9"));
  24. 		li.appendChild(document.createTextNode(" "));
  25. 		li.appendChild(backref)
  26.  
  27. 		notes.appendChild(li);
  28. 	},
  29. 	findNotes: function() {
  30. 		return $('notes');
  31. 	}
  32. });
  33.  
  34. Event.observe(window, 'load', function() {
  35. 	$$('.footnote').each(function(e) {new Footnote(e)});
  36. })

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.