3 files changed, 36 insertions, 51 deletions
diff --git a/demos/position/cycler.html b/demos/position/cycler.html
index 16542b962..241dae9a0 100644
--- a/demos/position/cycler.html
+++ b/demos/position/cycler.html
@@ -9,6 +9,17 @@
 	<script src="../../ui/jquery.ui.widget.js"></script>
 	<script src="../../ui/jquery.ui.position.js"></script>
 	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#container {
+		overflow: hidden;
+		position: relative;
+		height: 400px;
+	}
+
+	img {
+		position: absolute;
+	}
+	</style>
 	<script>
 	$(function() {
 		// TODO refactor into a widget and get rid of these plugin methods
@@ -16,7 +27,7 @@
 			return this.position({
 				my: "right middle",
 				at: "left+25 middle",
-				of: window,
+				of: "#container",
 				collision: "none",
 				using: using
 			});
@@ -25,7 +36,7 @@
 			return this.position({
 				my: "left middle",
 				at: "right-25 middle",
-				of: window,
+				of: "#container",
 				collision: "none",
 				using: using
 			});
@@ -34,21 +45,11 @@
 			return this.position({
 				my: "center middle",
 				at: "center middle",
-				of: window,
+				of: "#container",
 				using: using
 			});
 		};
 
-		$( "body" ).css({
-			overflow: "hidden"
-		})
-		$( ".demo" ).css({
-			position: "relative",
-		});
-		$( ".demo img" ).css({
-			position: "absolute",
-		});
-
 		$( "img:eq(0)" ).left();
 		$( "img:eq(1)" ).center();
 		$( "img:eq(2)" ).right();
@@ -60,19 +61,19 @@
 			event.preventDefault();
 			$( "img:eq(2)" ).center( animate );
 			$( "img:eq(1)" ).left( animate )
-			$( "img:eq(0)" ).right().appendTo( ".demo" );
+			$( "img:eq(0)" ).right().appendTo( "#container" );
 		}
 		function previous( event ) {
 			event.preventDefault();
 			$( "img:eq(0)" ).center( animate );
 			$( "img:eq(1)" ).right( animate );
-			$( "img:eq(2)" ).left().prependTo( ".demo" );
+			$( "img:eq(2)" ).left().prependTo( "#container" );
 		}
 		$( "#previous" ).click( previous );
 		$( "#next" ).click( next );
 
-		$( ".demo img" ).click(function( event ) {
-			$( ".demo img" ).index( this ) === 0 ? previous( event ) : next( event );
+		$( "img" ).click(function( event ) {
+			$( "img" ).index( this ) === 0 ? previous( event ) : next( event );
 		});
 
 		$( window ).resize(function() {
@@ -85,25 +86,20 @@
 </head>
 <body>
 
-<div class="demo">
-
-<img src="images/earth.jpg" width="458" height="308" alt="earth" />
-<img src="images/flight.jpg" width="512" height="307" alt="flight" />
-<img src="images/rocket.jpg" width="300" height="353" alt="rocket" />
-
-<a id="previous" href="#">Previous</a>
-<a id="next" href="#">Next</a>
-
-</div><!-- End demo -->
-
+<div id="container">
+	<img src="images/earth.jpg" width="458" height="308" alt="earth">
+	<img src="images/flight.jpg" width="512" height="307" alt="flight">
+	<img src="images/rocket.jpg" width="300" height="353" alt="rocket">
 
+	<a id="previous" href="#">Previous</a>
+	<a id="next" href="#">Next</a>
+</div>
 
 <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 -->
-
+<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>
 </body>
 </html>
diff --git a/demos/position/default.html b/demos/position/default.html
index 7c15c8037..b4af06e31 100644
--- a/demos/position/default.html
+++ b/demos/position/default.html
@@ -67,8 +67,6 @@
 </head>
 <body>
 
-<div class="demo">
-
 <div id="parent">
 	<p>
 	This is the position parent element.
@@ -136,14 +134,9 @@
 	</div>
 </div>
 
-</div><!-- End demo -->
-
-
-
 <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 -->
-
+<br>Drag around the parent element to see collision detection in action.</p>
+</div>
 </body>
 </html>
diff --git a/demos/position/index.html b/demos/position/index.html
index 498c09b2b..a7b754876 100644
--- a/demos/position/index.html
+++ b/demos/position/index.html
@@ -1,19 +1,15 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
 	<title>jQuery UI Position Demo</title>
-	<link rel="stylesheet" href="../demos.css">
 </head>
 <body>
 
-<div class="demos-nav">
-	<h4>Examples</h4>
-	<ul>
-		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
-		<li><a href="cycler.html">Cycling images</a></li>
-	</ul>
-</div>
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="cycler.html">Cycling images</a></li>
+</ul>
 
 </body>
 </html>