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}}); } }
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.
Hi,
Are you planning to post both English and Hungarian posts from now on?
Üdv,
Attila
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 🙂
Hello,
Is there a demo for this somewhere?
-Jeff
-getoutsidenj.com
@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.
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
@Eric Sorry I forgot to add the licence info. It is GPL.
Thanks for the bug report. Is it ther on FF 3.5?
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.
@Eric Thank you. I will look into this.