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.
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"/>
<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;
}
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>
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
No comments:
Post a Comment