Lightweight Performant jQuery Growl Notification Plugin - notifier

notifier is a lightweight jQuery plugin used to create high-performance, non-blocking, 'growl' style notification messages on the webpage.

Basic usage:

1. By default, the plugin uses Font Awesome 4 for the notification icons.

<link rel="stylesheet" href="font-awesome.min.css">

2. Load the JavaScript file jquery-notifier.js after jQuery library but before you close the body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-notifier.js"></script>

3. Cache and initialize the notifier.

var $notifier = $('body').notifier;
$notifier.init();

4. Create a basic 'success' notification on the webpage.

$notifier.notify({
  type: 'success',
  title: 'Success',
  subtitle: 'Success!'
});

5. Create a notification with a delay.

$notifier.notify({
  type: 'success',
  title: 'Success',
  subtitle: 'Success!',
  delay: 1000
});

6. Customize the notification icons.

$notifier.init({
  icons: {
    success: 'fa fa-check',
    info:    'fa fa-info',
    warning: 'fa fa-exclamation',
    failure: 'fa fa-times'
  }
});

7. The plugin also supports chaining notifications.

$notifier
  .notify({
    type: 'success',
    title: 'Success',
    subtitle: 'Success!',
    delay: 1000
  })
  .notify({
    type: 'info',
    title: 'Info',
    subtitle: 'Information!',
    delay: 2000
  })
  .notify({
    type: 'failure',
    title: 'Error',
    subtitle: 'Error!', 
    delay: 3000
  })
  .notify({
    type: 'warning',
    title: 'Warning',
    subtitle: 'Warning!', 
    delay: 4000
  });

8. Callback functions.

$notifier.notify({
  type: 'success',
  title: 'Success',
  subtitle: 'Success!',
  callbacks: {
    show: function() {
      // do something
    },
    hide: function() {
      // do something
    }
  }
});

// or
$notifier.init({
  callbacks: {
    show: function() {
      // do something
    },
    hide: function() {
      // do something
    }
  }
});

---

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