The notify plugin makes displaying notifications easy.
Every notification will be visible for a configurable time, but can also be made sticky.
Every notification container element has its own queue of notification messages. The position of the notification messages are automatically updated when a notification message is added or removed.
The notification can also contain HTML.
By default, the notify plugin contains 4 types:

  • info, the default notification, visible for 3 seconds.
  • success, a sticky notifcation for success messages.
  • error, a sticky notification for error messages.
  • warning, a sticky notification for warnings.

The configuration of these types can be customized and custom types can be added. The rendering of these types is customizable.
By default. there are 2 styles:

  • bar, a full width bar
  • box, a box positioned on the right of the window

Custom styles can be added.

Get source Get NuGet package

Demo

Welcome to the jQuery notify docs
This is a notification demo for th jQuery Notify plugin.

show notification

Create a notification:

text:
sticky:
style:
type:
Add notification message

All bar notifications are added to 1 container. All box notifications are added to an other container. For all bar notifications, the adjustContent property is set to true.

The code

$("#notification").notify({ appendTo: '.notificationDemo', opacity: 0.8, adjustScroll: true });
$("#show").click(function() { $("#notification").notify("show"); return false; });

Helpers

$.notify.create

The $.notify.create function creates and returns a text based notification. This function has two arguments, the text for the notification and the notifcation options. The last argument is optional.

var notification = $.notify.create("some notification text", { /* configuration options */ });

Type Configuration

All types can be configured and all have a default configuration set.
The default configuration set can also be changed. The $.notify.settings object holds the configuration for all types.
The name of the type is the key of the object. When no type is set, the settings for the type info ($.notify.settings.info or $.notify.settings["info"]) are used. Custom types can be added as well. Simply add a new key to $.notify.settings and create a notification with the type set to this key.
All options defined below can be set in the settings object. The settings object of the provided type will extend the settings object of type info.

$.notify.settings["info"].sticky = true;

In this example, the sticky property of notifications of type info is set to true. All notifications of type info will now be sticky.

Methods

Options

adjustContent datatype: Boolean

Sets whether the content in the container should be adjusted to make room for the notification.
Note: When adjustScroll is set to true, this property is ignored.
default: false
$(".notification").notify({ adjustContent : false });

adjustScroll datatype: Boolean

Sets whether the notification should adjust to scrolling and bind to the scroll event.
Note: When set to true, the adjustContent property is ignored.
default: false
$(".notification").notify({ adjustScroll: true });

animationDuration datatype: Integer

Sets the duration of the hide and show animation in miliseconds.
default: 500
$(".notification").notify({ animationDuration : 500 });

appendTo datatype: String

Sets the selector for the container element of the notifications. All notifications will be appended to this container element and added to its queue of notification messages.
default: "body"
$(".notification").notify({ appendTo : ".menu > .notifications" });

autoShow datatype: Boolean

Sets whether the notification should be immediately shown after initialization.
default: true
$(".notification").notify({ autoShow : true });

closeText datatype: String

Sets the text of the close icon.
default: "X"
$(".notification").notify({ closeText : "X" });

displayTime datatype: Integer

Sets the visibility time of the notification in miliseconds.
default: 3000
$(".notification").notify({ displayTime : 3000 });

notifyClass datatype: String

Adds a custom class to the notification element.
default: ""
$(".notification").notify({ notifyClass: "myCustomClass" });

opacity datatype: Double

Sets the opacity of the notification message.
default: 1
$(".notification").notify({ opacity: 0.8 });

sticky datatype: Boolean

Sets whether the notification is sticky and can only be removed by clicking on the close icon.
default: false, for type success and error the default value is true
$(".notification").notify({ sticky : false });

style datatype: String

Sets the rendering style of the notification message.
default: 'bar'
possible values: 'bar', 'box'. Custom styles can be added.
$(".notification").notify({ style: 'box' });

type datatype: String

Sets the type of the notification message. This will change the rendering and sets the default options to the options of the corresponding type.
default: 'info'
possible values: 'info', 'success', 'error', 'warning'. Custom types can be added.
$(".notification").notify({ type: 'success' });

Events

beforeShow

The beforeShow event is raised before the show animation of the notification has started.
arguments:
  • beforeShow event
  • notify object: "element" property containing element to notify and "settings" property containing the settings for this notify object.
$(".notification").notify({ 
    beforeShow : function(event, notify) {
        var notifier = $(this); // reference to notification element 
    }
});

afterShow

The afterShow event is raised after the show animation of the notification has completed.
arguments:
  • afterShow event
  • notify object: "element" property containing element to notify and "settings" property containing the settings for this notify object.
$(".notification").notify({ 
    afterShow : function(event, notify) {
        var notifier = $(this); // reference to notification element 
    }
});

beforeHide

The beforeHide event is raised before the hide animation of the notification has started.
arguments:
  • beforeHide event
  • notify object: "element" property containing element to notify and "settings" property containing the settings for this notify object.
$(".notification").notify({ 
    beforeHide : function(event, notify) {
        var notifier = $(this); // reference to notification element 
    }
});

afterHide

The afterHide event is raised after the hide animation of the notification has completed.
arguments:
  • afterHide event
  • notify object: "element" property containing element to notify and "settings" property containing the settings for this notify object.
$(".notification").notify({ 
    afterHide : function(event, notify) {
        var notifier = $(this); // reference to notification element 
    }
});

Methods

show

Shows the notification.
$(".notification").notify("show");

hide

Hides the notification.
$(".notification").notify("hide");

destroy

Destroys the notification element and unbinds all events.
$(".notification").notify("destroy");

Changes

Changes in 0.4.4:

  • Notification adjusts when window size is exceeded

Changes in 0.4.3:

  • added style property
  • added warning type
  • removed notification type (replaced with type "box")
  • added icon span to notify template
  • added adjustScroll property
  • updated css
  • IE fixes

Changes in 0.4.2:

  • added $.notify.create helper

Changes in 0.4.1:

  • added beforeShow, afterShow, beforeHide and afterHide events

Changes in 0.4:

  • added type configuration and default settings per type
  • changed type default to info
  • added opacity property
  • changed sticky property to true for type success and error
  • added default font for notification messages.

Changes in 0.3.2:

  • several bug fixes
  • new notification type: notification
  • added property notifyClass for adding a custom css class

Changes in 0.3.0:

  • complete redesign of notifications
  • added notification types (default, success, error)
  • added adjustment of content in notification container

Changes in 0.2.0:

  • added sticky notifications
  • added close icon
  • added queueing of notifications

Requirements

  • jQuery 1.8.3+ (could also work on previous versions, but is not tested)

Known issues