navjinder / Vanilla-Notify

Vanilla Javascript Notification Library

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

//Notify Remove All
vNotify.removeAll();

##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

About

Vanilla Javascript Notification Library

License:MIT License


Languages

Language:JavaScript 70.6%Language:CSS 22.5%Language:HTML 6.9%