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.

Effect.Notify – en
Cimke:         

8 thoughts on “Effect.Notify – en

  • 2009. március 26. at 21:52:13
    Permalink

    Hi,

    Are you planning to post both English and Hungarian posts from now on?

    Üdv,
    Attila

    Válasz
    • 2009. március 27. at 10:38:10
      Permalink

      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 🙂

      Válasz
  • 2009. március 28. at 13:45:50
    Permalink

    Hello,

    Is there a demo for this somewhere?

    -Jeff
    -getoutsidenj.com

    Válasz
    • 2009. március 28. at 13:49:48
      Permalink

      @Jeff Yes at the end of the post you could see the link for the demo. On the demo page you should click on the button at the top to test it.

      Válasz
  • 2009. augusztus 18. at 11:11:11
    Permalink

    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

    Válasz
  • 2009. augusztus 18. at 11:50:12
    Permalink

    @Eric Sorry I forgot to add the licence info. It is GPL.

    Thanks for the bug report. Is it ther on FF 3.5?

    Válasz
  • 2009. augusztus 18. at 14:21:39
    Permalink

    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álasz
    • 2009. augusztus 19. at 11:31:29
      Permalink

      @Eric Thank you. I will look into this.

      Válasz

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

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