Skip to content

Instantly share code, notes, and snippets.

@nrkn

nrkn/iframe-rawgit.html

Last active August 29, 2015 14:19
Show Gist options
  • Save nrkn/00e1fb7cc4c7b43329a3 to your computer and use it in GitHub Desktop.
Save nrkn/00e1fb7cc4c7b43329a3 to your computer and use it in GitHub Desktop.
Download ZIP
Foundation Media Query Preview
Raw
iframe-rawgit.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation Media Query Preview</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
background: #eee;
}
iframe {
border: 0;
display: block;
width: 100%;
height: 100%;
overflow: scroll;
margin: auto;
}
</style>
</head>
<body>
<iframe id="wrapper" src="https://cdn.rawgit.com/nrkn/00e1fb7cc4c7b43329a3/raw/33386349c5fbfe23bbf04e97208f2c6bde74f142/index.html" seamless></iframe>
</body>
</html>
Raw
iframe.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation Media Query Preview</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
background: #eee;
}
iframe {
border: 0;
display: block;
width: 100%;
height: 100%;
overflow: scroll;
margin: auto;
}
</style>
</head>
<body>
<iframe id="wrapper" src="index.html" seamless></iframe>
</body>
</html>
Raw
index.html
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation Media Query Preview</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<style>
h1 {
background: #eee;
}
header {
background: #fafafa;
}
.inline-list a {
text-align: center;
display: inline-block;
padding: 0.25em;
}
.selected {
background: #39f;
color: #fff !important;
}
</style>
</head>
<body>
<header>
<div class="row">
<div class="small-12 columns">
<ul class="inline-list">
<li><a href="#" data-key="view-large" title="Large"><i class="fa fa-desktop fa-2x fa-fw"></i><br /><small>Large</small></a></li>
<li><a href="#" data-key="view-medium" title="Medium"><i class="fa fa-tablet fa-2x fa-fw"></i><br /><small>Medium</small></a></li>
<li><a href="#" data-key="view-small" title="Small"><i class="fa fa-mobile fa-2x fa-fw"></i><br /><small>Small</small></a></li>
</ul>
</div>
</div>
</header>
<div class="row">
<div class="large-3 medium-4 small-6 columns">
<h1>1</h1>
</div>
<div class="large-3 medium-4 small-6 columns">
<h1>2</h1>
</div>
<div class="large-3 medium-4 small-6 columns">
<h1>3</h1>
</div>
<div class="large-3 medium-4 small-6 columns end">
<h1>4</h1>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/js/foundation.min.js"></script>
<script>
$(document).foundation();
var sizes = {
'view-large': 1024,
'view-medium': 800,
'view-small': 320
};
$( function(){
var $actions = $( 'a[data-key]' );
var $parent = $( window.parent.document );
var parentWidth = $parent.width();
var $iframe = $parent.find( '#wrapper' );
$actions.click( function(){
var $a = $( this );
$actions.removeClass( 'selected' );
$a.addClass( 'selected' );
var key = $a.attr( 'data-key' );
parentWidth = $parent.width();
var size = key === 'view-large' && parentWidth > sizes[ key ] ?
parentWidth : sizes[ key ];
$iframe.width( size );
return false;
});
$actions.first().click();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment