Merge remote branch 'davidmurdoch/ticket-5645'

author: Jörn Zaefferer <joern.zaefferer@gmail.com> 2011-06-09 16:40:50 +0200
committer: Jörn Zaefferer <joern.zaefferer@gmail.com> 2011-06-09 16:40:50 +0200
commit: 433ed6eecf055eba327ced7e7c0ff0ce9b5fc304 (patch)
tree: bc7b781a57a59def551b6713ef50961b3db36b06 /tests
parent: 3dea8f1786e07b17458f4fecff1dbb8b04f79a2d (diff)
parent: 40c008872154965d7572cda7911d42857e9fc3a9 (diff)
download: jquery-ui-433ed6eecf055eba327ced7e7c0ff0ce9b5fc304.tar.gz
jquery-ui-433ed6eecf055eba327ced7e7c0ff0ce9b5fc304.zip
5 files changed, 668 insertions, 30 deletions
diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html
index 4f2e87e08..d71bae497 100644
--- a/tests/unit/position/position.html
+++ b/tests/unit/position/position.html
@@ -16,47 +16,54 @@
 	<script src="../testsuite.js"></script>
 
 	<script src="position_core.js"></script>
+    <script src="position_core_within.js"></script>
 
 	<script src="../swarminject.js"></script>
 </head>
 <body>
-
-<h1 id="qunit-header">jQuery UI Position Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<div id="qunit-testrunner-toolbar"></div>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
+<div style="position:relative; z-index:2;">
+	<h1 id="qunit-header">jQuery UI Position Test Suite</h1>
+	<h2 id="qunit-banner"></h2>
+	<div id="qunit-testrunner-toolbar"></div>
+	<h2 id="qunit-userAgent"></h2>
+	<ol id="qunit-tests">
+	</ol>
+</div>
 
 <!--
 elements smaller than 10px have a line-height set on them to avoid a bug in IE6
 .height() returns the greater of the height and line-height
 -->
 
-<div id="qunit-fixture" style="top: 0; left: 0;">
-	<div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
-	<div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
-	<div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div>
-</div>
-
-<div style="position: absolute; top: 0px; left: 0px">
-	<div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
-	<div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div>
+<div id="qunit-fixture" style="top: 0; left: 0; z-index:1">
+    <div id="within-container">
+    	<div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
+    	<div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
+    	<div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div>
+        
+        <div style="position: absolute; top: 0px; left: 0px">
+            <div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
+        	<div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div>
+        </div>
+        
+        <div style="position: absolute; top: 200px; left: 100px;">
+        	<div id="el-offset-100-200" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
+        	<div style="position: absolute; top: 100px; left: 50px;">
+        		<div id="el-two-offset-150-300" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
+        		<div id="el-fixed" style="position: fixed; top: 200px; left: 200px;"></div>
+        	</div>
+        </div>
+        
+        <div style="position: absolute; height: 5000px; width: 5000px;"></div>
+        
+        <div id="bug-5280" style="height: 30px; width: 201px;">
+        	<div style="width: 50px; height: 10px;"></div>
+        </div>
+    </div>
 </div>
 
-<div style="position: absolute; top: 200px; left: 100px;">
-	<div id="el-offset-100-200" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
-	<div style="position: absolute; top: 100px; left: 50px;">
-		<div id="el-two-offset-150-300" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
-		<div id="el-fixed" style="position: fixed; top: 200px; left: 200px;"></div>
-	</div>
-</div>
 
-<div style="position: absolute; height: 5000px; width: 5000px;"></div>
 
-<div id="bug-5280" style="height: 30px; width: 201px;">
-	<div style="width: 50px; height: 10px;"></div>
-</div>
 
 </body>
 </html>
diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js
index dbbda8a3b..bd8e58612 100644
--- a/tests/unit/position/position_core.js
+++ b/tests/unit/position/position_core.js
@@ -64,7 +64,6 @@ test( "positions", function() {
 		center: 3,
 		right: 6,
 		top: 0,
-		center: 3,
 		bottom: 6
 	};
 	var start = { left: 4, top: 4 };
@@ -316,6 +315,7 @@ test( "collision: fit, window scrolled", function() {
 	if ( scrollTopSupport() ) {
 		var win = $( window );
 		win.scrollTop( 300 ).scrollLeft( 200 );
+
 		collisionTest({
 			collision: "fit",
 			at: "left-100 top-100"
@@ -324,6 +324,7 @@ test( "collision: fit, window scrolled", function() {
 			collision: "fit",
 			at: "right+100 bottom+100"
 		}, { top: 300 + win.height() - 10, left: 200 + win.width() - 10 }, "right bottom" );
+
 		win.scrollTop( 0 ).scrollLeft( 0 );
 	}
 });
@@ -351,7 +352,7 @@ test( "collision: flip, with offset", function() {
 
 	collisionTest2({
 		collision: "flip",
-		at: "left-2 top-3",
+		at: "left-2 top-3"
 	}, { top: $( window ).height() + 3, left: $( window ).width() + 2 }, "right bottom, negative offset" );
 });
 
diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js
new file mode 100644
index 000000000..567c17192
--- /dev/null
+++ b/tests/unit/position/position_core_within.js
@@ -0,0 +1,441 @@
+(function( $ ) {
+
+function scrollTopSupport() {
+	$( window ).scrollTop( 1 );
+	return $( window ).scrollTop() === 1;
+}
+
+module( "position - within", {
+	setup: function(){
+		$("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}).show();
+	}
+});
+
+var addTop = -20,
+	addLeft = -20;
+
+$.fn.addOffsets = function() {
+	var elOffset = this.offset(),
+		offset = $("#within-container").offset();
+
+	elOffset.top -= offset.top;
+	elOffset.left -= offset.left;
+	
+	return {top: elOffset.top - offset.top, left: elOffset.left - offset.left };
+};
+
+test( "my, at, of", function() {
+	var within = $("#within-container");
+	
+	$( "#elx" ).position({
+		my: "left top",
+		at: "left top",
+		of: "#parentx",
+		collision: "none",
+		within: within
+	});
+	same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "left top, left top" );
+
+	$( "#elx" ).position({
+		my: "left top",
+		at: "left bottom",
+		of: "#parentx",
+		collision: "none",
+		within: within
+	});
+	same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "left top, left bottom" );
+
+	$( "#elx" ).position({
+		my: "left",
+		at: "bottom",
+		of: "#parentx",
+		collision: "none",
+		within: within
+	});
+	same( $( "#elx" ).addOffsets(), { top: addTop + 55, left: addLeft + 50 }, "left, bottom" );
+
+	$( "#elx" ).position({
+		my: "left foo",
+		at: "bar baz",
+		of: "#parentx",
+		collision: "none",
+		within: within
+	});
+	same( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" );
+});
+
+test( "multiple elements", function() {
+	var elements = $( "#el1, #el2" );
+	var result = elements.position({
+		my: "left top",
+		at: "left bottom",
+		of: "#parent",
+		collision: "none",
+		within: $("#within-container")
+	});
+
+	same( result, elements );
+	var expected = { top: addTop + 10, left: addLeft + 4 };
+	elements.each(function() {
+		same( $( this ).addOffsets(), expected );
+	});
+});
+
+test( "positions", function() {
+	var definitions = [];
+	var offsets = {
+		left: 0,
+		center: 3,
+		right: 6,
+		top: 0,
+		bottom: 6
+	};
+	var start = { left: 4, top: 4 };
+	$.each( [ 0, 1 ], function( my ) {
+		$.each( [ "top", "center", "bottom" ], function( vindex, vertical ) {
+			$.each( [ "left", "center", "right" ], function( hindex, horizontal ) {
+				definitions.push({
+					my: my ? horizontal + " " + vertical : "left top",
+					at: !my ? horizontal + " " + vertical : "left top",
+					result: {
+						top: addTop + (my ? start.top - offsets[ vertical ] : start.top + offsets[ vertical ]),
+						left: addLeft + (my ? start.left - offsets[ horizontal ] : start.left + offsets[ horizontal ])
+					}
+				});
+			});
+		});
+	});
+	var el = $( "#el1" );
+	$.each( definitions, function( index, definition ) {
+		el.position({
+			my: definition.my,
+			at: definition.at,
+			of: "#parent",
+			collision: "none",
+			within: $("#within-container")
+		});
+		same( el.addOffsets(), definition.result,
+			"Position via " + QUnit.jsDump.parse({ my:definition.my, at:definition.at }) );
+	});
+});
+
+test( "of", function() {
+	var within = $("#within-container");
+	
+	$( "#elx" ).position({
+		my: "left top",
+		at: "left top",
+		of: "#parentx",
+		collision: "none",
+		within: within
+	});
+	same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" );
+
+	$( "#elx" ).position({
+		my: "left top",
+		at: "left bottom",
+		of: $( "#parentx"),
+		collision: "none",
+		within: within
+	});
+	same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "jQuery object" );
+
+	$( "#elx" ).position({
+		my: "left top",
+		at: "left top",
+		of: $( "#parentx" )[ 0 ],
+		collision: "none",
+		within: within
+	});
+	same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" );
+
+	var event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } );
+	$( "#elx" ).position({
+		my: "left top",
+		at: "left top",
+		of: event,
+		collision: "none",
+		within: within
+	});
+	same( $( "#elx" ).offset(), {
+		top: 300,
+		left: 200
+	}, "event - left top, left top" );
+
+	event = $.extend( $.Event( "someEvent" ), { pageX: 400, pageY: 600 } );
+	$( "#elx" ).position({
+		my: "left top",
+		at: "right bottom",
+		of: event,
+		collision: "none",
+		within: within
+	});
+	same( $( "#elx" ).offset(), {
+		top: 600,
+		left: 400
+	}, "event - left top, right bottom" );
+});
+
+test( "within:offsets", function() {
+	var within = $("#within-container");
+	
+	$( "#elx" ).position({
+		my: "left top",
+		at: "left+10 bottom+10",
+		of: "#parentx",
+		collision: "none",
+		within: within
+	});
+	same( $( "#elx" ).addOffsets(), { top: addTop + 70, left: addLeft + 50 }, "offsets in at" );
+
+	$( "#elx" ).position({
+		my: "left+10 top-10",
+		at: "left bottom",
+		of: "#parentx",
+		collision: "none",
+		within: within
+	});
+	same( $( "#elx" ).addOffsets(), { top: addTop + 50, left: addLeft + 50 }, "offsets in my" );
+
+	$( "#elx" ).position({
+		my: "left top",
+		at: "left+50% bottom-10%",
+		of: "#parentx",
+		collision: "none",
+		within: within
+	});
+	same( $( "#elx" ).addOffsets(), { top: addTop + 58, left: addLeft + 50 }, "percentage offsets in at" );
+
+	$( "#elx" ).position({
+		my: "left-30% top+50%",
+		at: "left bottom",
+		of: "#parentx",
+		collision: "none",
+		within: within
+	});
+	same( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" );
+});
+
+test( "using", function() {
+	expect( 6 );
+	
+	var within = $("#within-container");
+
+	var count = 0,
+		elems = $( "#el1, #el2" ),
+		expectedPosition = { top: addTop + 40, left: addLeft + 40 },
+		originalPosition = elems.position({
+			my: "right bottom",
+			at: "rigt bottom",
+			of: "#parentx",
+			collision: "none",
+			within: within
+		}).addOffsets();
+
+	elems.position({
+		my: "left top",
+		at: "left top",
+		of: "#parentx",
+		using: function( position ) {
+			position.top -= within.offset().top;
+			position.left -= within.offset().left;
+			same( this, elems[ count ], "correct context for call #" + count );
+			same( position, expectedPosition, "correct position for call #" + count );
+			count++;
+		},
+		within: within
+	});
+
+	elems.each(function() {
+		same( $( this ).addOffsets(), originalPosition, "elements not moved" );
+	});
+});
+
+function collisionTest( config, result, msg ) {
+	var within = $("#within-container");
+	
+	var elem = $( "#elx" ).position( $.extend({
+		my: "left top",
+		at: "right bottom",
+		of: within[0],
+		within: within
+	}, config ) );
+	
+	same( elem.addOffsets(), result, msg );
+}
+
+function collisionTest2( config, result, msg ) {
+	collisionTest( $.extend({
+		my: "right bottom",
+		at: "left top"
+	}, config ), result, msg );
+}
+
+test( "collision: fit, no offset", function() {
+	var within = $("#within-container");
+	
+	collisionTest({
+		collision: "fit"
+	}, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" );
+
+	collisionTest2({
+		collision: "fit"
+	}, { top: addTop + 0, left: addLeft + 0 }, "left top" );
+});
+
+
+test( "collision: fit, with offset", function() {
+	var within = $("#within-container");
+	
+	collisionTest({
+		collision: "fit",
+		at: "right+2 bottom+3"
+	}, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom");
+
+	collisionTest2({
+		collision: "fit",
+		at: "left+2 top+3"
+	}, { top: addTop + 0, left: addLeft + 0 }, "left top, positive offset" );
+
+	collisionTest2({
+		collision: "fit",
+		at: "left-2 top-3"
+	}, { top: addTop + 0, left: addLeft + 0 }, "left top, negative offset" );
+});
+
+test( "collision: fit, within scrolled", function() {
+	if ( scrollTopSupport() ) {
+		var within = $("#within-container").css({"width": "1000px", "height": "800px", "overflow": "auto"});
+		within.scrollTop( 300 ).scrollLeft( 150 );
+		
+		collisionTest({
+			collision: "fit",
+			at: "left-100 top-100"
+		}, { top: addTop, left: addLeft }, "top left" );
+		collisionTest2({
+			collision: "fit",
+			at: "right+100 bottom+100"
+		}, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" );
+		within.scrollTop( 0 ).scrollLeft( 0 );
+	}
+});
+		
+test( "collision: flip, no offset", function() {
+	var within = $("#within-container");
+	
+	collisionTest({
+		collision: "flip"
+	}, { top: addTop + -10, left: addLeft + -10 }, "left top" );
+
+	collisionTest2({
+		collision: "flip"
+	}, { top: addTop + within.height(), left: addLeft + within.width() }, "right bottom" );
+});
+
+test( "collision: flip, with offset", function() {
+	var within = $("#within-container");
+	
+	collisionTest({
+		collision: "flip",
+		at: "right+2 bottom+3"
+	}, { top: addTop + -13, left: addLeft + -12 }, "left top, with offset added" );
+
+	collisionTest2({
+		collision: "flip",
+		at: "left+2 top+3"
+	}, { top: addTop + within.height() - 3, left: addLeft + within.width() - 2 }, "bottom, positive offset" );
+
+	collisionTest2({
+		collision: "flip",
+		at: "left-2 top-3"
+	}, { top: addTop + within.height() + 3, left: addLeft + within.width() + 2 }, "right bottom, negative offset" );
+});
+
+test( "collision: none, no offset", function() {
+	var within = $("#within-container");
+	
+	collisionTest({
+		collision: "none"
+	}, { top: addTop + within.height(), left: addLeft + within.width() }, "left top" );
+
+	collisionTest2({
+		collision: "none"
+	}, { top: addTop + -10, left: addLeft + -10 }, "moved to the right bottom" );
+});
+
+test( "collision: none, with offset", function() {
+	var within = $("#within-container");
+	
+	collisionTest({
+		collision: "none",
+		at: "right+2 bottom+3"
+	}, { top: addTop + within.height() + 3, left: addLeft + within.width() + 2 }, "right bottom, with offset added" );
+
+	collisionTest2({
+		collision: "none",
+		at: "left+2 top+3"
+	}, { top: addTop + -7, left: addLeft + -8 }, "left top, positive offset" );
+
+	collisionTest2({
+		collision: "none",
+		at: "left-2 top-3"
+	}, { top: addTop + -13, left: addLeft + -12 }, "left top, negative offset" );
+});
+
+test( "collision: fit, with margin", function() {
+	var within = $("#within-container");
+	
+	$( "#elx" ).css( "margin", 10 );
+
+	collisionTest({
+		collision: "fit"
+	}, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" );
+
+	collisionTest2({
+		collision: "fit"
+	}, { top: addTop + 10, left: addLeft + 10 }, "left top" );
+
+	$( "#elx" ).css({
+		"margin-left": 5,
+		"margin-top": 5
+	});
+
+	collisionTest({
+		collision: "fit"
+	}, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" );
+
+	collisionTest2({
+		collision: "fit"
+	}, { top: addTop + 5, left: addLeft + 5 }, "left top" );
+
+	$( "#elx" ).css({
+		"margin-right": 15,
+		"margin-bottom": 15
+	});
+
+	collisionTest({
+		collision: "fit"
+	}, { top: addTop + within.height() - 25 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 25 - $.position.getScrollInfo( within ).width }, "right bottom" );
+
+	collisionTest2({
+		collision: "fit"
+	}, { top: addTop + 5, left: addLeft + 5 }, "left top" );
+});
+
+test( "collision: flip, with margin", function() {
+	var within = $("#within-container");
+	
+	$( "#elx" ).css( "margin", 10 );
+
+	collisionTest({
+		collision: "flip",
+		at: "left top"
+	}, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "left top" );
+
+	collisionTest2({
+		collision: "flip",
+		at: "right bottom"
+	}, { top: addTop + 0, left: addLeft + 0 }, "right bottom" );
+});
+
+}( jQuery ) );
diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html
index da0ff5170..11932da0e 100644
--- a/tests/visual/position/position.html
+++ b/tests/visual/position/position.html
@@ -35,7 +35,7 @@
 	<style>
 		input, .ui-menu { position: absolute; }
 		.ui-menu { width: 200px; }
-		html, body { width: 99%; height: 99% }
+		html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
 		#container { width: 95%; height: 95%; border: 1px solid black; margin: auto; }
 	</style>
 </head>
diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html
new file mode 100644
index 000000000..ac1009d3e
--- /dev/null
+++ b/tests/visual/position/position_within.html
@@ -0,0 +1,189 @@
+<!doctype html> 
+<html lang="en"> 
+<head> 
+    <meta charset="utf-8"> 
+	<title>Position Visual Test: Containing Element</title> 
+    
+    <link rel="stylesheet" href="../visual.css" type="text/css" />
+    <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
+    
+	<script type="text/javascript" src="../../../jquery-1.5.1.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>
+    
+	<style> 
+        html, body {
+            height:100%;
+            width:100%;
+            margin:0;
+            /* force scroll bar*/
+            min-height:800px;
+            min-width:800px;
+            
+            /* IE6 needs this */
+            text-align:center;
+        }
+        .demo-description {
+            text-align:center;
+            padding:1.5em;
+        }
+        .demo-container {
+            background:#aaa;
+            width:80%;   
+            height:80%;
+            
+            text-align:left;
+            margin:0 auto;
+            position:relative;
+            padding:10px;
+        }
+        .demo {
+            background:#eee;
+            overflow:hidden;
+            position:relative;
+            height:100%;
+            /* IE6 needs this */
+            width:100%;
+        }
+    	#parent {
+    		width: 60%;
+    		margin: 10px auto;
+    		padding: 5px;
+    		border: 1px solid #777;
+    		background-color: #fbca93;
+    		text-align: center;
+            cursor:move;
+    	}
+    	.positionable {
+    		width: 75px;
+    		height: 75px;
+    		position: absolute;
+    		display: block;
+    		right: 0;
+    		bottom: 0;
+    		background-color: #bcd5e6;
+    		text-align: center;
+            border:solid 2px #555;
+            cursor:move;
+    	}
+    	select, input {
+    		margin-left: 15px;
+    	}
+	</style> 
+	<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(),
+                    using: using,
+                    within: $( ".demo" ),
+                    collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
+                });
+            }
+            $( ".demo" ).append("<div style='width:5000px;height:5000px;' />").css("overflow","auto");
+
+            $( ".positionable" ).css( "opacity", 0.5 );
+
+            $( ":input" ).bind( "click keyup change", function() { position(); } );
+
+            $( "#parent" ).draggable({
+                drag: function() { position(); }
+            });
+
+            $( ".positionable" ).draggable({
+                drag: function( event, ui ) {
+                    // reset offset before calculating it
+                    $( "#offset" ).val( "0" );
+                    position(function( result ) {
+                    	var demo = $( ".demo" );
+                        $( "#offset" ).val( "" + ( ui.offset.left - result.left - demo.offset().left + demo.scrollLeft() ) +
+                            " " + ( ui.offset.top - result.top - demo.offset().top + demo.scrollTop() ) );
+                        position();
+                    });
+                }
+            });
+
+            position();
+    	});
+	</script>
+</head>
+<body>
+ 
+<div class="demo-description">
+    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.
+</div><!-- End demo-description -->
+
+<div class="demo-container">
+<div class="demo">
+
+    <div id="parent">
+    	<p>This is the position parent element.</p>
+    </div>
+ 
+    <div class="positionable">
+	    <p>to position</p>
+    </div>
+ 
+    <div class="positionable" style="width:120px; height: 40px;">
+    	<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>offset:</b>
+    		<input id="offset" type="text" size="15"/>
+    	</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="none">none</option>
+    		</select>
+    		<select id="collision_vertical">
+    			<option value="flip">flip</option>
+    			<option value="fit">fit</option>
+    			<option value="none">none</option>
+    		</select>
+    	</div>
+    </div>
+ 
+</div><!-- End demo --> 
+</div>
+
+</body>
+</html>
+\ No newline at end of file
author	Jörn Zaefferer <joern.zaefferer@gmail.com>	2011-06-09 16:40:50 +0200
committer	Jörn Zaefferer <joern.zaefferer@gmail.com>	2011-06-09 16:40:50 +0200
commit	433ed6eecf055eba327ced7e7c0ff0ce9b5fc304 (patch)
tree	bc7b781a57a59def551b6713ef50961b3db36b06 /tests
parent	3dea8f1786e07b17458f4fecff1dbb8b04f79a2d (diff)
parent	40c008872154965d7572cda7911d42857e9fc3a9 (diff)
download	jquery-ui-433ed6eecf055eba327ced7e7c0ff0ce9b5fc304.tar.gz jquery-ui-433ed6eecf055eba327ced7e7c0ff0ce9b5fc304.zip