Comments on: Tutorial : Overlay a AJAX Spinner in the center of Web Page using Prototype

By: Dan

Dan — Sat, 21 Aug 2010 08:00:06 +0000

nothing works in IE6!

By: vinin

vinin — Wed, 26 May 2010 08:03:03 +0000

how to change the timing of this spinner?

By: Roubaozi

Roubaozi — Tue, 11 May 2010 16:04:51 +0000

does not work in IE6

By: Lolcat

Lolcat — Thu, 17 Dec 2009 14:20:30 +0000

Nice example! Thanks!

By: Michael

Michael — Tue, 28 Apr 2009 19:34:59 +0000

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

By: Fabiano Soriani

Fabiano Soriani — Tue, 28 Apr 2009 19:25:41 +0000

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="php"]


	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]

By: Michael

Michael — Tue, 28 Apr 2009 19:06:29 +0000

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 ?

By: Fabiano Soriani

Fabiano Soriani — Sat, 25 Apr 2009 16:06:29 +0000

I will try to post my code again (with no tags) [code lang="php"] 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... / div [/code]

By: Fabiano Soriani

Fabiano Soriani — Sat, 25 Apr 2009 16:00:34 +0000

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