Margin note.js Demo

This is a simple demo for a jQuery that tries to adapt margin notes to the web while 'being true' to their ink and paper cousins. Just as I did for footnotes. It adds two wrappers, in this manner:

[ [ margin notes section ] main text section ]

Both wrappers are flexbox containers, with the margin_notes_section displaying in columns, while the main one displays the margin notes section and the main text section in a row.

Credit, were credit is due, I took inspiration from Francisco Dans, which works slightly different and it's ready for production.

The famous Lorem Ipsum, now with margin notes!

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. Duis aute irure dolor in reprehenderit in voluptate velit esse 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Javascript


$(document).ready(function() {
const MARGIN_NOTE_FRAME = 
"<span class='margin_note_content' id='yyy'>xxx</span>";

$(".margin_note_call").mouseenter(function(event) {
event.preventDefault();

// check if there is a flex wrapper
if ($(this).parent().hasClass('ahoy')) 
//ahoy class added to parent when we insert the first margin note
{
//
} else {
$(this).parent().wrap("
"); //wrap p in div $(this).parent().parent().prepend("
"); //add margin note section to wrapper, before paragraph //append would result in notes placed on the right margin } var margin_note_id = 'mn_' + $(this).attr('id'); // the margin note id is built // prepending mn_ to the call's id // check if our margin note is _not_ inserted if ( $('#' + margin_note_id).length === 0 ) { // this margin note is not inserted // so let's insert it now var margin_content = $(this).attr('desc'); // margin note content in desc // attribute of the margin note call var $margin_note = MARGIN_NOTE_FRAME.replace('xxx',margin_content).replace('yyy',margin_note_id); // we get our final margin note element // <span class='margin_note_content' id='mn_someId'> // my margin note content // </span> $(this).parent().addClass('ahoy'); // we now add the class 'ahoy' to the paragraph $(this).parent().parent().children(".margin_note_section").append($margin_note); // we append the margin note to // the margin note section } else { // if the margin note was in place // we remove it $('#' + margin_note_id).remove(); // let's check whether there are // no margin notes left // in the section if ( $(this).parent().parent().children('.margin_note_section').children().length === 0 ){ // there are none, // so let's remove them $(this).parent().parent().children('.margin_note_section').remove(); $(this).parent().unwrap("
"); $(this).parent().removeClass('ahoy'); // also remove this class } } }); });

CSS


.margin_note_call {
	border-bottom: thick dotted white;
	padding: 0 .3em;
	cursor: help;
}

.margin_note_content {
	font-size: 0.8em;
	padding: 1em 0;
	border-bottom: thin dotted white;
	width: 100px; 
	// suggested value looks OK in most screens
	// or better, do media queries
}

.margin_note_wrapper {
	display: flex;
	justify-content: space-between;	
}

.margin_note_section {
	display: flex;
	//justify-content: space-around;
	flex-direction: column;	
}

.ahoy {
	margin-left: 1em;
	padding-left: 1em;	
}

HTML


<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script><!--jquery-->
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><!--jquery-->
<script src="../js/margin_note.js"></script><!-- marginnote -->

<p> <!-- only tested on paragraphs -->
Lorem ipsum dolor sit amet, 

<span class="margin_note_call" desc="labore humanum est" id="labore">
labore
</span>

Ut enim ad minim veniam.
</p>

Last update: 2016/04/16