This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Monday, March 3, 2008

Nice Ajax effect for message box using Mootools

How to implement a simple chain effect in MooTools to implement sequential events.

My friend David asked to me how to implement a message box which appears when an user submit a form and disappear (with a nice fade effect after some seconds) when a generic Ajax request is completed.


He want a sequence of events like this:

1. Submit a form
2. Display a message box with the message "Saving..."
3. When the Ajax request is complete display "Saved!" into the box and after some second it disappear with a fade-out effect.

How I said, you can image this list of "actions" like a "sequence" of effects. A simple way to implement a chain of effects like this is using mootools and this tutorial explains how to implement it with some lines of JavaScript code.

Live Preview Download this tutorial (include mootools)


Step 1: HTML Code
HTML code is very simple. I added only the essential elements, the message box (with ID "box") and an input element with a button (with ID "save_button"), but you can customze it with a more complex structure:

<div id="box"></div>
<input name="myinput" type="text" /> <input id="save_button" name="save_button" type="button" value="save"/>


Step 2: CSS Code
You can coose a style for your message box changing how you want these attributes:

#box {
margin-bottom:10px;
width: auto;
padding: 4px;
border: solid 1px #DEDEDE;
background: #FFFFCC;
display: none;
}

Remember to set the initial display attribute to "none". In this way the message box will appear only when an user submit the form:

Step 3: Javascript Code
Copy this code in the <head> tag of the page:

<script type="text/javascript">
window.addEvent('domready', function(){
var box = $('box');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});

$('save_button').addEvent('click', function() {
box.style.display="block";
box.setHTML('Save in progress...');

/* AJAX Request here... */

fx.start({
}).chain(function() {
box.setHTML('Saved!');
this.start.delay(1000, this, {'opacity' : 0});
}).chain(function() {
box.style.display="none";
this.start.delay(0100, this, {'opacity' : 1});
});

});
});
</script>

f you never used Mootools, but you are familiar with JavaScript, this line of code:

var box = $('box');

... let me say "it's equal" to:

var box = document.getElementById('box');

This line of code enable a delay of 1000 ms (1 second) before to apply fade-out effect:

this.start.delay(1000, this, {'opacity' : 0});

It's all!

Download this tutorial (include mootools)


Related Content
CSS Message Box collection

blog comments powered by Disqus
Anonymous said...

You could also make it so that the text slides down upon the notification, so that the display isn't so "sudden."

Rey Bango said...

Good work Antonio. I've made your posting today's Ajaxian Featured Tutorial (http://ajaxian.com/archives/ajaxian-featured-tutorial-simple-save-message-using-mootools)

Anonymous said...

Hey man? You are simply the best!

Anonymous said...

download link dont work but GOOD JOB!

Antonio said...

@anonymous: mmm... I tryied but download link works!

Opally said...

thanks, very useful! Would like to see Anonymous' text slide-down technique.

Anonymous said...

nice....

Anonymous said...

Hi. Could you have a fuller tutorial -- e.g., some simple thing on the backend gets done when we click the "Save" button in the demo, and THEN the ajax message appears?

It is nice to have all these bits of code from different places, but its the integration of all of it into something meaningful that is tricky.

Thanks!

Anonymous said...

its pretty good

Felipe Millan Assler said...

Antonio another incredible tutorial!!!

Mate, i would like to add this to my admin panel in my website.

How i can add his to my php cms? when i write a new post in the save button?

Thanks

http://www.orangemedialabs.com
Felipe Millan Assler

Ryan said...

The effect is nice, I was wondering if you could update it for mootools v 1.2?

Its dying on var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut}); as far as I can tell,

but moving that directly into your call to fx.start makes it valid, but the effect doesn't work correctly.

Anonymous said...

does anyone know if this is similar to the save and delete functions that appear in gmail? It seems to me like this is a nice way to get around intrusive pop ups.

Shaid said...

nice tutorial...
I am searching for couple of hours...
Thank you
Scholarships solutions

clearcroma said...

Antonio, can u please include a working example link..

Anonymous said...

Hi,
how if I want to perform something during onclick link to a php file then return the result in the above message box using the same code ?

Simon said...

Is it possible to let the box appear without clicking anything?

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News