Posted By

TALlama on 03/21/08


Tagged

prototype footnote crossreference


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

SpinZ
wizard04
hans


Javascript Footnote Creator


 / Published in: JavaScript
 

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.

  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  

You need to login to post a comment.