Effect.Notify – en

danceNotifying 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.

8 thoughts on “Effect.Notify – en

    • I will post in two languages if I made some plugin, extension or package what could be useful anywhere. I hardly find time to write hungarian posts so posting everything in english sounds impossible. Maybe Mr Google Translate will do this job, if he won’t translate program codes 🙂

  1. Hi,

    Looks nice, but what are the condition of reusability?
    The source contains a copyright notice but no indication about how we can use it in our products and at which condition.
    Could you be more specific on this aspect?

    PS: On a more technical aspect, firing many notifications while the previous one is not closed or faded away make the notification messages to stay stuck forever on FF3.0.11

  2. Thanks for the reply!
    The problem is reproductible on FF3.5.1
    You can just click 10 times in a raw (about 2-3 clicks/s) on the “Effect Notify Test” button.
    The notify windows will fade out and in again a couple of times (vary, but less than 10) before staying visible for ever…
    The close button of the top notify window still works, but the second one is stuck until you reload the page.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.