<!doctype html>
<!--[if lt IE 8 ]> <html lang="en" class="old"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
</head>
<body>
<header>
<h1>"Responsiveness" Tester</h1>
<form>
<fieldset>
<div>
<a href="#" class="refresh">Refresh</a> | <a href="#" class="rotate">Rotate</a>
</div>
<div>
<label>Width:</label>
<select name="width">
<option value="240">240</option>
<option value="320" selected="selected">320</option>
<option value="480">480</option>
<option value="564">564</option>
<option value="600">600</option>
<option value="640">640</option>
<option value="768">768</option>
<option value="800">800</option>
<option value="960">960</option>
<option value="1024">1024</option>
<option value="1140">1140</option>
<option value="1280">1280</option>
</select>
</div>
<div>
<label>Height:</label>
<select name="height">
<option value="240">240</option>
<option value="320">320</option>
<option value="480" selected="selected">480</option>
<option value="564">564</option>
<option value="600">600</option>
<option value="640">640</option>
<option value="768">768</option>
<option value="800">800</option>
<option value="960">960</option>
<option value="1024">1024</option>
<option value="1140">1140</option>
<option value="1280">1280</option>
</select>
</div>
<div>
<label>URL:</label>
<input type="text" name="url" value="" placeholder="Enter URL" size="30">
</div>
</fieldset>
</form>
</header>
<article>
<iframe src="http://sitesbyjoe.com" width="320" height="480" border="0" id="iframe"></iframe>
<p>Pretending you have a bunch of devices.</p>
</article>
</body>
</html>* {
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
transition: all 1.5s ease;
}
body {
font-family: sans-serif;
color: #333;
background-color: #eee;
text-align: center;
padding-top: 68px;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(0,0,0,0.6);
padding: 6px 20px;
color: #fff;
}
header h1 {
color: #fff;
font-size: 18px;
float: left;
}
header form {
float: right;
margin-right: 20px;
}
header form fieldset div {
display: inline-block;
}
header form select {
font-size: 16px;
}
#iframe {
border: 0;
overflow: auto;
border-radius: 2em;
border: 3em solid #222;
margin-bottom: 2em;
}
fieldset {
border: 0;
}
legend {
font-weight: bold;
color: #555;
}
fieldset div {
display: inline-block;
}$(document).ready(function() {
$('form').submit(function(e) {
e.preventDefault();
});
// when the width changes...
$('select[name="width"]').change(function() {
$('#iframe').css('width',$(this).val());
});
// when the height changes...
$('select[name="height"]').change(function() {
$('#iframe').css('height',$(this).val());
});
// alert the url if changed
$('input[name="url"]').change(function() {
$('#iframe').attr('src', $(this).val());
});
$('.rotate').click(function(e) {
e.preventDefault();
var width = $('select[name="width"]').val();
var height = $('select[name="height"]').val();
$('select[name="width"]').val(height);
$('select[name="height"]').val(width);
$('select').change();
});
$('.refresh').click(function(e) {
e.preventDefault();
$('#iframe').attr('src', $('input[name="url"]').val());
});
});
External CSS
This Pen doesn't use any external CSS resources.