examples/borderlayout-resize.html

<!doctype html>
	<head>
		<title>Resizing Border Layout example</title>
		<meta charset="utf-8">
		<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
		<script type="text/javascript" src="../lib/jquery.sizes.js"></script>
		<script type="text/javascript" src="../lib/jlayout.border.js"></script>
		<script type="text/javascript" src="../lib/jquery.jlayout.js"></script>
		<script type="text/javascript">
			jQuery(function($)
			{
				var container = $('.layout');

				function relayout() {
					container.layout({resize: false});
				}
				relayout();

				$(window).resize(relayout);

				$('.north').resizable({
					handles: 's',
					stop: relayout
				});

				$('.south').resizable({
					handles: 'n',
					stop: relayout
				});

				$('.east').resizable({
					handles: 'w',
					stop: relayout
				});

				$('.west').resizable({
					handles: 'e',
					stop: relayout
				});
			});
		</script>
		<style>
			html, body {	
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
				overflow: hidden;
			}

			.layout {
				height: 100%;
			}

			.center, .east, .west, .north, .south {
				background-color: rgb(220,220,220);
				border: 1px solid rgb(200,200,200);
				text-align: center;
                display: inline-block;
			}

			.west, .east {
				width: 8%;
			}

			.north, .south {
				height: 10%;
			}
		</style>
	</head>
	<body>
		<div data-layout='{"type": "border", "hgap": 3, "vgap": 3}' class="layout">
			<div class="center">
				Center
				<h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
			</div>
			<div class="east">
				East
			</div>
			<div class="west">
				West
			</div>
			<div class="north">
				North
			</div>
			<div class="south">
				South
			</div>
		</div>
	</body>
</html>