Posted By

TALlama on 03/21/08

Tagged

Versions (?)

Last Edited at 03/21/08 07:11pm

Statistics

Viewed 349 times

Favorited by 1 user(s)

Related snippets

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.

Highlighted TextExpand

var Footnote = Class.create({
	initialize: function(element) {
		var notes = this.findNotes();
		var number = notes.select('li').length + 1;
	
		var ref = document.createElement('a');
		ref.className = 'footnote-reference';
		ref.href = '#footnote-' + number;
		ref.id = 'reference-' + number;
		ref.appendChild(document.createTextNode(number));
		element.parentNode.insertBefore(ref, element);
		
		$(element).removeClassName('footnote')
		
		var li = document.createElement('li');
		li.className = 'footnote';
		li.id = 'footnote-' + number;
		li.appendChild(element);
		
		var backref = document.createElement('a');
		backref.className = 'footnote-backreference';
		backref.href = '#reference-' + number;
		backref.appendChild(document.createTextNode("\u21A9"));
		li.appendChild(document.createTextNode(" "));
		li.appendChild(backref)
		
		notes.appendChild(li);
	},
	findNotes: function() {
		return $('notes');
	}
});
		
Event.observe(window, 'load', function() {
	$$('.footnote').each(function(e) {new Footnote(e)});
})

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.