sidenotes.js

Add sidenotes capabilities to your page. Demo

Getting Started

You may install sidenotes.js using package managers.

bower install sidenotes.js
npm install sidenotes.js

# sidenotes.min.js (minified version)

Usage

jQuery is not required

var sidenotes = new Sidenotes(document.body, {
    // settings
});

// alternatively
var sidenotes = new Sidenotes(document.querySelector('.scope'), {
    // settings
});

Default Settings

note: undefined,
orientation: 'right',                 // left, right
duration: '.5s',                      // transition duration
overflow: 'hidden',                   // visible or hidden
position: 'fixed',                    // fixed or absolute
duration: '.5s',                      // transition duration
height: '100vh'
width: {
    '992px': '35vw',                  // keys: min-width media query values
    '768px': '50vw',                  // values: sidenote width in `vw or px`
    'default': '100vw'                // add as many breakpoints as needed
},
onBefore: function() {},
onAfter: function() {}

If a specific note value is provided, it will be used, otherwise it defaults to the data-sidenote attribute value.

Callbacks

onBefore: function(event, element) {  // called before animation starts
    // event 'open' or 'close'
    // element '.sidepanel'
}

onAfter: function(event, element) {   // called after animation ends
    // event 'open' or 'close'
    // element '.sidepanel'
}

HTML data-attribute

Add data-sidenote attribute to any element within the selected scope.

<!-- examples -->
<a href="#" data-sidenote="…">Text</a>
<button data-sidenote="…">Text</button>

Public Methods

.open(note);           // @param: note (string)
.close();              // @param: ø

CSS

Available classes:

.sidenote .-inner    { … } /* sidenote direct child  */
.sidenote .-close    { … } /* sidenote close button */

License

This software is free to use under the MIT license.