Responsive popdown

Wixel · Sep 30, 2015 · 9314f34 · 9314f34
1 parent fbcc033
commit 9314f34
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -5,108 +5,120 @@
 	<meta name="author" content="Sean Nieuwoudt" />
 	<meta name="robots" content="all" />
 	<title>jQuery Popdown Plugin Demo</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 	<link rel="stylesheet" href="/css/jquery.popdown.css">
-	
+
 	<style>
 		body, html{
 			background-color:#EEEEEE;
 			font-family: Georgia, Times, "Times New Roman", serif;
 			font-size:26px;
 			text-align:center;
 		}
-		
+
 		a{
 			color:#00A0C6;
 		}
-		
+
 		a:hover{
 			color:#13819b;
 		}
-		
+
 		h1{
 			font-family: "Helvetica Neue", Helvetica, "pragmatica-web", Arial, sans-serif;
-			font-size:66px;
+			font-size:33px;
 			color:#727272;
 			padding-top:0px;
 			margin-top:0;
 		}
-		
+
 		.contain p{
 			display:block;
 			margin:0 auto;
-			width:720px;
+			max-width:720px;
 			color:#B3B3B1;
+			padding: 10px;
+			line-height: 1.4em;
 			padding-bottom:50px;
 		}
-		
+
 		p a.btn{
 			display:inline-block;
 			border:4px solid #d8d8d8;
 			color:#d1d1d1;
 			text-decoration:none;
 			padding:10px;
+			margin-bottom: 20px;
 		  	-webkit-border-radius: 5px;
 		  	-moz-border-radius: 5px;
-		  	border-radius: 5px;		
+		  	border-radius: 5px;
 		  	-moz-transition-duration: 0.2s;
 		  	-webkit-transition-duration: 0.2s;
 		  	-o-transition-duration: 0.2s;
-		  	transition-duration: 0.2s;	
+		  	transition-duration: 0.2s;
 		}
-		
+
 		p a.btn:hover{
 			color:#F7656A;
 			border:4px solid #F7656A;
-		}		
-		
+		}
+
 		a.logo{
 			display:block;
 			text-indent:-9999px;
 			background:url(../img/wixel.png) no-repeat;
 			width:33px;
 			height:33px;
-			margin:100px auto;
+			margin:50px auto;
 		}
-	
+
 		div.share{
 			text-align:center;
 		}
-		
+
 		.small-text{
 			font-size:13px;
 		}
+		@media only screen and (min-width: 480px){
+			h1{
+				font-size: 66px;
+			}
+			a.logo{
+				margin:100px auto;
+			}
+		}
 	</style>
 </head>
 <body class="demo-page">
 
 	<a href="http://wixelhq.com" class="logo" title="Wixel - A custom software development studio">Wixel - A custom software development studio</a>
-		
+
 	<h1>jQuery Popdown Plugin</h1>
-	
+
 	<section class="contain">
 		<p>
 			Sometimes you just need a little popdown to spice up your interface. Here are a few examples:
 		</p>
-	
+
 		<p>
 			<a href="/pages/image.html" class="popdown btn" title="Grumpy Demo">Grumpy Demo</a>
 			<a href="/pages/youtube.html" class="popdown btn" title="Youtube Demo">Youtube Demo</a>
-			<a href="/pages/content.html" class="popdown btn" title="Content Demo">Content Demo</a>	
+			<a href="/pages/content.html" class="popdown btn" title="Content Demo">Content Demo</a>
 		</p>
-	
+
 		<p>
 			<img src="/img/browsers.png" alt="Testing on IE, FireFox, Chrome &amp; Safari">
 		</p>
-	
+
 		<p class="small-text">
 			Please <a href="https://twitter.com/intent/tweet?hashtags=javascript&original_referer=http%3A%2F%2Fwixel.github.io%2Fjquery-popdown&related=SeanNieuwoudt&text=Awesome%20jQuery%20Popdown%20Plugin&tw_p=tweetbutton&url=http%3A%2F%2Fwixel.github.io%2Fjquery-popdown&via=Wixelhq">share on Twitter</a>
 			 or <a href="http://github.com/Wixel/jquery-popdown">download</a> over at Github.
 		</p>
 	</section>
-	
-	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>	
-	<script type="text/javascript" src="/lib/jquery.popdown.js?v=1" /></script>	
-	
+
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
+	<script type="text/javascript" src="/lib/jquery.popdown.js?v=1" /></script>
+
 	<script type="text/javascript">
 		$(document).ready(function(){
 			$('.popdown').popdown();

diff --git a/lib/jquery.popdown.js b/lib/jquery.popdown.js
@@ -37,7 +37,7 @@
 
 		// Construct the content container
 		container = $('<div class="popdown-loading" />').attr('id', 'popdown-dialog').css({
-			width   : options.width,
+			maxWidth   : options.width,
 			height  : options.height,
 			zIndex	: 99999,
 			margin	: '0 auto',