Nice AJAX Effects for Messages Box using MooTools

[JavaScriptBank]

This is very simple JavaScript code example (http://www.javascriptbank.com/" title="JavaScript code example) but it can create an amazing message box effect with AJAX operations, bases on ... detail (http://www.javascriptbank.com/nice-ajax-messages-box-using-mootools.html/en//) at JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)


http://www.javascriptbank.com/javascript.images/framework/nice-ajax-messages-box-using-mootools.jpg (http://www.javascriptbank.com/javascript/framework/mootools/nice-ajax-messages-box-using-mootools/preview/en/)
Demo: JavaScript Nice AJAX Effects for Messages Box using MooTools (http://www.javascriptbank.com/nice-ajax-messages-box-using-mootools.html/en/)


How to setup

Step 1: Place CSS 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: Use JavaScript code below to setup the script
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: Place HTML 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: downloads
Files
mootools.js (http://www.javascriptbank.com/javascript/mootools.js)







JavaScript Line Graph script (http://www.javascriptbank.com/line-graph-script-index.html) - JavaScript Virtual Keyboard (http://www.javascriptbank.com/virtualkeyboard-index.html) - JavaScript Horizontal Slider (http://www.javascriptbank.com/horizontal-slider-javascript-v2-2.html)