Nice AJAX Effects for Messages Box using MooTools

[JavaScriptBank]

This is very simple JavaScript code example but it can create an amazing message box effect with AJAX operations, bases on ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Nice AJAX Effects for Messages Box using MooTools

How to setup

Step 1: Copy & Paste CSS code below in your HEAD section
CSS

<style type="text/css">
body{font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px;}
#box {
	margin-bottom:10px;
	width: auto;
	padding:4px;
	border:solid 1px #DEDEDE;
	background: #FFFFCC;
	display:none;
}
</style>

Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
// Created by Antonio Lupetti | http://woork.blogspot.com
// This script downloaded from www.JavaScriptBank.com
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(0001, this, {'opacity': 1});
			});
		});
	}); 
</script>

Step 3: Copy & Paste HTML code below in your BODY section
HTML

Press &quot;Save&quot;</p>
<div id="box"></div>
<input name="" type="text" /><input id="save_button" name="save_button" type="button" value="save"/>

Step 4: Download files below
Files
mootools.js

JavaScript Enlarge Image - JavaScript Fading Slide Show - JavaScript Rotating Image script