advanced code snippet search

We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

dertimbo on 07/11/06


Tagged

ajax notification message request


Versions (?)


Who likes this?

13 people have marked this snippet as a favorite

luman
xaviaracil
meth
visualAesthetic
peterF
shachi
jbo
vali29
heinz1959
benrasmusen
pagetoscreen
gAmUssA
blackabee


LoadingMessage for AJAX requests

Published in: JavaScript 

URL: http://www.freshlabs.de/journal/archives/2006/07/ajax-loadingmessage-in-json/

Creates a notification message for AJAX requests. Dependencies: prototype.js, script.aculo.us.

CSS-Styles: http://snipplr.com/view/348/loadingmessage-for-ajax-requests-css/

Plain TextExpand 
  1. // ## LoadingMessage
  2. // ## Version: 0.6
  3. // ## Author: Tim Isenheim - http://blog.freshlabs.de 
  4.  
  5. var LoadingMessage = {
  6. imageURL : 'ajax-loader.gif',
  7. waitImg : null,
  8. containerId : "loading-message",
  9. loadTextId : "loading-text",
  10. waitImgId : "loading-image",
  11. waitImgWidth : 16,
  12. waitImgHeight : 16,
  13.  
  14. init : function(){
  15. 	this.waitImg = document.createElement('img');
  16. 	this.waitImg.setAttribute('src', this.imageURL);
  17. 	this.waitImg.setAttribute('height', this.waitImgHeight);
  18. 	this.waitImg.setAttribute('width', this.waitImgWidth);
  19. 	this.waitImg.setAttribute('alt','loading...');
  20. 	this.waitImg.id = this.waitImgId;
  21. 	this.waitImg.style.border = '0';
  22. 	this.waitImg.style.backgroundColor = 'transparent';
  23. 	this.waitImg.style.margin = '0';
  24. 	this.waitImg.style.padding = '0';
  25. },
  26.  
  27. append : function(where){
  28. 	var parent = $(where);
  29. 	var loadbox;
  30. 	if(!$(this.containerId)){
  31. 		loadbox = document.createElement('div');
  32. 		var loadtext = document.createElement('div')
  33. 		loadbox.id = this.containerId;
  34. 		loadtext.id = this.loadTextId;
  35. 		txt = document.createTextNode(" loading");
  36. 		loadtext.appendChild(this.waitImg);
  37. 		loadtext.appendChild(txt);
  38. 		loadbox.appendChild(loadtext);
  39. 	}
  40. 	else loadbox = $(this.containerId);
  41. 	loadbox.style.display = "none";
  42. 	new Effect.Appear(loadbox, { to: 0.7, queue: 'end' });
  43. 	parent.appendChild(loadbox);
  44. },
  45.  
  46. remove : function(){
  47. 	new Effect.Fade(this.containerId, {duration: 0.25, queue: 'end' });
  48. }
  49.  
  50. } // ### .LoadingMessage
  51.  
  52.  
  53. // Attaching the init function to the window.onload event
  54. Event.observe(window,'load', function(){
  55.     LoadingMessage.init();
  56. });

Report this snippet 

You need to login to post a comment.