Ticket #4796: resize-relative.html

File resize-relative.html, 1.4 KB (added by subzero66, 10 years ago)

Resizable for relative positioned divs

Line 
1<!doctype html>
2<html lang="en">
3<head>
4        <title>jQuery UI Resizable - Resize Relative</title>
5        <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6        <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7        <script type="text/javascript" src="ui/ui.core.js"></script>
8        <script type="text/javascript" src="ui/ui.resizable.js"></script>
9    <script type="text/javascript" src="ui/ui.draggable.js"></script>
10        <link type="text/css" href="../demos.css" rel="stylesheet" />
11       
12        <script type="text/javascript">
13        $(function() {
14                $("#resizable1").resizable({
15        containment: '#inner_container'
16                });
17       
18        $("#resizable1").draggable({
19        containment: '#inner_container'
20                });
21       
22        $("#resizable2").resizable({
23        containment: '#inner_container'
24                });
25       
26        $("#resizable2").draggable({
27        containment: '#inner_container'
28                });
29        });
30        </script>
31</head>
32<body>
33<div style="margin: 0 auto; text-align:center; width: 900px; height: 900px; border:2px black solid;" id="inner_container">
34       
35<div id="resizable1" style="position: relative; top:200px; left: 50px; width: 300px; height: 250px; background: grey">
36        <h3 class="ui-state-active">Resize</h3>
37</div>
38
39<div id="resizable2" style="position: relative; top:100px; left: 250px; width: 260px; height: 450px; background: grey">
40        <h3 class="ui-widget-header">will also resize</h3>
41</div>
42
43</div>
44
45</body>
46</html>