fills/fills2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>filler</title>
		<style>
			.container {
				width: 320px;
				height: 320px;
				border: 1px dashed blue;
				margin: 20px;
			}
			.header {
				width: 320px;
				height: 60px;
				background-color: green;
			}
			.content {
				background-color: red;			
			}
			#containerV,
			#containerH {
				float: left;
			}

			#contentH {
				height: 320px;
			}			
		</style>
	</head>
	<body>
	
		
		<div id="filler_tests">
			<div id="containerV" class="container">
				<button name="adjustHeight">Adjust Height</button>			
				<div id="headerV" class="header"></div>
				<div id="contentV" class="content"></div>
			</div>
			
			<div id="containerH" class="container">
				<button name="adjustWidth">Adjust Width</button>			
				<div id="contentH" class="content"></div>
			</div>							
		</div>
		
		<script type='text/javascript' 
                src='../../../steal/steal.js'>   
        </script>
		<script type='text/javascript'>
			steal('jquery/dom/fills').then(function($){
				$("button[name=adjustWidth]").click(function(ev) {
					var w = $("#containerH").width();
					w == 320 ? $("#containerH").width(480) : $("#containerH").width(320);
					$("#containerH").trigger("resize");					
				});
				$("button[name=adjustHeight]").click(function(ev) {
					var h = $("#containerV").height();
					h == 320 ? $("#containerV").height(480) : $("#containerV").height(320);
					$("#containerV").trigger("resize");
				});				
				$("#contentV").fills();

				$("#contentH").fills( { width: true } );
				$("#containerH").trigger("resize");				
								
			})
		</script>
	</body>
</html>