Easy Side Marginal Note In Vanilla JavaScript – marginotes.js

Category: Javascript , Recommended , Text | March 15, 2016
Author:mshenfield
Views Total:323 views
Official Page:Go to website
Last Update:March 15, 2016
License:MIT

Preview:

Easy Side Marginal Note In Vanilla JavaScript – marginotes.js

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'
  
}))

 

You Might Be Interested In:


Leave a Reply