Posted By

maceblue on 07/30/12


Tagged

message alert fade


Versions (?)

message fade-in/out


 / Published in: JavaScript
 

shows a messagebox (better alert) with fade effekt

  1. function message(text, bol_error) {
  2. var theBody = document.getElementsByTagName("body")[0];
  3. var theNode = document.createElement('div');
  4. var left = (screen.width/2)-250;
  5. var top = (screen.height/2);
  6. theNode.style.position = 'absolute';
  7. theNode.style.top = top+'px';
  8. theNode.style.left = left+'px';
  9. theNode.style.width = '300px';
  10. theNode.style.padding = '50px';
  11. theNode.style.textAlign = 'center';
  12. theNode.style.borderRadius = '1em';
  13. theNode.style.MozBorderRadius = '1em';
  14. theNode.style.fontSize = 'medium';
  15. theNode.style.opacity = 0.0;
  16. theNode.style.MozOpacity = 0.0;
  17. theNode.style.KhtmlOpacity = 0.0;
  18. theNode.style.filter = "alpha(opacity=100)";
  19. theNode.style.backgroundColor = (bol_error)? "#FFA1A1":"#F5F5F5";
  20. theNode.style.backgroundImage = 'url('+mxClient.imageBasePath+'/messagebox_warning.png)';
  21. theNode.style.backgroundPosition = '5px 5px';
  22. theNode.style.backgroundRepeat = 'no-repeat';
  23. theNode.style.border = '2px dashed #A6A6A6';
  24. theNode.style.display = "block";
  25. theNode.style.zIndex = '100';
  26. theNode.innerHTML = text;
  27. theBody.appendChild(theNode);
  28. fade('in',theNode,1000);
  29. setTimeout( function(){fade("out",theNode,2000)}, 3000);
  30. setTimeout( function(){theBody.removeChild(theNode)}, 6000);
  31. }
  32.  
  33. function fade(direction, elem, time) {
  34. if (typeof elem == 'undefined') return;
  35. (function go() {
  36. if(direction == 'in') {
  37. elem.style.opacity = parseFloat(elem.style.opacity)+0.1/time*1000;
  38. elem.style.MozOpacity = parseFloat(elem.style.opacity)+0.1/time*1000;
  39. elem.style.KhtmlOpacity = parseFloat(elem.style.opacity)+0.1/time*1000;
  40. // for IE
  41. elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';
  42.  
  43. if( elem.style.opacity < 1 ) {
  44. setTimeout( go, 100 );
  45. } else return;
  46. } else {
  47. elem.style.opacity = parseFloat(elem.style.opacity)-0.1/time*1000;
  48. elem.style.MozOpacity = parseFloat(elem.style.opacity)-0.1/time*1000;
  49. elem.style.KhtmlOpacity = parseFloat(elem.style.opacity)-0.1/time*1000;
  50. // for IE
  51. elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';
  52.  
  53. if( elem.style.opacity > 0 ) {
  54. setTimeout( go, 100 );
  55. } else return;
  56. }
  57. })();
  58. }

Report this snippet  

You need to login to post a comment.