Easy Non-blocking Notification Plugin With jQuery - KanNotify.js

KanNotify.js is a lightweight and easy-to-use jQuery plugin that presents your notification messages of various types with custom positions and icons.

Features:

• Can be positioned anywhere on the webpage via CSS.
• 5 notificaiton types: success, error, info, warning and default.
• Supports any iconic font. E.g. Font Awesome.
• Allows to auto dismiss after a specific timeout.

How to use it:

1. To get started, you need to load jQuery and the jQuery KanNotify.js plugin's files in the document as shown below:

<script src="//code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="kanNotify.css">
<script src="jquery.kanNotify.js"></script>

2. Load the Font Awesome for the notification icons (OPTIONAL).

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

3. Create a basic notification with custom message:

$.kanNotify.add('Message Here');
// or
$.kanNotify.add({msg:'Message Here'});

4. The JavaScript to close the notifications manually:

// close a notification with a fadeOut effect
$.kanNotify.close(itemId,fade);

// close all the notifications
$.kanNotify.closeAll();

5. More API methods:

$.kanNotify.success('Success Message Here');
$.kanNotify.error('Error Message Here');
$.kanNotify.warning('Warning Message Here');
$.kanNotify.info('Information Message Here');

6. All default options to customize the notification plugin.

$.kanNotify.add({

  // custom position
  position:{"right":5,"bottom":50},

  // enable fade effect
  fade : false,

  // animation speed
  fade_out_speed: 300,

  // timeout
  auto_dismiss:4000,

  // is dismissable
  allow_dismiss : true,

  // wrapper's width
  wrapperWidth : "auto",

  // notification type
  type:'default',

  // custom icons
  iconDefault : {'info':'fa-info-circle','error':'fa-exclamation-circle','success':'fa-check-circle','warning':'fa-warning','default':'fa-chevron-circle-right','debug':'fa-bug'}
  
});

---

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