Versatile Notification Plugin With jQuery And CSS3 - notify.js

notify.js is an easy yet highly configurable jQuery notification plugin which helps you show various types of notifications with CSS3 based animations on your webpage.

Features:

• 3 types of notifications: simple, image and dimissable
• 10 built-in themes: default, success, warning, danger, info, black, success-invert, danger-invert, warning-invert, info-invert
• Fancy CSS3 animations based on Animate.css.
• Can be placed anywhere on the webpage: top-left, top-right, bottom-left, bottom-right.
• Custom duration of notification messages.

How to use it:

1. Place the jQuery notify.js plugin's stylesheet and JavaScript into your html page which has jQuery library installed.

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

2. The plugin requires Animate.css for smooth CSS animations.

<link rel="stylesheet" href="animate.css">

3. Create custom notification message with an image.

<div id="example" class="notify-with-img notify-default">
  <img src="notify.png">
  <div class="notify-text">
    <h4>Heading</h4>
    <p>Message to notify</p>
  </div>
</div>

4. Show the notificaiton on page load.

$('#test').activate();

5. To create a dismissable notification, just add the CSS class 'dismiss-notification' to the close button like this:

<div id="test" class="notify notify-default">
  <i class="dismiss-notification"></i>
  This is a danger notification
</div>

6. Change the theme of your notifications.

• notify-default
• notify-success
• notify-warning
• notify-danger
• notify-info
• notify-success-invert"
• notify-warning-invert
• notify-danger-invert
• notify-info-invert
• notify-black

<div class="notify notify-default">Message here</div>

7. Plugin's default customization options.

$('#test').activate({

  // set true to close the notifcation manually.
  dismissible: "false",

  // top-left, top-right, bottom-left, bottom-right
  position: "top-left",

  // Animate.css' animation type
  animationType: "slideInDown",

  // duration in ms
  duration: 4000
  
});

---

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