Documentation:
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.
Step 1: HTML CodeHTML 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 CodeYou 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 CodeCopy 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!