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/


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.