February 23rd, 2009
Tutorial : Overlay a AJAX Spinner in the center of Web Page using Prototype
Complete Code – HTML
HTML Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Copyright [c] 2009 Vision Master Designs.com -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loading Spinner</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.0.3",{uncompressed:false});
google.load("scriptaculous", "1.8.1",{uncompressed:false});
</script>
<script type="text/javascript">
function show_text() {
new Ajax.Request('echo.php', {
method: 'post',
parameters: { mymsg: $('input_text').value },
onSuccess: function(r) { $('update').update(r.responseText) }
});
}
document.observe("dom:loaded", function() {
$('loading').hide();
Ajax.Responders.register({
onCreate: function() {
new Effect.Opacity('page', { from: 1.0, to: 0.3, duration: 0.7 });
new Effect.toggle('loading', 'appear');
},
onComplete: function() {
new Effect.Opacity('page', { from: 0.3, to: 1, duration: 0.7 });
new Effect.toggle('loading', 'appear');
}
});
});
</script>
<style>
body {
font:normal 16px Tahoma, Geneva, sans-serif;
}
#page {
background-color:#EEE;
padding:20px;
margin:0 auto;
width:300px;
text-align:center;
}
#update {
border:1px dashed #333;
padding:10px;
color:#333;
margin:10px;
}
input {
font:normal 16px Tahoma, Geneva, sans-serif;
}
/* Loading box of width=height=100px with a spinner placed at the center */
#loading {
width:100px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
background:url(spinner3-black.gif) no-repeat center #fff;
text-align:center;
padding:10px;
font:normal 16px Tahoma, Geneva, sans-serif;
border:1px solid #666;
margin-left: -50px;
margin-top: -50px;
z-index:2;
overflow: auto;
}
</style>
</head>
<body>
<!-- Loading DIV. Should be just below BODY -->
<div id="loading">
Loading...
</div>
<div id="page">
<div id="update">
<!-- AJAXED Text will be displayed here -->
</div>
<div id="form">
<input name="input_text" id="input_text" type="text" /><br /><br />
<input type="button" value="Show My Message" id="input_button" name="input_button" onclick="show_text();" />
</div>
</div>
</body>
</html>
PHP Code echo.php
< ?php //echo.php sleep(1); if(isset($_POST['mymsg']) && $_POST['mymsg'] != "") echo "You typed <strong>" . $_POST['mymsg'] . ""; else echo "You didn`t type anything"; ?>
May 26, 2010 at 8:03 am
how to change the timing of this spinner?
May 11, 2010 at 4:04 pm
does not work in IE6
December 17, 2009 at 2:20 pm
Nice example! Thanks!
April 25, 2009 at 9:36 pm
I will try to post my code again (with no tags)
style /* Loading box of width=height=100px with a spinner placed at the center */ #loading { [your code here] } / style script type="text/javascript" document.observe("dom:loaded", function() { [your code here] } / script div id="page" div id="update" center img src="short.png" /center /div div id="form" center a href="#" onclick = "new Ajax.Updater('update', '/mostra_foto_/10', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('433973460cdbc4fb77d4ae450290762d1ffbb983')}); return false;"> img alt="Citrons_multisize_" border="1" src="/system/imagens/10/thumb/citrons_multisize_.jpg?1240515952" / a href="#" onclick = "new Ajax.Updater('update', '/mostra_foto_/9', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('433973460cdbc4fb77d4ae450290762d1ffbb983')}); return false;"> img alt="Xdg" border="1" src="/system/imagens/9/thumb/xdg.jpg?1240515927" / a href="#" onclick = "new Ajax.Updater('update', '/mostra_foto_/7', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('433973460cdbc4fb77d4ae450290762d1ffbb983')}); return false;"> img alt="Cimg3538" border="1" src="/system/imagens/7/thumb/CIMG3538.JPG?1240495758" / a href="#" onclick = "new Ajax.Updater('update', '/mostra_foto_/6', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('433973460cdbc4fb77d4ae450290762d1ffbb983')}); return false;"> img alt="Cimg3540" border="1" src="/system/imagens/6/thumb/CIMG3540.JPG?1240460705" / a href="#" onclick = "new Ajax.Updater('update', '/mostra_foto_/5', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('433973460cdbc4fb77d4ae450290762d1ffbb983')}); return false;"> img alt="Cimg3541" border="1" src="/system/imagens/5/thumb/CIMG3541.JPG?1240460611" / / center / div / div div id="loading" Loading... / divApril 29, 2009 at 12:36 am
Hey,
I need more information regarding this.
I haven`t been able to understand what you are trying to do yet. there is a ajax updater on every link ?
April 29, 2009 at 12:55 am
Hello! Tnx for aswering.. my problem was, as I was testing localy the pictures were loading too fast unlike your demo that have a delay, so the fix for me was doing like this:
<code lang="js"> Ajax.Responders.register({ onCreate: function() { new Effect.Opacity('page', { from: 1.0, to: 0.5, duration: 0.6 }); new Effect.Appear('loading'); }, onComplete: function() { new Effect.Opacity('page', { from: 0.8, to: 1.0, duration: 0.1 }); $('loading').hide() new Effect.Fade('loading'); } }); </code>April 29, 2009 at 1:04 am
Ohh nice,
I hope you have that sorted out. I am extremely sorry for not attending your query earlier, was busy with the site design
Anyways, the code seems good, if you have any other queries lemme know
Regards
April 25, 2009 at 9:30 pm
Hi.. great blog layout impressive! And this loading stuff is pretty cool too
So I´m trying to use your code but it is kinda stucking the loading picture I like prototype, but still kinda noob if you have a idea please let me know, my code (short version):
[code]
/* Loading box of width=height=100px with a spinner placed at the center */
#loading {
[your code here]
}
document.observe("dom:loaded", function() {
[your code here]
}
Carregando...
[/code]
So.. after i click on a thumb the update div gets successfully updated, but until i click another thumb the loading box stay on the center