Skip to content

Instantly share code, notes, and snippets.

@chandu-io
Created August 5, 2013 06:33
Show Gist options
  • Select an option

  • Save chandu-io/6153882 to your computer and use it in GitHub Desktop.

Select an option

Save chandu-io/6153882 to your computer and use it in GitHub Desktop.
html :: shrinkable iframe snippet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Iframes</title>
<style type="text/css">
body, table, tr, td, iframe {
margin: 0;
padding: 0;
border: none;
}
table {
border-collapse: collapse;
}
.full {
width: 100%;
}
</style>
</head>
<body>
<table class="full">
<tr>
<td>
<iframe src="http://cnn.com/" class="full" frameborder="0">
<p>No iframe support for your browser. Try using Google Chrome.</p>
</iframe>
</td>
<td>
<iframe src="http://bbc.com/" class="full" frameborder="0">
<p>No iframe support for your browser. Try using Google Chrome.</p>
</iframe>
</td>
</tr>
<tr>
<td>
<iframe src="http://time.com/" class="full" frameborder="0">
<p>No iframe support for your browser. Try using Google Chrome.</p>
</iframe>
</td>
<td>
<iframe src="http://engadget.com/" class="full" frameborder="0">
<p>No iframe support for your browser. Try using Google Chrome.</p>
</iframe>
</td>
</tr>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var handler, resizer, timer, $win = $(window), $ifrm = $('iframe');
handler = function () {
clearTimeout(timer);
timer = setTimeout(resizer, 300);
};
resizer = function () {
var h1 = $win.height() - 8;
$ifrm.height(h1 / 2);
};
resizer();
$win.resize(handler);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment