notify-awesome

A lightweight notification system, powered by Font Awesome.


Keywords
javascript, css3, jquery, notification
License
GPL-2.0+
Install
bower install notify-awesome

Documentation

Notify Awesome

A lightweight notification system, powered by Font Awesome and jQuery.

Requirements

Bower

$ bower install notify-awesome

Example

Example

Usage

Include notify.js and notify.css in your HTML file like this:

<!DOCTYPE html>
<html>
  <head>
    <link href="notify.css" rel="stylesheet" />
    <script src="notify.js"></script>
  </head>
  <body>...</body>
<html>

Now put a div with the id "notification-area" anywhere in the body-tag:

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    <div id="notification-area"></div>
  </body>
<html>

Notifications will be displayed in the top-right corner. You can change that by altering the CSS properties for "#notification-area".

A notification can be produced with the following code:

var message = '<p><b>Public Service Announcement</b></p><p>Never turn to the Dark Side!</p>';
var seconds = 5;
var icon = 'rebel';

Notify(message, seconds, icon);

As you can see, notify.js uses Font Awesome identifiers (minus the fa-* prefix) for icons.

The result will be:

Example

Only the message parameter is required. This works too:

Notify('Hello World!');

That's it! Have fun! :-)