Flexible Customizable jQuery Notification Plugin - Announce.js

Announce.js is a tiny yet flexible and customizable jQuery notification plugin that lets you display info/danger/success/warning messages with custom styles and animations.

How to use it:

1. Download the plugin and the load the following JS & CSS files in your html page.

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

2. Create notifications with the following syntax.

$.announce.info('Info message')
$.announce.danger('Danger message')
$.announce.success('Success message')
$.announce.warning('Warning message')

3. To config the notifications, you should pass the options to the method as this:

$.announce.info({

  // message here
  message: 'Info Message',

  // CSS class
  className: 'announce',

  // for auto dismiss
  duration: 2000,

  // hide on click
  hideOnClick: true,

  // enable html markup
  html: false,

  // for custom animations
  show: function() {
    var defer = $.Deferred();
    $(this).fadeIn(250, function() {
      defer.resolve();
    });
    return defer;
  },
  hide: function() {
    var defer = $.Deferred();
    $(this).fadeOut(250, function() {
      $(this).remove();
      defer.resolve();
    });
    return defer;
  }
  
});

4. Feel free to style the notification in the CSS:

.announce {
  top: 10px;
  right: 10px;
  left: auto;
  border-radius: 4px;
  background-color: black;
  color: white;
}

---

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