Super Simple jQuery Notification Box Plugin - notify

File Size: 27.7 KB
Views Total: 2331
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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)

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.