Notifying users are common part of any web based and desktop applications. Unfortunately most of the applications use some rude, ugly, nasty and work flow stopping way to let the user know what happened. Alert boxes are more or less the de facto standard for solve this issue. But alert boxes are evil. We need something better.

Notifications

Web applications normally have more interesting ways to do anything we want than desktop apps. I do not want to go into details about this, just let say this is true.

Script.aculo.us is a good JavaScript framework with so many nice effects, but there is no notify effect. We are lucky, as script.aculo.us is easy to expand, so it is open to create new effects based on existing ones. Here is my Effect.Notify effect plugin for script.aculo.us.

Effect.Notify

Effect.Notify will show a notify box with any text content and fade out after a given time. If you scroll down or up your browser the notification box will stay in the same position.

Tested on Firefox 3, Opera 9, Internet Explorer 7.

The notification box should have style="display:none" if you want to have it hidden when your web page is loaded or before you want to show the box.

<div id="notify" style="display:none;">Notification box</div>

You could create a new notify effect by invoking one of the followings or something similar. As you can see you could provide all the normal appear and fade parameters if you need them.

 new Effect.Notify(element);
 new Effect.Notify(element, {notify : {bottom : 50, right : 100}, appear: {}, fade : {}});

If you want to add a close button to your notification box you just need a html element inside your notification box with notifyClose css class name.

<div id="notify" style="display:none;">
	<div class="notifyClose"><span >x</span></div>
	<span class="notifyContent">Please close me or I will fade out in 10 seconds</span>
</div>

Notify keys

The notify object given to Effect.Notify accepts the following keys:

top or bottom

The top or bottom position of the notification box in pixels

right or left

The right or left position of the notification box in pixels

delay

how long should be the notification box should be visible in seconds

Message text

If you want to alter the notification box’ message text, you could use some similar function than here. This function acepts to paramaeters. The first is the text itself, and the second one is a css class name. If the second parameter is provided the function will create a new div element with the given css class name and put the message text into this newly created div. It is useful when you want to use different style for common and important messages. (For this function you will need to load the builder modul of scriptaculous.)

function showmessage(message, css){
	if(message.length){	//we have something to show
		var element =$('notify');
		if(css){
			element.insert(Builder.node('div', {className : css}, message));
		}
		else{
			element.update(message);
		}
		new Effect.Notify(element, {notify : {top : 15, right : 50}});
	}
}

Effect.Notify sample demo

Updates

• 2009.03.28 – v0.3 Box became closeable.
• 2009.03.26 – Unfortunately I uploaded a previos version for sample. So if you got some ugly flickering during scroll, please try to download it again.

Any comments, questions and bug reports are welcome.