Advanced Search

message fade-in/out

/ Published in: JavaScript
Save to your folder(s)
shows a messagebox (better alert) with fade effekt

Expand | Embed | Plain Text

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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.