🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A tiny and cross browser jQuery plugin for creating Growl-style pop-up notifications that fade in and out from the upper right corner of the web page.

Notification growl-notification

Documentation

jQuery.notifications Plugin - v 1.0

Notifications System inspired by Growl.

Project site: http://monkeymonk.github.com/jquery.notifications.js/

Demo: http://monkeymonk.be/jquery.notifications.js/demo/

Usage

Basic

First of all, include jquery.notifications.js and jquery.notifications.css in your HTML then start to use jQuery.notifications.

$(document).ready(function() {     $.notifications({         text: 'Lorem ipsum',         content: '<b>Lorem ipdum</b> dolor sit amet...',         image: 'http://lorempixel.com/40/40/abstract/'     }); });

Options

{     className: 'notification',      alive: 4000,     fadeIn: 600,     fadeOut: 800,     sticky: false,      // Template     tpl: '<div class="{className}"><div class="{className}-img"><img src="{image}" alt="" /></div><div class="{className}-content"><div class="{className}-title">{title}</div>{content}</div></div>',      // Callback     onShow: function () {},     onHide: function () {} }

Methods

jQuery.notifications('add', options);

jQuery.notifications use a tiny template system that let you an easy way to customize your notifications.

$.notifications('add', {     title: 'Lorem ipsum',     content: '<b>Lorem ipsum</b> dolor sit amet...',      className: 'simple',      tpl: '<div class="{className}"><h1>{title}</h1><p>{content}</p></div>' });  // same as $.notifications(params); 

jQuery.notifications('remove', onHide);

By default, that remove the last notification that was added. You can pass an identifier to targetting a specific one. You can also pass a callback, if not the onHide will be used (if is set).

$.notifications('remove', onHide);  // or  $.notifications('remove', 3, onHide); 

jQuery.notifications('removeAll', onHide);

Remove all notifications. You can pass a callback, if not the onHide will be used (if is set).

$.notifications('removeAll', callback); 

Data-API

Every options are accessible via [data-*].

<button type="button" data-toggle="notification" data-title="It's a notification" data-content="With <b>awesome content</b>">Toggle notification</button>

Browsers: Tested and Working In

  • IE 6, 7, 8, 9, 10
  • Firefox 3+
  • Opera 10+
  • Safari 4+

You May Also Like