Skip to content

Commit 1199377

Browse files
rdworthrdworth
committed
position demo - fixed html validation issue. Hopefully will fix #5358 - Position Demo is borked
1 parent 0604e11 commit 1199377

File tree

1 file changed

+84
-86
lines changed

1 file changed

+84
-86
lines changed

‎demos/position/default.html

Lines changed: 84 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -11,55 +11,51 @@
1111
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
1212
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
1313
<link type="text/css" href="../demos.css" rel="stylesheet" />
14-
15-
<style type="text/css">
16-
div#parent
17-
{
18-
width: 60%;
19-
margin: 10px auto;
20-
padding: 5px;
21-
22-
border: 1px solid #777;
23-
background-color: #fbca93;
24-
text-align: center;
25-
}
14+
<style type="text/css">
2615

27-
div.positionable
28-
{
29-
width: 75px;
30-
height: 75px;
16+
div#parent {
17+
width: 60%;
18+
margin: 10px auto;
19+
padding: 5px;
20+
21+
border: 1px solid #777;
22+
background-color: #fbca93;
23+
text-align: center;
24+
}
25+
26+
div.positionable {
27+
width: 75px;
28+
height: 75px;
3129
position: absolute;
32-
display: block;
33-
right: 0;
34-
bottom: 0;
30+
display: block;
31+
right: 0;
32+
bottom: 0;
33+
background-color: #bcd5e6;
34+
text-align: center;
35+
}
3536

36-
background-color: #bcd5e6;
37-
text-align: center;
38-
}
37+
select, input {
38+
margin-left: 15px;
39+
}
3940

40-
select, input
41-
{
42-
margin-left: 15px;
43-
}
44-
</style>
45-
41+
</style>
4642
<script type="text/javascript">
4743
$(function() {
4844

4945
function position(using) {
50-
$('.positionable').position({
51-
of: $('#parent'),
52-
my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(),
53-
at: $('#at_horizontal').val() + ' '+ $('#at_vertical').val(),
54-
offset: $('#offset').val(),
46+
$('.positionable').position({
47+
of: $('#parent'),
48+
my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(),
49+
at: $('#at_horizontal').val() + ' '+ $('#at_vertical').val(),
50+
offset: $('#offset').val(),
5551
using: using,
5652
collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val()
57-
});
53+
});
5854
}
5955

6056
$('.positionable').css("opacity", 0.5);
6157

62-
$(':input').bind('click keyup change', function() { position(); });
58+
$(':input').bind('click keyup change', function() { position(); });
6359

6460
$("#parent").draggable({
6561
drag: function() { position(); }
@@ -79,77 +75,79 @@
7975
position();
8076
});
8177
</script>
82-
78+
8379
</head>
8480
<body>
8581

8682
<div class="demo">
8783

8884
<div id="parent">
8985
<p>
90-
This is the position parent element.
91-
</p>
86+
This is the position parent element.
87+
</p>
9288
</div>
9389

9490
<div class="positionable">
95-
<p>
96-
to position
97-
</p>
91+
<p>
92+
to position
93+
</p>
9894
</div>
9995

10096
<div class="positionable" style="width:120px; height: 40px;">
101-
<p>
102-
to position 2
103-
</p>
97+
<p>
98+
to position 2
99+
</p>
104100
</div>
105101

106102
<div style="padding: 20px; margin-top: 75px;">
107103
position...
108-
<div style="padding-bottom: 20px;">
109-
<b>my:</b>
110-
<select id="my_horizontal">
111-
<option value="left">left</option>
112-
<option value="center">center</option>
113-
<option value="right">right</option>
114-
</select>
115-
<select id="my_vertical">
116-
<option value="top">top</option>
117-
<option value="middle">center</option>
118-
<option value="bottom">bottom</option>
119-
</select>
120-
</div>
121-
<div style="padding-bottom: 20px;">
122-
<b>at:</b>
123-
<select id="at_horizontal">
124-
<option value="left">left</option>
125-
<option value="center">center</option>
126-
<option value="right">right</option>
127-
</select>
128-
<select id="at_vertical">
129-
<option value="top">top</option>
130-
<option value="middle">center</option>
131-
<option value="bottom">bottom</option>
132-
</select>
133-
</div>
134-
<div style="padding-bottom: 20px;">
135-
<b>offset:</b>
136-
<input id="offset" type="text" size="15"/>
137-
</div>
138104
<div style="padding-bottom: 20px;">
139-
<b>collision:</b>
140-
<select id="collision_horizontal">
141-
<option value="flip">flip</option>
142-
<option value="fit">fit</option>
143-
<option value="none">none</option>
144-
</select>
145-
<select id="collision_vertical">
146-
<option value="flip">flip</option>
147-
<option value="fit">fit</option>
148-
<option value="none">none</option>
149-
</select>
150-
</div>
105+
<b>my:</b>
106+
<select id="my_horizontal">
107+
<option value="left">left</option>
108+
<option value="center">center</option>
109+
<option value="right">right</option>
110+
</select>
111+
<select id="my_vertical">
112+
<option value="top">top</option>
113+
<option value="middle">center</option>
114+
<option value="bottom">bottom</option>
115+
</select>
116+
</div>
117+
<div style="padding-bottom: 20px;">
118+
<b>at:</b>
119+
<select id="at_horizontal">
120+
<option value="left">left</option>
121+
<option value="center">center</option>
122+
<option value="right">right</option>
123+
</select>
124+
<select id="at_vertical">
125+
<option value="top">top</option>
126+
<option value="middle">center</option>
127+
<option value="bottom">bottom</option>
128+
</select>
129+
</div>
130+
<div style="padding-bottom: 20px;">
131+
<b>offset:</b>
132+
<input id="offset" type="text" size="15"/>
133+
</div>
134+
<div style="padding-bottom: 20px;">
135+
<b>collision:</b>
136+
<select id="collision_horizontal">
137+
<option value="flip">flip</option>
138+
<option value="fit">fit</option>
139+
<option value="none">none</option>
140+
</select>
141+
<select id="collision_vertical">
142+
<option value="flip">flip</option>
143+
<option value="fit">fit</option>
144+
<option value="none">none</option>
145+
</select>
146+
</div>
151147
</div>
152148

149+
</div><!-- End demo -->
150+
153151
<div class="demo-description">
154152

155153
<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.

0 commit comments

Comments
 (0)