Skip to content

Instantly share code, notes, and snippets.

@jlogsdon

jlogsdon/fluid_resize_grid.html

Created January 15, 2010 17:42
Show Gist options
  • Save jlogsdon/278251 to your computer and use it in GitHub Desktop.
Save jlogsdon/278251 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fluid_resize_grid.html
<!doctype html>
<html>
<head>
<title>Fluid Resize Dimensions</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
$(window).bind('resize', function() {
$('div[class^="span-"]').each(function() {
var span = $(this).attr('class').replace(/span-/, '');
var width = $(this).width();
$('p', this).html(span + ' = ' + width + 'px');
});
}).trigger('resize');
});
</script>
<style type="text/css">
div { border: 1px solid black; text-align: center; }
div.span-full { width: 100%; }
div.span-1 { width: 6.5%; }
div.span-2 { width: 13%; }
div.span-3 { width: 19.5%; }
div.span-4 { width: 26%; }
div.span-5 { width: 35.5%; }
div.span-6 { width: 42%; }
p { display: inline; background: red; color: white; padding: 0 1em; font-size: 1.5em; font-weight: bold; }
</style>
</head>
<body>
<div class="span-full">
<p></p>
</div>
<div class="span-1">
<p></p>
</div>
<div class="span-2">
<p></p>
</div>
<div class="span-3">
<p></p>
</div>
<div class="span-4">
<p></p>
</div>
<div class="span-5">
<p></p>
</div>
<div class="span-6">
<p></p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment