Â« Â»

This is very simple JavaScript code example but it can create an amazing message box effect with AJAX operations, bases on JavaScript MooTools framework. In live demo of this JavaScript code example, the JavaScript message box shall be called through AJAX every time users click "Save" button then it'll disappear by blur effect after all jobs are done.

Full JavaScript source codes, CSS source codes and detailed instructions, documentation are within live demo of this AJAX message box, please go for it or try to enjoy more JavaScript MooTools effects below:

- Super Awesome and Amazing MooTools Site Examples
- JavaScript DHTML Dock Carousel Using Mootools

Label: MooTools form, AJAX MooTools, MooTools JavaScript, AJAX form MooTools, MooTools AJAX example, MooTools AJAX tutorial, AJAX message box, AJAX loading message, message box code, JavaScript message box

For the best in Cable TV, High Speed Internet & Home Phone Service order Comcast Deals and save money.

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
CSS
JavaScript
HTML
Print

mootools.js

Copy All x2

<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>

Copy All x2

<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>

Copy All x2

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

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

26/04/2011
Antonio Lupetti [more]
2,319
0
0
0
4.1 KBytes

RAO247.VN

Â»
Â«

Let's be first member to do this

JavaScript by day

Links

onMouseOver slideshow Corner popup Transition Drag calendar validation redirect frame file open editor search rich MARQUEE clipboard tab Remember snake banner java md5 checkbox menu Internet prototype css load form

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web

Nice AJAX Effects for Messages Box using MooTools

Label: MooTools form, AJAX MooTools, MooTools JavaScript, AJAX form MooTools, MooTools AJAX example, MooTools AJAX tutorial, AJAX message box, AJAX loading message, message box code, JavaScript message box

Write your comment

JavaScript by day

Links