Super Simple jQuery Notification Box Plugin - notify

notify is a super lightweight and customizable jQuery plugin that allows you to quickly create a notification box with some smooth fade in/out effects.

Key features:

• Auto dismisses after a timeout.
• 4 notification types.
• 2 notification styles: box and full width.
• Sticky notification.
• Useful API.

See also:

• Event Based Bootstrap Form Validation Pluin with jQuery - formalerts
• Enable Win8 Metro Interfaces Easily - Metro.js
• jQuery Windows 8-Style Notification Plugin - notific8
• BootMetro - Metro Style Web Framework
• Stackoverflow Like Notification Bar for jQuery - Howdy-do
• Smooth Sliding Notification Bar Plugin - msgTips
• Elegant iOS-like Notification Plugin - ClassyNotty
• JS Notification Plugin For Bootstrap or jQuery UI - Pines Notify
• Simple Notification Bar Plugin - jBar
• Alertify - Customizable jQuery Notification Plugin
• noty - Cool Jquery Notification Plugin
• Cool Animated Notification Plugin with jQuery - jGrowl
• jQuery Event Based Notification Plugin For Bootstrap - BS-Alerts
• Super Tiny jQuery Notification Bar Plugin - toast

Install & download:

# NPM
$ npm install jquery-notifier --save

How to use it:

1. Include jQuery library and the jQuery notify plugin's files on the page.

<link href="notify.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery-notify.js"></script>
<!-- or from the cdn -->
<script src="https://unpkg.com/jquery-notifier"></script>

2. Create a html container for your notification box

<div class="notification">
  <span>This is a jQuery notify plugin.</span>
</div>

3. Simply call the plugin and done.

$(".notification").notify();

4. The plugin currently comes with 4 notification types:

• info (default)
• success
• error
• warning

$(".notification").notify({
  'type': 'info'
});

5. Set the visible time of the notification. Default: 3000ms.

$(".notification").notify({
  displayTime: 5000
});

6. Make the notification always be visible until you click the close button.

$(".notification").notify({
  sticky: true
});

7. More customization options.

$(".notification").notify({

  // the duration of the animation
  'animationDuration': 500,
  
  // parent container
  'appendTo': 'body',

  // auto shows the notification on page load
  'autoShow': true,

  // close text
  'closeText': 'x',
  
  // bar: full width notification bar
  // box: box style notification
  'style': 'bar',
  
  // whether to auto adjust the content
  'adjustContent': false,

  // whether to auto adjust the scroll position
  'adjustScroll': false,

  // extra CSS
  'notifyClass': '',

  // opacity level
  'opacity': 1
  
});

8. Callback functions.

$(".notification").notify({

  'beforeShow': function(event, notify) {
    // do something
  }
  'beforeHide': function(event, notify) {
    // do something
  }
  'afterShow': function(event, notify) {
    // do something
  }
  'afterHide': function(event, notify) {
    // do something
  }

});

9. API methods.

$(".notification").notify("show");
$(".notification").notify("hide");
$(".notification").notify("destroy");

Changelog:

v1.0.0 (2019-04-24)

• Update

v0.4.4 (2013-06-11)

• bug fix for resizing of notification

v0.4.2 (2013-05-29)

• Added $.notify.create helper for easier creating text notifcations
• Added default settings configuration per type

v0.3.2 (2013-05-26)

• Several bug fixes, added notification type and added notifyClass property for adding custom classes

v0.3.1 (2013-05-20)

• More mobile friendly notifications.
• Added resize event handler and style fixes for mobile browsers.

v0.3.0 (2013-05-19)

• Complete redesign of notifications. Added default, success and error notification types and added adjustContent property.

v0.2.0 (2013-05-18)

• Added queueing system and sticky notifications.
• Added sticky notifications and close buttons. 
• Added a queueing system to the container elements for displaying multiple notification messages.

---

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