Skip to content

Commit 4a4fab8

Browse files
scottgonzalezscottgonzalez
committed
Position demos: Coding standards.
1 parent 0956c9e commit 4a4fab8

File tree

3 files changed

+90
-99
lines changed

3 files changed

+90
-99
lines changed

‎demos/position/cycler.html‎

Lines changed: 54 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,121 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Position - Default functionality</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
11-
<link type="text/css" href="../demos.css" rel="stylesheet" />
12-
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.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.position.js"></script>
11+
<link rel="stylesheet" href="../demos.css">
12+
<style>
1413
html, body {
1514
margin: 0;
1615
padding: 0
1716
}
1817
</style>
19-
20-
<script type="text/javascript">
18+
<script>
2119
$(function() {
22-
23-
$.fn.position2 = function(options) {
24-
return this.position($.extend({
20+
$.fn.position2 = function( options ) {
21+
return this.position( $.extend({
2522
of: window,
26-
using: function(to) {
27-
$(this).css({
23+
using: function( to ) {
24+
$( this ).css({
2825
top: to.top,
2926
left: to.left
3027
})
3128
},
3229
collision: "none"
3330
}, options));
3431
}
35-
36-
$.fn.left = function(using) {
32+
33+
$.fn.left = function( using ) {
3734
return this.position2({
3835
my: "right middle",
3936
at: "left middle",
4037
offset: "25 0",
4138
using: using
4239
});
4340
}
44-
$.fn.right = function(using) {
41+
$.fn.right = function( using ) {
4542
return this.position2({
4643
my: "left middle",
4744
at: "right middle",
4845
offset: "-25 0",
4946
using: using
5047
});
5148
}
52-
$.fn.center = function(using) {
49+
$.fn.center = function( using ) {
5350
return this.position2({
5451
my: "center middle",
5552
at: "center middle",
5653
using: using
5754
});
5855
};
59-
60-
$("img:eq(0)").left();
61-
$("img:eq(1)").center();
62-
$("img:eq(2)").right();
63-
64-
$("body").css({
56+
57+
$( "img:eq(0)" ).left();
58+
$( "img:eq(1)" ).center();
59+
$( "img:eq(2)" ).right();
60+
61+
$( "body" ).css({
6562
overflow: "hidden"
6663
})
67-
$(".demo").css({
64+
$( ".demo" ).css({
6865
position: "relative",
6966
});
70-
$(".demo img").css({
67+
$( ".demo img" ).css({
7168
position: "absolute",
7269
});
73-
74-
function animate(to) {
75-
$(this).animate(to);
70+
71+
function animate( to ) {
72+
$(this).animate( to );
7673
}
7774
function next() {
78-
$("img:eq(2)").center(animate);
79-
$("img:eq(1)").left(animate)
80-
$("img:eq(0)").right().appendTo(".demo");
75+
$( "img:eq(2)" ).center( animate );
76+
$( "img:eq(1)" ).left( animate )
77+
$( "img:eq(0)" ).right().appendTo( ".demo" );
8178
}
8279
function previous() {
83-
$("img:eq(0)").center(animate);
84-
$("img:eq(1)").right(animate);
85-
$("img:eq(2)").left().prependTo(".demo");
80+
$( "img:eq(0)" ).center( animate );
81+
$( "img:eq(1)" ).right( animate );
82+
$( "img:eq(2)" ).left().prependTo( ".demo" );
8683
}
87-
$("#previous").click(previous);
88-
$("#next").click(next);
89-
90-
$(".demo img").click(function() {
91-
$(".demo img").index(this) == 0 ? previous() : next();
84+
$( "#previous" ).click( previous );
85+
$( "#next" ).click( next );
86+
87+
$( ".demo img" ).click(function() {
88+
$( ".demo img" ).index( this ) === 0 ? previous() : next();
89+
});
90+
91+
$( window ).resize(function() {
92+
$( "img:eq(0)" ).left( animate );
93+
$( "img:eq(1)" ).center( animate );
94+
$( "img:eq(2)" ).right( animate );
9295
});
93-
94-
$(window).resize(function() {
95-
$("img:eq(0)").left(animate);
96-
$("img:eq(1)").center(animate);
97-
$("img:eq(2)").right(animate);
98-
})
9996
});
10097
</script>
101-
10298
</head>
10399
<body>
104100

105101
<div class="demo">
106102

107-
<img src="images/earth.jpg" />
108-
<img src="images/flight.jpg" />
109-
<img src="images/rocket.jpg" />
103+
<img src="images/earth.jpg" />
104+
<img src="images/flight.jpg" />
105+
<img src="images/rocket.jpg" />
110106

111-
<a id="previous" href="#">Previous</a>
112-
<a id="next" href="#">Next</a>
113-
</div>
107+
<a id="previous" href="#">Previous</a>
108+
<a id="next" href="#">Next</a>
109+
110+
</div><!-- End demo -->
114111

115-
<div class="demo-description">
116112

113+
114+
<div class="demo-description">
117115
<p>A prototype for the <a href="http://wiki.jqueryui.com/Photoviewer">Photoviewer</a> using Position to place images at the center, left and right and cycle them.
118116
<br/>Use the links at the top to cycle, or click on the images on the left and right.
119117
<br/>Note how the images are repositioned when resizing the window.
120118
<br/>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p>
121-
122119
</div><!-- End demo-description -->
123120

124121
</body>

‎demos/position/default.html‎

Lines changed: 34 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,25 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Position - Default functionality</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
12-
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
13-
<link type="text/css" href="../demos.css" rel="stylesheet" />
14-
<style type="text/css">
15-
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.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>
1615
div#parent {
1716
width: 60%;
1817
margin: 10px auto;
1918
padding: 5px;
20-
2119
border: 1px solid #777;
2220
background-color: #fbca93;
2321
text-align: center;
2422
}
25-
2623
div.positionable {
2724
width: 75px;
2825
height: 75px;
@@ -33,49 +30,46 @@
3330
background-color: #bcd5e6;
3431
text-align: center;
3532
}
36-
3733
select, input {
3834
margin-left: 15px;
3935
}
40-
4136
</style>
42-
<script type="text/javascript">
37+
<script>
4338
$(function() {
44-
45-
function position(using) {
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(),
39+
function position( using ) {
40+
$( ".positionable" ).position({
41+
of: $( "#parent" ),
42+
my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
43+
at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
44+
offset: $( "#offset" ).val(),
5145
using: using,
52-
collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val()
46+
collision: $( "#collision_horizontal" ).val() + ' ' + $( "#collision_vertical" ).val()
5347
});
5448
}
55-
56-
$('.positionable').css("opacity", 0.5);
57-
58-
$(':input').bind('click keyup change', function() { position(); });
59-
60-
$("#parent").draggable({
49+
50+
$( ".positionable" ).css( "opacity", 0.5 );
51+
52+
$( ":input" ).bind( "click keyup change", function() { position(); });
53+
54+
$( "#parent" ).draggable({
6155
drag: function() { position(); }
6256
});
63-
64-
$('.positionable').draggable({
65-
drag: function(event, ui) {
57+
58+
$( ".positionable" ).draggable({
59+
drag: function( event, ui ) {
6660
// reset offset before calculating it
67-
$("#offset").val("0");
68-
position(function(result) {
69-
$("#offset").val("" + (ui.offset.left - result.left) + " " + (ui.offset.top - result.top));
61+
$( "#offset" ).val( "0" );
62+
position(function( result ) {
63+
$( "#offset" ).val( "" + ( ui.offset.left - result.left ) +
64+
" " + ( ui.offset.top - result.top ) );
7065
position();
7166
});
7267
}
7368
});
74-
69+
7570
position();
7671
});
7772
</script>
78-
7973
</head>
8074
<body>
8175

@@ -148,11 +142,11 @@
148142

149143
</div><!-- End demo -->
150144

151-
<div class="demo-description">
152145

146+
147+
<div class="demo-description">
153148
<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
154149
<br/>Drag around the parent element to see collision detection in action.</p>
155-
156150
</div><!-- End demo-description -->
157151

158152
</body>

‎demos/position/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Position Demo</title>
6-
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
<link rel="stylesheet" href="../demos.css">
77
</head>
88
<body>
99

0 commit comments

Comments
 (0)