Super Simple jQuery Notification Box Plugin - notify

Super Simple jQuery Notification Box Plugin - notify
File Size: 9.07 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

You might also like:

How to use it:

1. Include jQuery library and jQuery notify on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-notify.js"></script>

2. Create a html container for your notification box

<div class="notification">
...
</div>

3. The CSS for this example. You can customize the notification box through via CSS.

.notify {
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #BBBBBB 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #BBBBBB 100%);
/* Opera */ 
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #BBBBBB 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #BBBBBB));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #BBBBBB 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #BBBBBB 100%);
border-radius: 5px;
border: 1px solid #BBB;
padding: 20px;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}

4. Simply call the plugin

<script type="text/javascript">
     $(".notification").notify();
</script>

5. You can also create a link to show the notification box

<a href="#" id="show">show notification</a>
<script type="text/javascript">
$("#show").click(function () {
     $(".notification").notify("show");
});
</script>

Change Log:

2017-02-04

  • updated colors to match bootstrap

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.