Position: Handled scrolled windows properly with collision: fit. Fixe…

…s #7211 - Position: Collision: fit doesn't work at top of window when scrolled.
jquery · May 3, 2011 · 5e44b3c · 5e44b3c
1 parent 51df02e
commit 5e44b3c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 14 deletions.
diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js
@@ -1,5 +1,10 @@
 (function( $ ) {
 
+function scrollTopSupport() {
+	$( window ).scrollTop( 1 );
+	return $( window ).scrollTop() === 1;
+}
+
 module( "position" );
 
 test( "my, at, of", function() {
@@ -161,11 +166,7 @@ test( "of", function() {
 		left: $( window ).width() - 10
 	}, "window as jQuery object" );
 
-	var scrollTopSupport = (function() {
-		$( window ).scrollTop( 1 );
-		return $( window ).scrollTop() === 1;
-	}() );
-	if ( scrollTopSupport ) {
+	if ( scrollTopSupport() ) {
 		$( window ).scrollTop( 500 ).scrollLeft( 200 );
 		$( "#elx" ).position({
 			my: "right bottom",
@@ -311,6 +312,22 @@ test( "collision: fit, with offset", function() {
 	}, { top: 0, left: 0 }, "left top, negative offset" );
 });
 
+test( "collision: fit, window scrolled", function() {
+	if ( scrollTopSupport() ) {
+		var win = $( window );
+		win.scrollTop( 300 ).scrollLeft( 200 );
+		collisionTest({
+			collision: "fit",
+			at: "left-100 top-100"
+		}, { top: 300, left: 200 }, "top left" );
+		collisionTest2({
+			collision: "fit",
+			at: "right+100 bottom+100"
+		}, { top: 300 + win.height() - 10, left: 200 + win.width() - 10 }, "right bottom" );
+		win.scrollTop( 0 ).scrollLeft( 0 );
+	}
+});
+
 test( "collision: flip, no offset", function() {
 	collisionTest({
 		collision: "flip"

diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js
@@ -184,20 +184,37 @@ $.ui.position = {
 	fit: {
 		left: function( position, data ) {
 			var win = $( window ),
-				over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft();
-			position.left = over > 0 ?
-				position.left - over :
-				Math.max( position.left - data.collisionPosition.left, position.left );
+				overLeft = win.scrollLeft() - data.collisionPosition.left,
+				overRight = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft();
+
+			// element is wider than window or too far left -> align with left edge
+			if ( data.collisionWidth > win.width() || overLeft > 0 ) {
+				position.left = position.left + overLeft;
+			// too far right -> align with right edge
+			} else if ( overRight > 0 ) {
+				position.left = position.left - overRight;
+			// adjust based on position and margin
+			} else {
+				position.left = Math.max( position.left - data.collisionPosition.left, position.left );
+			}
 		},
 		top: function( position, data ) {
 			var win = $( window ),
-				over = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop();
-			position.top = over > 0 ?
-				position.top - over :
-				Math.max( position.top - data.collisionPosition.top, position.top );
+				overTop = win.scrollTop() - data.collisionPosition.top,
+				overBottom = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop();
+
+			// element is taller than window or too far up -> align with top edge
+			if ( data.collisionHeight > win.height() || overTop > 0 ) {
+				position.top = position.top + overTop;
+			// too far down -> align with bottom edge
+			} else if ( overBottom > 0 ) {
+				position.top = position.top - overBottom;
+			// adjust based on position and margin
+			} else {
+				position.top = Math.max( position.top - data.collisionPosition.top, position.top );
+			}
 		}
 	},
-
 	flip: {
 		left: function( position, data ) {
 			if ( data.at[ 0 ] === center ) {