demos/position/default.html

<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>jQuery UI Position - Default functionality</title>
        <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
        <script src="../../jquery-1.9.1.js"></script>
        <script src="../../ui/jquery.ui.core.js"></script>
        <script src="../../ui/jquery.ui.widget.js"></script>
        <script src="../../ui/jquery.ui.mouse.js"></script>
        <script src="../../ui/jquery.ui.draggable.js"></script>
        <script src="../../ui/jquery.ui.position.js"></script>
        <link rel="stylesheet" href="../demos.css">
        <style>
        #parent {
                width: 60%;
                height: 40px;
                margin: 10px auto;
                padding: 5px;
                border: 1px solid #777;
                background-color: #fbca93;
                text-align: center;
        }
        .positionable {
                position: absolute;
                display: block;
                right: 0;
                bottom: 0;
                background-color: #bcd5e6;
                text-align: center;
        }
        #positionable1 {
                width: 75px;
                height: 75px;
        }
        #positionable2 {
                width: 120px;
                height: 40px;
        }
        select, input {
                margin-left: 15px;
        }
        </style>
        <script>
        $(function() {
                function position() {
                        $( ".positionable" ).position({
                                of: $( "#parent" ),
                                my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
                                at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
                                collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
                        });
                }

                $( ".positionable" ).css( "opacity", 0.5 );

                $( "select, input" ).bind( "click keyup change", position );

                $( "#parent" ).draggable({
                        drag: position
                });

                position();
        });
        </script>
</head>
<body>

<div id="parent">
        <p>
        This is the position parent element.
        </p>
</div>

<div class="positionable" id="positionable1">
        <p>
        to position
        </p>
</div>

<div class="positionable" id="positionable2">
        <p>
        to position 2
        </p>
</div>

<div style="padding: 20px; margin-top: 75px;">
        position...
        <div style="padding-bottom: 20px;">
                <b>my:</b>
                <select id="my_horizontal">
                        <option value="left">left</option>
                        <option value="center">center</option>
                        <option value="right">right</option>
                </select>
                <select id="my_vertical">
                        <option value="top">top</option>
                        <option value="middle">center</option>
                        <option value="bottom">bottom</option>
                </select>
        </div>
        <div style="padding-bottom: 20px;">
                <b>at:</b>
                <select id="at_horizontal">
                        <option value="left">left</option>
                        <option value="center">center</option>
                        <option value="right">right</option>
                </select>
                <select id="at_vertical">
                        <option value="top">top</option>
                        <option value="middle">center</option>
                        <option value="bottom">bottom</option>
                </select>
        </div>
        <div style="padding-bottom: 20px;">
                <b>collision:</b>
                <select id="collision_horizontal">
                        <option value="flip">flip</option>
                        <option value="fit">fit</option>
                        <option value="flipfit">flipfit</option>
                        <option value="none">none</option>
                </select>
                <select id="collision_vertical">
                        <option value="flip">flip</option>
                        <option value="fit">fit</option>
                        <option value="flipfit">flipfit</option>
                        <option value="none">none</option>
                </select>
        </div>
</div>

<div class="demo-description">
<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
<br>Drag around the parent element to see collision detection in action.</p>
</div>
</body>
</html>
1	torben	2125	<!doctype html>
2			<html lang="en">
3			<head>
4			<meta charset="utf-8">
5			<title>jQuery UI Position - Default functionality</title>
6			<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7			<script src="../../jquery-1.9.1.js"></script>
8			<script src="../../ui/jquery.ui.core.js"></script>
9			<script src="../../ui/jquery.ui.widget.js"></script>
10			<script src="../../ui/jquery.ui.mouse.js"></script>
11			<script src="../../ui/jquery.ui.draggable.js"></script>
12			<script src="../../ui/jquery.ui.position.js"></script>
13			<link rel="stylesheet" href="../demos.css">
14			<style>
15			#parent {
16			width: 60%;
17			height: 40px;
18			margin: 10px auto;
19			padding: 5px;
20			border: 1px solid #777;
21			background-color: #fbca93;
22			text-align: center;
23			}
24			.positionable {
25			position: absolute;
26			display: block;
27			right: 0;
28			bottom: 0;
29			background-color: #bcd5e6;
30			text-align: center;
31			}
32			#positionable1 {
33			width: 75px;
34			height: 75px;
35			}
36			#positionable2 {
37			width: 120px;
38			height: 40px;
39			}
40			select, input {
41			margin-left: 15px;
42			}
43			</style>
44			<script>
45			$(function() {
46			function position() {
47			$( ".positionable" ).position({
48			of: $( "#parent" ),
49			my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
50			at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
51			collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
52			});
53			}
54
55			$( ".positionable" ).css( "opacity", 0.5 );
56
57			$( "select, input" ).bind( "click keyup change", position );
58
59			$( "#parent" ).draggable({
60			drag: position
61			});
62
63			position();
64			});
65			</script>
66			</head>
67			<body>
68
69			<div id="parent">
70			<p>
71			This is the position parent element.
72			</p>
73			</div>
74
75			<div class="positionable" id="positionable1">
76			<p>
77			to position
78			</p>
79			</div>
80
81			<div class="positionable" id="positionable2">
82			<p>
83			to position 2
84			</p>
85			</div>
86
87			<div style="padding: 20px; margin-top: 75px;">
88			position...
89			<div style="padding-bottom: 20px;">
90			<b>my:</b>
91			<select id="my_horizontal">
92			<option value="left">left</option>
93			<option value="center">center</option>
94			<option value="right">right</option>
95			</select>
96			<select id="my_vertical">
97			<option value="top">top</option>
98			<option value="middle">center</option>
99			<option value="bottom">bottom</option>
100			</select>
101			</div>
102			<div style="padding-bottom: 20px;">
103			<b>at:</b>
104			<select id="at_horizontal">
105			<option value="left">left</option>
106			<option value="center">center</option>
107			<option value="right">right</option>
108			</select>
109			<select id="at_vertical">
110			<option value="top">top</option>
111			<option value="middle">center</option>
112			<option value="bottom">bottom</option>
113			</select>
114			</div>
115			<div style="padding-bottom: 20px;">
116			<b>collision:</b>
117			<select id="collision_horizontal">
118			<option value="flip">flip</option>
119			<option value="fit">fit</option>
120			<option value="flipfit">flipfit</option>
121			<option value="none">none</option>
122			</select>
123			<select id="collision_vertical">
124			<option value="flip">flip</option>
125			<option value="fit">fit</option>
126			<option value="flipfit">flipfit</option>
127			<option value="none">none</option>
128			</select>
129			</div>
130			</div>
131
132			<div class="demo-description">
133			<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
134			<br>Drag around the parent element to see collision detection in action.</p>
135			</div>
136			</body>
137			</html>