Sunday 2 December 2007

Notification area with Scriptaculous

This time I need a notification area in webapp, the idea is a div that appears and disappears.

In Scriptaculous it's easy extend and combine effects, and the first I do is extend an Effect to do the behavior that I'm looking for.

Effect.Notify = function(element) {
element = $(element);
return new Effect.Appear(element,
{ afterFinishInternal: function(effect) {
new Effect.Fade(effect.element,{ delay: 1.6 });
}});
}


The only thing you have to do is create a "div" with style "display: none" and invoke the Effect like this:


new Effect.Notify('mydiv');


Simple and powerful.