-
Notifications
You must be signed in to change notification settings - Fork 0
/
Responsive Display Previewer.html
35 lines (31 loc) · 4.06 KB
/
Responsive Display Previewer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Display Previewer</title>
<!--
For full source code, 100's more DHTML scripts, and Terms Of Use,
visit http://www.dynamicdrive.com
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10, user-scalable=1">
<style type="text/css">*{margin:0;padding:0}html{height:100%;background:#000}body{height:100%;font-family:sans-serif}header{position:fixed;top:0;display:block;width:100%;background:#333;border-bottom:1px solid #ccc;text-align:center}header *{display:inline-block;line-height:3em}header hgroup{float:left}header h1{font-size:1em;margin:0}header h1 a{display:block;font-size:14px;height:3em;padding:0 .65em;margin:0;margin-right:-0.6em;margin-left:.5em;color:#ccc;text-decoration:none;font-weight:normal;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;transition:opacity .2s}header h1 a:hover{opacity:1}header h2{font-size:.618em;font-weight:normal;color:#ccc;position:relative}header h2 a{display:inline-block;background:url(/img/typecast-small.png) no-repeat center center;width:5.7em;text-indent:-9999em;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;transition:opacity .2s}header h2 a:hover{opacity:.8}#switcher{margin:auto}#switcher li{margin-left:1em;color:black;cursor:pointer;height:1em;opacity:.3;background:url(state-icons.png) no-repeat;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;transition:opacity .2s;color:white}#switcher li.active,#switcher li:hover{opacity:1}#switcher li{text-indent:-9999em;height:3em}li#auto,li#custom{text-indent:0;background:0;text-transform:uppercase;letter-spacing:.11em;font-size:.618em;font-weight:bold;position:relative;top:-0.2em}li#auto{margin-left:0}li#smartphone-landscape{width:1.1em;background-position:-1em .7em}li#smartphone-portrait{width:.6em;background-position:0 .7em}li#tablet-portrait{width:1.2em;background-position:-2.6em .7em}li#tablet-landscape{width:1.5em;background-position:-4em .7em}li#desktop{width:1.9em;background-position:-5.9em .7em}article{display:block;margin-top:3em;-webkit-transition:all 1s;-moz-transition:all 1s;transition:all 1s;height:100%;height:calc(100%-3em)}article #mask{display:block;content:".";background-color:black;background-color:rgba(0,0,0,0.5);width:100%;height:100%;position:fixed;z-index:0;margin-top:9999px;-webkit-transition:all 1s;-moz-transition:all 1s;transition:all 1s}iframe{background-color:white;display:block;border:0;margin:0 auto;-webkit-transition:all 1s;-moz-transition:all 1s;transition:all 1s}.auto iframe{width:100%;height:100%}.smartphone-portrait iframe{width:335px;height:100%}.smartphone-portrait #mask{margin-top:480px}.smartphone-landscape iframe{width:495px;height:100%}.smartphone-landscape #mask{margin-top:320px}.tablet-portrait iframe{width:783px;height:100%}.tablet-portrait #mask{margin-top:1024px}.tablet-landscape iframe{width:1039px;height:100%}.tablet-landscape #mask{margin-top:768px}.desktop iframe{width:1440px;height:100%}.desktop #mask{margin-top:900px}@media screen and (max-width:40em){#switcher{width:19em;position:absolute;right:3em}}@media screen and (max-width:27em){header{text-align:left}#switcher{text-align:left;width:auto;position:static}}</style>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" charset="utf-8" type="text/javascript"></script>
</head>
<body>
<header>
<ul id="switcher">
<li id="auto" class="active">Auto</li>
<li id="desktop" title="Desktop">Desktop</li>
<li id="tablet-landscape" title="Tablet Landscape">Tablet Landscape</li>
<li id="tablet-portrait" title="Tablet Portrait">Tablet Portrait</li>
<li id="smartphone-landscape" title="Smartphone Landscape">Smartphone Landscape</li>
<li id="smartphone-portrait" title="Smartphone Portrait">Smartphone Portrait</li>
</ul>
</header>
<article class="auto">
<div id="mask"></div>
<iframe class="auto" src="http://www.htmlpreviews.com/cloud/cricket/ebi6/"></iframe>
</article>
<script type="text/javascript">$("#switcher li").click(function(){$("article").attr("class",$(this).attr("id"));$("#switcher li.active").removeClass("active");$(this).addClass("active")});</script>
</body>
</html>