Easy Side Marginal Note In Vanilla JavaScript – marginotes.js

Preview:

Description:

marginotes.js is a vanilla JavaScript implementation of the JQuery marginotes plugin that displays marginal notes on the left side of your text container.

How to use it:

Download and place the marginotes.js JavaScript library at the end of your html page.

<script src="marginotes.js"></script>

Add your custom marginal notes using element’s desc attribute like this:

<span desc = "Simple Free JavaScript / CSS / CSS3 / HTML5 codes to make your life easier.">CSS Script </span>
<a href="https://cssscript.com" desc = "Simple Free JavaScript / CSS / CSS3 / HTML5 codes to make your life easier.">CSS Script </a>

Initialize the marginotes.js with default options.

marginotes(document.querySelectorAll("a,span"))

Available options.

marginotes(document.querySelectorAll("a,span", {
  // sets the note's width.
  width: 100,
  // sets the html attribute to look for
  field: 'desc'
  
}))