Advanced Search

LoadingMessage for AJAX requests

/ Published in: JavaScript
Save to your folder(s)
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/

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.