Notify.js - A JQuery Plugin To Provide Simple Browser Based Notifications With Customization By Nabeel Shahid | Of UI/UX Designs & Layout | NABEEL SHAHID, Solution Architect For Cloud Applications

Notify.js – A jQuery plugin to provide simple browser based notifications with customization

Basic Usage

Element Notifications

You can place notifications on any element:

$(".elem-demo").notify("Hello Box");

Like this

box

Global Notifications

If you don’t specify an element, notification will appear in the top left (unless you specify a different position – See Positioning)

$.notify("I'm over here !");

Notification Styles

Each style may define a set of classes to use to substyle the notification. The pre-packaged version includes a bootstrap notification style (see more below in Styling). These classes include:

Success

$.notify("Access granted", "success");

Info

$.notify("Do not press this button", "info");

Warning

$.notify("Warning: Self-destruct in 3.. 2..", "warn");

Error

$.notify("BOOM!", "error");

Note: This page has set the default class to"success" with$.notify.defaults({ className: "success" });.

Positioning

The position string option is used to describe both vertical and horizontal alignment. Element notifications and Global notifications can be vertically repositioned to: "top", "middle" or "bottom" and horozontally repositioned to: "left", "center" or "right". If we don’t provide a position option the default alignments are defined in the default settings: globalPosition and elementPosition. When only one alignment is provided, the vertical alignment is middle and horizontal alignment is centre.

$(".pos-demo").notify(  "I'm to the right of this box",   { position:"right" });

We can position the notification around this box

Use this positioning tool to see all possible position combinations.

Element Global

An awesome cool

larrrggggeeee box

API

`$.notify(` `string|object, [` `options` `])`

string|object – global notification data
options – an options object or class name string

`$.notify(` `element,` `string|object, [` `options` `])`

element – a jquery element
string|object – element notification data
options – an options object or class name string

`$(` `selector` `).notify(` `string|object, [` `options` `])`

selector – jquery selector
string|object – element notification data
options – an options object or class name string

`$.notify.addStyle(` `styleName,` `styleDefinition` `)`

styleName – string (the style option references this name)
styleDefinition – style definition object (see Styling below)

`$.notify.defaults(` `options` `)`

options – an options object (updates the defaults listed below)

Options

The options object listed above are in the form below. This object below is the actual used to check option validity and set defaults.

{  // whether to hide the notification on click  clickToHide: true,  // whether to auto-hide the notification  autoHide: true,  // if autoHide, hide after milliseconds  autoHideDelay: 5000,  // show the arrow pointing at the element  arrowShow: true,  // arrow size in pixels  arrowSize: 5,  // position defines the notification position though uses the defaults below  position: '...',  // default positions  elementPosition: 'bottom left',  globalPosition: 'top right',  // default style  style: 'bootstrap',  // default class (string or [string])  className: 'error',  // show animation  showAnimation: 'slideDown',  // show animation duration  showDuration: 400,  // hide animation  hideAnimation: 'slideUp',  // hide animation duration  hideDuration: 200,  // padding between element and notification  gap: 2}

Download : https://rawgit.com/notifyjs/notifyjs/master/dist/notify.js

Website / Demo: https://notifyjs.com

Thanks for reading,
Nabeel Shahid.

Notify.js – A jQuery plugin to provide simple browser based notifications with customization