Vanilla Notify

Notification Library built using Vanilla Javascript. No jQuery or other dependencies.

This library was built with customization in mind. While there are global options, each notification can override the global options.

Demo

http://mlaritz.github.io/Vanilla-Notify/

Installation

The JS and CSS files are required:

<link rel="stylesheet" href="dist/vanilla-notify.css" />

<script src="dist/vanilla-notify.js"></script>

Examples

//Info Notification
vNotify.info({text: 'text', title:'title'});

//Success Notification
vNotify.success({text: 'text', title:'title'});

//Warning Notification
vNotify.warning({text: 'text', title:'title'});

//Error Notification
vNotify.error({text: 'text', title:'title'});

//Notify Notification
vNotify.notify({text: 'text', title:'title'});

Global Options

vNotify.options = {
  fadeInDuration: 2000,
  fadeOutDuration: 2000,
  fadeInterval: 50,
  visibleDuration: 5000,
  postHoverVisibleDuration: 500,
  position: positionOption.topRight,
  sticky: false,
  showClose: true 
};

Notification Options

Each individual notification can override the global options.

If you want to make an error notification sticky with the close icon:

vNotify.error({text: 'text', title:'title', sticky: true, showClose: true});

Dist Folder

The dist folder contains:

JS File (vanilla-notify.js) to use for debugging purposes
Minified JS File (vanilla-notify.min.js) to use for your site
CSS file to link to directly in your HTML
SCSS Partial file for you to use with your other SASS stylesheets
LESS file for you to use with your other LESS stylesheets