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

0
281

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,
Web Editor

LEAVE A REPLY

Please enter your comment!
Please enter your name here

4 × 2 =