Adds browser detection alert in simple example

tayan-serna · Apr 30, 2013 · c2456e3 · c2456e3
1 parent e02d32a
commit c2456e3
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 10 deletions.
diff --git a/examples/simple/css/browseralert.css b/examples/simple/css/browseralert.css
@@ -65,13 +65,15 @@
 
  .browser-overlay {
 	display: none;
-	background: black;
+
 	width: 100%;
 	height: 100%;
+
 	position: absolute;
 	top: 0px;
 	left: 0px;
-	background: rgba(0,0,0,0.8);
+
+	background: rgba(0,0,0,.7);
 
 	z-index: 5000;
 
@@ -84,16 +86,17 @@
 	-moz-animation: fadeout 0.4s ease-in-out both;
 }
 
- .browser-overlay .wrapper {
-	width: 480px;
+.browser-overlay .wrapper {
+	width: 400px;
 	padding: 40px;
-	box-sizing: border-box;
+
 	border-radius: 4px;
 	position: absolute;
 	top: 50%;
 	left: 50%;
-	margin-left: -210px;
-	margin-top: -201px;
+	margin-left: -240px;
+	margin-top: -240px;
+
 	box-shadow: rgba(0,0,0,0.4) 0px 0px 200px inset;
 
 	-webkit-animation: bounceInDown 0.6s ease both;

diff --git a/examples/simple/index.html b/examples/simple/index.html
@@ -24,12 +24,12 @@
 			<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
 		<![endif]-->
 
-		<div class="browser-overlay" style="display: block;">
+		<div class="browser-overlay">
 			<div class="wrapper">
 				<h2>This experiment works in <strong>webkit</strong> based browsers only!</h2>
 				<i class="icon-chrome" style="font-size: 50px; color: white; float: right;"></i>
-				<p>This means we cannot guarantee that everything would be properly displayed on your browser. Sorry.</p>
-				<small><a href="#">Close</a></small>
+				<p>This means we cannot guarantee that everything will be displayed properly on your browser. Sorry.</p>
+				<small><a href="#" class="close-button">Continue anyway &gt;</a></small>
 			</div>
 		</div>
 
@@ -43,6 +43,18 @@ <h2>This experiment works in <strong>webkit</strong> based browsers only!</h2>
 		<script type="text/javascript" src="../../build/ventus.js"></script>
 		<script type="text/javascript">
 			$(document).ready(function() {
+				var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+				var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
+				var $browserAlert = $('.browser-overlay');
+
+				if(!isChrome && !isSafari) {
+					$browserAlert.find('.close-button').click(function() {
+						$browserAlert.hide();
+					});
+
+					$browserAlert.show();
+				}
+
 				var wm = new Ventus.WindowManager();
 
 				var pos = 50;