Ticket #4796: resize-relative.html

File resize-relative.html, 1.4 KB (added by subzero66, August 24, 2009 12:41AM UTC)

Resizable for relative positioned divs

<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Resizable - Resize Relative</title>
	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
	<script type="text/javascript" src="ui/ui.core.js"></script>
	<script type="text/javascript" src="ui/ui.resizable.js"></script>
    <script type="text/javascript" src="ui/ui.draggable.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	
	<script type="text/javascript">
	$(function() {
		$("#resizable1").resizable({
        containment: '#inner_container'
		});
        
        $("#resizable1").draggable({
        containment: '#inner_container'
		});
        
        $("#resizable2").resizable({
        containment: '#inner_container'
		});
        
        $("#resizable2").draggable({
        containment: '#inner_container'
		});
	});
	</script>
</head>
<body>
<div style="margin: 0 auto; text-align:center; width: 900px; height: 900px; border:2px black solid;" id="inner_container">
	
<div id="resizable1" style="position: relative; top:200px; left: 50px; width: 300px; height: 250px; background: grey">
	<h3 class="ui-state-active">Resize</h3>
</div>

<div id="resizable2" style="position: relative; top:100px; left: 250px; width: 260px; height: 450px; background: grey">
	<h3 class="ui-widget-header">will also resize</h3>
</div>

</div>

</body>
</html>

Download in other formats:

Original Format