Full version: jsB@nk » Framework » MooTools » Nice AJAX Effects for Messages Box using MooTools
URL: https://www.javascriptbank.com/nice-ajax-messages-box-using-mootools.html
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
Full version: jsB@nk » Framework » MooTools » Nice AJAX Effects for Messages Box using MooTools
URL: https://www.javascriptbank.com/nice-ajax-messages-box-using-mootools.html
<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><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.comwindow.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>Press "Save"</p><div id="box"></div><input name="" type="text" /><input id="save_button" name="save_button" type="button" value="save"/>
/javascript/mootools.js