Native Javascript Growl Notification Library – Vanilla Notify

Preview:

Description:

A vanilla JavaScript notification library that lets you show growl-style alerts and notifications to your users.

Main features:

• Can be placed anywhere on the webpage.
• Configurable fade in/out animations.
• Auto close after a given timeout.
• 5 notification types: into, success, warning, error and sticky.

How to use it:

First you need to load the Vanilla Notify’s stylesheet and JS files in the html document.

<link rel="stylesheet" href="vanilla-notify.css">
<script src="vanilla-notify.js"></script>

Display default notifications on your webpage.

vNotify.info({text:'This is an info notification.', title:'Info Notification.'});
vNotify.success({text:'This is a success notification.', title:'Success Notification.'});
vNotify.warning({text:'This is a warning notification.', title:'Warning Notification.'});
vNotify.error({text:'This is an error notification.', title:'Error Notification.'});
vNotify.notify({text:'This is a notify notification.', title:'Notify Notification.'});

More configuration options to customize the notifications.

vNotify.info({
  text:'This is an info notification.', 
  title:'Info Notification.',
  fadeInDuration: 1000,
  fadeOutDuration: 1000,
  fadeInterval: 50,
  visibleDuration: 5000, // auto close after 5 seconds
  postHoverVisibleDuration: 500,
  position: "topRight", // topLeft, bottomLeft, bottomRight, center
  sticky: false, // is sticky
  showClose: true // show close button
});