updated test index.html to demonstrate new verticalOffset and parentSelector options

thinkswan · thinkswan · commit a9d4ab4e368b · 2014-03-13T09:22:18.000-06:00
diff --git a/index.html b/index.html
@@ -1,61 +1,71 @@
-<!doctype html>  
+<!DOCTYPE html>
 
-<html lang="nl">
+<html>
 
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-	
-	<!-- 
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+	<!--
 	This website was carefully constructed by
 	Interactive Studios
 	http://www.interactivestudios.nl
 	-->
-	
+
 	<title>FlexVerticalCenter test</title>
-	
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-	
-	<style type="text/css">
-		/* make sure we have a very flexible container */
+
+	<style>
 		body{
 			margin: 0;
-			height: 100%;
-		}
-		html{
-			height: 100%;
 		}
-		
-		.the-item{
-			width: 20%;
-			background: #eee;
-			margin: 0 auto;
+		.box {
+			background: #333;
+			height: 300px;
+			margin-bottom: 30px;
 		}
-		img{
-			max-width: 100%;
+		.box2 {
+		  background: #ccc;
+		  height: 100px;
 		}
+		p {
+		  width: 20%;
+			margin: 0 auto;
+			color: #fff;
+			font-weight: bold;
+	  }
 	</style>
-	
 </head>
 
-
 <body>
+	<div class="box">
+		<p class="first-item">
+			This box is 20% wide and is always vertically centered within its parent, even if the view port changes (resize your window to see the result).
+		</p>
+	</div>
 
-	<div class="the-item">
-		<p>
-			This box is 20% wide and is always vertically centered within it's parent, even if the view port changes (resize your window to see the result).
+	<div class="box">
+		<p class="second-item">
+			This box is 20% wide and is always vertically centered within its parent with a -50px offset, even if the view port changes (resize your window to see the result).
 		</p>
 	</div>
-		
-	
+
+	<div class="box parent">
+	  <div class="box2">
+  		<p class="third-item">
+  			This box is 20% wide and is always vertically centered within the specified dark grey parent, even if the view port changes (resize your window to see the result).
+  		</p>
+  	</div>
+	</div>
+
 	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 	<script src="jquery.flexverticalcenter.js"></script>
 
 	<script>
-		$('.the-item').flexVerticalCenter();
+		$('.first-item').flexVerticalCenter('padding-top');
+		$('.second-item').flexVerticalCenter('padding-top', { verticalOffset: '50px' });
+		$('.third-item').flexVerticalCenter('padding-top', { parentSelector: '.parent' });
 	</script>
-
-  
 </body>
 
-</html>
+</html>
