Position demos: Coding standards.

author: Scott González <scott.gonzalez@gmail.com> 2010-09-10 10:24:33 -0400
committer: Scott González <scott.gonzalez@gmail.com> 2010-09-10 10:24:33 -0400
commit: 4a4fab829f850d9de69f5f0c2cd718933d9b8944 (patch)
tree: 3b1c2ff7dc3a00ae065d39d1bb47b559818b2f30 /demos
parent: 0956c9ec4087320e0cc3e2cd1c29d3c24187890d (diff)
download: jquery-ui-4a4fab829f850d9de69f5f0c2cd718933d9b8944.tar.gz
jquery-ui-4a4fab829f850d9de69f5f0c2cd718933d9b8944.zip
3 files changed, 90 insertions, 99 deletions
diff --git a/demos/position/cycler.html b/demos/position/cycler.html
index fa0571e33..59c98b1ec 100644
--- a/demos/position/cycler.html
+++ b/demos/position/cycler.html
@@ -1,30 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Position - Default functionality</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-    
-    <style type="text/css">
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.4.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+    <style>
    	html, body {
    		margin: 0;
 		padding: 0
    	}
     </style>
-    
-	<script type="text/javascript">
+	<script>
 	$(function() {
-		
-		$.fn.position2 = function(options) {
-			return this.position($.extend({
+		$.fn.position2 = function( options ) {
+			return this.position( $.extend({
 				of: window,
-				using: function(to) {
-					$(this).css({
+				using: function( to ) {
+					$( this ).css({
 						top: to.top,
 						left: to.left
 					})
@@ -32,8 +29,8 @@
 				collision: "none"
 			}, options));
 		}
-		
-		$.fn.left = function(using) {
+
+		$.fn.left = function( using ) {
 			return this.position2({
 				my: "right middle",
 				at: "left middle",
@@ -41,7 +38,7 @@
 				using: using
 			});
 		}
-		$.fn.right = function(using) {
+		$.fn.right = function( using ) {
 			return this.position2({
 				my: "left middle",
 				at: "right middle",
@@ -49,76 +46,76 @@
 				using: using
 			});
 		}
-		$.fn.center = function(using) {
+		$.fn.center = function( using ) {
 			return this.position2({
 				my: "center middle",
 				at: "center middle",
 				using: using
 			});
 		};
-		
-		$("img:eq(0)").left();
-		$("img:eq(1)").center();
-		$("img:eq(2)").right();
-		
-		$("body").css({
+
+		$( "img:eq(0)" ).left();
+		$( "img:eq(1)" ).center();
+		$( "img:eq(2)" ).right();
+
+		$( "body" ).css({
 			overflow: "hidden"
 		})
-		$(".demo").css({
+		$( ".demo" ).css({
 			position: "relative",
 		});
-		$(".demo img").css({
+		$( ".demo img" ).css({
 			position: "absolute",
 		});
-		
-		function animate(to) {
-			$(this).animate(to);
+
+		function animate( to ) {
+			$(this).animate( to );
 		}
 		function next() {
-			$("img:eq(2)").center(animate);
-			$("img:eq(1)").left(animate)
-			$("img:eq(0)").right().appendTo(".demo");
+			$( "img:eq(2)" ).center( animate );
+			$( "img:eq(1)" ).left( animate )
+			$( "img:eq(0)" ).right().appendTo( ".demo" );
 		}
 		function previous() {
-			$("img:eq(0)").center(animate);
-			$("img:eq(1)").right(animate);
-			$("img:eq(2)").left().prependTo(".demo");
+			$( "img:eq(0)" ).center( animate );
+			$( "img:eq(1)" ).right( animate );
+			$( "img:eq(2)" ).left().prependTo( ".demo" );
 		}
-		$("#previous").click(previous);
-		$("#next").click(next);
-		
-		$(".demo img").click(function() {
-			$(".demo img").index(this) == 0 ? previous() : next();
+		$( "#previous" ).click( previous );
+		$( "#next" ).click( next );
+
+		$( ".demo img" ).click(function() {
+			$( ".demo img" ).index( this ) === 0 ? previous() : next();
+		});
+
+		$( window ).resize(function() {
+			$( "img:eq(0)" ).left( animate );
+			$( "img:eq(1)" ).center( animate );
+			$( "img:eq(2)" ).right( animate );
 		});
-		
-		$(window).resize(function() {
-			$("img:eq(0)").left(animate);
-			$("img:eq(1)").center(animate);
-			$("img:eq(2)").right(animate);
-		})
 	});
 	</script>
-    
 </head>
 <body>
 
 <div class="demo">
 
-	<img src="images/earth.jpg" />
-	<img src="images/flight.jpg" />
-	<img src="images/rocket.jpg" />
+<img src="images/earth.jpg" />
+<img src="images/flight.jpg" />
+<img src="images/rocket.jpg" />
 
-	<a id="previous" href="#">Previous</a>
-	<a id="next" href="#">Next</a>
-</div>
+<a id="previous" href="#">Previous</a>
+<a id="next" href="#">Next</a>
+
+</div><!-- End demo -->
 
-<div class="demo-description">
 
+
+<div class="demo-description">
 <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.
 <br/>Use the links at the top to cycle, or click on the images on the left and right.
 <br/>Note how the images are repositioned when resizing the window.
 <br/>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p>
-
 </div><!-- End demo-description -->
 
 </body>
diff --git a/demos/position/default.html b/demos/position/default.html
index d26959b96..67f8578d6 100644
--- a/demos/position/default.html
+++ b/demos/position/default.html
@@ -1,28 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Position - Default functionality</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<style type="text/css">
-
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.4.2.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>
 	div#parent {
 		width: 60%;
 		margin: 10px auto;
 		padding: 5px;
-		
 		border: 1px solid #777;
 		background-color: #fbca93;
 		text-align: center;
 	}
-
 	div.positionable {
 		width: 75px;
 		height: 75px;
@@ -33,49 +30,46 @@
 		background-color: #bcd5e6;
 		text-align: center;
 	}
-
 	select, input {
 		margin-left: 15px;
 	}
-
 	</style>
-	<script type="text/javascript">
+	<script>
 	$(function() {
-		
-		function position(using) {
-			$('.positionable').position({
-				of: $('#parent'),
-				my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(),
-				at: $('#at_horizontal').val() + ' '+ $('#at_vertical').val(),
-				offset: $('#offset').val(),
+		function position( using ) {
+			$( ".positionable" ).position({
+				of: $( "#parent" ),
+				my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
+				at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
+				offset: $( "#offset" ).val(),
 				using: using,
-				collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val()
+				collision: $( "#collision_horizontal" ).val() + ' ' + $( "#collision_vertical" ).val()
 			});
 		}
-		
-		$('.positionable').css("opacity", 0.5);
-		
-		$(':input').bind('click keyup change', function() { position(); });
-		
-		$("#parent").draggable({
+
+		$( ".positionable" ).css( "opacity", 0.5 );
+
+		$( ":input" ).bind( "click keyup change", function() { position(); });
+
+		$( "#parent" ).draggable({
 			drag: function() { position(); }
 		});
-		
-		$('.positionable').draggable({
-			drag: function(event, ui) {
+
+		$( ".positionable" ).draggable({
+			drag: function( event, ui ) {
 				// reset offset before calculating it
-				$("#offset").val("0");
-				position(function(result) {
-					$("#offset").val("" + (ui.offset.left - result.left) + " " + (ui.offset.top - result.top));
+				$( "#offset" ).val( "0" );
+				position(function( result ) {
+					$( "#offset" ).val( "" + ( ui.offset.left - result.left ) +
+						" " + ( ui.offset.top - result.top ) );
 					position();
 				});
 			}
 		});
-		
+
 		position();
 	});
 	</script>
-	
 </head>
 <body>
 
@@ -148,11 +142,11 @@
 
 </div><!-- End demo -->
 
-<div class="demo-description">
 
+
+<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><!-- End demo-description -->
 
 </body>
diff --git a/demos/position/index.html b/demos/position/index.html
index 54a6d54c6..498c09b2b 100644
--- a/demos/position/index.html
+++ b/demos/position/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Position Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
+	<link rel="stylesheet" href="../demos.css">
 </head>
 <body>
author	Scott González <scott.gonzalez@gmail.com>	2010-09-10 10:24:33 -0400
committer	Scott González <scott.gonzalez@gmail.com>	2010-09-10 10:24:33 -0400
commit	4a4fab829f850d9de69f5f0c2cd718933d9b8944 (patch)
tree	3b1c2ff7dc3a00ae065d39d1bb47b559818b2f30 /demos
parent	0956c9ec4087320e0cc3e2cd1c29d3c24187890d (diff)
download	jquery-ui-4a4fab829f850d9de69f5f0c2cd718933d9b8944.tar.gz jquery-ui-4a4fab829f850d9de69f5f0c2cd718933d9b8944.zip