Small Animated jQuery Notification Popup Plugin - Notifier

Notifier is a lightweight yet heavily customizable jQuery plugin for creating animated attractive pop-up notifications on your web page/application.

Features:

• 4 notification types: error, success, warning and info.
• Can be positioned at the: top - topLeft - topCenter - topRight - bottom - bottomLeft - bottomRight.
• 5 animationIn effects: Bounce, Highlight, Pulsat, Shake and Slide.
• 9 animationOut effects: Blind, Clip, Drop, Explode, Fade, Fold, Puff, Pulsat or Shake.
• Auto dismiss after a custom timeout.
• Has the ability to limit the maximum number of notifications allowed on the web page.

Basic Usage:

1. Load the necessary jQuery library and jQuery UI in the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

2. Load the jQuery Notifier's JavaScript and Stylesheet files in the web page.

<link href="css/notifier.css" rel="stylesheet">
<script src="js/notifier.js"></script>

3. Initialize the plugin to show a default notification popup on page load.

(function($){
  $.notifier({
  
  // OPTIONS

  });
})(jQuery);

4. Change or override the default settings to create your own notification popups.

// notification types: error, success, warning and info.
"type": "error",

// notification title
"title": "Titre d'exemple",

// notification message
"text": "Ceci est un exemple",

// x position. top or bottom
"positionY": "bottom",

// y position. left or right
"positionX": "right",

// notification types: error, success, warning and info.
"delay": 4000,

// the maximum number of notification popups
"number" : 5,

// animationIn effects: 
// Bounce, Highlight, Pulsat, Shake or Slide.
"animationIn" : 'shake',
"animationIn_duration": 'slow',

// Blind, Clip, Drop, Explode, Fade, Fold, Puff, Pulsat or Shake.
"animationOut" : 'drop',
"animationOut_duration" : 'slow'

---

This awesome jQuery plugin is developed by bouksou. For more Advanced Usages, please check the demo page or visit the official website.