Footnotes.js Demo

This is a simple demo for a jQuery that tries to adapt footnotes to the web while 'being true' to their ink and paper cousins. There is still some tweaking to be done, but I think they are good enough for a start.

The famous Lorem Ipsum, now with footnotes!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis1 aute irure dolor in reprehenderit in voluptate velit esse2 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duisa aute irure dolor in reprehenderit in voluptate velit esseb cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



/* This is the jQuery Code */
$(document).ready(function() {
	const FOOTNOTE_FRAME = "<div class='footnote_content yyy'>xxx</div>";

	$(".fn").click(function(event) {
		event.preventDefault();
		var footnote_id = $(this).attr('href').replace('#','');

		if ( $('[class *= ' + footnote_id + ']').attr('class') == undefined ) {
			var x = $(this).text();
			var footnote_content = x + ': ' + $('[id = ' + footnote_id + ']').html();
			var final_footnote = FOOTNOTE_FRAME.replace("xxx", footnote_content);
			final_footnote = final_footnote.replace('yyy', $(this).attr('href'));
			$(this).parent().parent().after( final_footnote );
		}		
	});

	$($("body")).on('click', '.footnote_content', function(event) {
		event.preventDefault();
		$(this).remove();

	});

});

/* This is the Sass code (almost straight CSS)

p + .footnote_content {
	border-top: solid black thick;
	margin-top: 1em;
}

.footnote_content {
	background:$header-background; 
	// #967d69 or rgba(150, 125, 105, 100)
	display:block;
	padding: .1em 1em;
	color: white;
}

.footnote_content + * {
	margin-top: .5em;
}

.footnote_content + .footnote_content {
	margin-top: 0;
} 
//These two add some top margin to anything adjacent but another footnote

aside.footnotes {
	display:none;
}

Last update: 2016/04/13