Skip to content

Instantly share code, notes, and snippets.

@vinbarnes
Created March 2, 2009 14:47
Show Gist options
  • Select an option

  • Save vinbarnes/72772 to your computer and use it in GitHub Desktop.

Select an option

Save vinbarnes/72772 to your computer and use it in GitHub Desktop.
<html>
<head>
<title>Yo</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
div = $('<div class="futureproof"><p>Future Feature</p></div>');
$(".future").each(function(i) {
offset = $(this).offset();
var id = "futureproof_" + i;
$(div).clone().css({
"z-index": 1000,
position: "absolute",
top: offset.top,
left: offset.left,
width: $(this).outerWidth(),
height: $(this).outerHeight(),
"background-color": "#000",
opacity: 0.4,
filter: "alpha(opacity=40)",
color: "#eee"
}).attr("id", id).insertBefore($(this));
$(this).resize(function() {
$("#"+id).css({
width: $(this).outerWidth(),
height: $(this).outerHeight()
});
});
});
$(window).resize(function() {
$(".future").resize();
});
});
</script>
</head>
<body>
<h1>Yo</h1>
<p>This is it</p>
<div id="mainform" class="future" style="border: solid 1px brown">
<form action="yo_submit" method="get" accept-charset="utf-8">
<p><input name="name" type="text" /></p>
<p><input type="submit" value="Continue &rarr;"></p>
</form>
</div>
<div class="future" style="margin-top:100px; border:1px solid blue; height: 200px;">
<p>stuff</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment