A lightweight notification system, powered by Font Awesome and jQuery.
$ bower install notify-awesome
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:
Only the message parameter is required. This works too:
Notify('Hello World!');That's it! Have fun! :-)