fade out overlay on hide message

bitsteller · Oct 18, 2012 · 1163b28 · 1163b28
1 parent 308a63a
commit 1163b28
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 6 deletions.
diff --git a/js/osm-isometric-3d.js b/js/osm-isometric-3d.js
@@ -112,9 +112,10 @@ function getHumanReadableDate(date) {
 
 function showMessage(title, innerHTML) {
 	hideMessage();
-   var overlay = document.createElement("div");
-   overlay.setAttribute("id","overlay");
-   overlay.setAttribute("class", "overlay");
+    var overlay = document.createElement("div");
+    overlay.setAttribute("id","overlay");
+    overlay.setAttribute("class", "overlay");
+	overlay.setAttribute("onClick", "hideMessage()");
 
    var error = document.createElement("div");
    error.setAttribute("id","message");
@@ -135,7 +136,30 @@ function hideMessage() {
 	}
 	try {
 		var overlay = document.getElementById("overlay");
-		document.body.removeChild(overlay);
+		if (overlay.style.animationName !== undefined) {
+			overlay.addEventListener('animationEnd', function(){
+									 document.body.removeChild(overlay);
+									 }, false);
+			overlay.style.animationName = "fadeOut";
+		}
+		else if (overlay.style.webkitAnimationName !== undefined) {
+			overlay.addEventListener('webkitAnimationEnd', function(){
+									 document.body.removeChild(overlay);
+									 }, false);
+			overlay.style.webkitAnimationName = "fadeOut";
+		}
+		else if (overlay.style.mozAnimationName !== undefined) {
+			overlay.addEventListener('mozAnimationEnd', function(){
+									 document.body.removeChild(overlay);
+									 }, false);
+			overlay.style.mozAnimationName = "fadeOut";
+		}
+		else if (overlay.style.oAnimationName !== undefined) {
+			overlay.addEventListener('oAnimationEnd', function(){
+									 document.body.removeChild(overlay);
+									 }, false);
+			overlay.style.oAnimationName = "fadeOut";
+		}
 	}
 	catch (err) {
 

diff --git a/style.css b/style.css
@@ -230,7 +230,7 @@ table {
 
 #info{
 	width:auto;
-	min-height:50px;
+	min-height:36px;
 	height:5%;
 	padding-left:10px;
 	padding-right:10px;
@@ -289,7 +289,7 @@ table {
 
 #footer{
 	margin-top:10px;
-	min-height:60px;
+	min-height:30px;
 }
 
 #github-commits-osm2pov ul {
@@ -407,4 +407,31 @@ table {
 	-moz-animation-name: fadeIn;
 	-o-animation-name: fadeIn;
 	animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeOut {
+	0% {opacity: .7;}
+	100% {opacity: 0;}
+}
+
+@-moz-keyframes fadeOut {
+	0% {opacity: .7;}
+	100% {opacity: 0;}
+}
+
+@-o-keyframes fadeOut {
+	0% {opacity: .7;}
+	100% {opacity: 0;}
+}
+
+@keyframes fadeOut {
+	0% {opacity: .7;}
+	100% {opacity: 0;}
+}
+
+.fadeOut {
+	-webkit-animation-name: fadeOut;
+	-moz-animation-name: fadeOut;
+	-o-animation-name: fadeOut;
+	animation-name: fadeOut;
 }