Versatile Notification Plugin With jQuery And CSS3 - notify.js

Versatile Notification Plugin With jQuery And CSS3 - notify.js
File Size: 181 KB
Views Total: 766
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.