Notification.js

What is this?

Notification.js is a small Javascript file that creates Growl-like notifications to quickly provide information about ongoing events.

Notification.js relies on jQuery - be sure to include jQuery in your script first!

Features

  • style customizable with css
  • customizable display duration
  • customizable fade speed
  • customizable opacity
  • single notifications can be set sticky
  • customizable icon
  • customizable click action
  • notifications can be inserted at the top or the bottom
Comments or questions? Drop me an email

Live Demo

Items marked with an asterisk * are optional.




    • show for ms
    • sticky
    • close button (auto-enabled if sticky)
    • fade speed ms
    • opacity %
    • icon none      
    • insert at bottom   top

Installation

1. If you haven't already included jQuery, you'll have to add it first in the head-section of your page. Download jQuery from here or load it via Google:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
2. Download the notification package and include Notification.js after jQuery:
<script type="text/javascript" src="Notification.js"></script>
3. Include the delivered stylesheet Notification.css:
<style type="text/css" src="Notification.css"></style>

Usage

In most cases, you'll only need to call one method:
Notification.show( text, title, options );
A simple "Hello World"-Notification try me!
Notification.show( 'Hello World!' );
If you want to show more than one notification you can chain the call: try me!
Notification.show( 'Hello' ).show( 'World!' );
Let's add some optional stuff, an icon and a close button: try me!
Notification.show(
 'I am a notification with icon and close button',
 'Information',
 {
  icon: 'path/to/icon.png',
  closeButton: true
 }
);

A notification with custom click action: try me!
Notification.show(
 'Click on this notification',
 'Click me!',
 {
  icon: 'icons/alert.png',
  sticky: true,
  action: function() {
   alert( 'You clicked the notification' );
  }
 }
);

Options

  • icon
    Shows an icon in the notification
    Notification.show( 'Hello World!', null, { icon: 'icons/error.png' } );
  • action
    Applies an onclick-handler to the notification.
    Notification.show( 'Hello World!', null,
     {
      action: function() {
       alert( 'You clicked the notification' );
      }
     }
    );

  • closeButton
    Adds a small button to close the notification
    Notification.show( 'Hello World!', null, { closeButton: true } );
  • sticky
    Makes the notification sticky, so it will not fade out. Setting this option also enables the close button.
    Notification.show( 'Hello World!', null, { sticky: true } );

Settings

  • displayTime
    Sets the display time for the next notifications. Default: 5000 ms
    Notification.displayTime = 2500;
  • opacity
    Sets the opacity for the next notifications. Default: 0.8
    Notification.opacity = 0.5;
  • fadeSpeed
    Sets the notification fade speed. Default: 500 ms
    Notification.fadeSpeed = 100;
  • insert
    If set to 'top', new notifications will appear on top of others, if set to 'bottom' they will appear below.
    Default: 'bottom'
    Notification.insert = 'top';

Files

License

This is free software that comes without any warranty.
You are free to use it, copy it, change it, print it, name a song after it or anything else you would like to do with it.
If you are kind please link back to this page or mention it.

© Volker Wieban 2009