From c6afaa10727fdabefad129cf76cf8a4d2caafb60 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Wed, 11 May 2011 16:30:21 -0700 Subject: [PATCH 01/20] Fix #5645 - Position: Allow for arbitrary element to be containing element --- ui/jquery.ui.position.js | 62 ++++++++++++++++++++++++---------------- 1 file changed, 37 insertions(+), 25 deletions(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 98b8198e29d..184571154b4 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -28,6 +28,7 @@ $.fn.position = function( options ) { options = $.extend( {}, options ); var target = $( options.of ), + within = $( options.within || window ), targetElem = target[0], collision = ( options.collision || "flip" ).split( " " ), offsets = {}, @@ -36,6 +37,8 @@ $.fn.position = function( options ) { targetHeight, basePosition; + options.within = within; + if ( targetElem.nodeType === 9 ) { targetWidth = target.width(); targetHeight = target.height(); @@ -168,7 +171,8 @@ $.fn.position = function( options ) { collisionHeight: collisionHeight, offset: [ atOffset[ 0 ] + myOffset[ 0 ], atOffset [ 1 ] + myOffset[ 1 ] ], my: options.my, - at: options.at + at: options.at, + within: within }); } }); @@ -183,12 +187,14 @@ $.fn.position = function( options ) { $.ui.position = { fit: { left: function( position, data ) { - var win = $( window ), - overLeft = win.scrollLeft() - data.collisionPosition.left, - overRight = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(); + var win = $( data.within ), + winOffset = win.offset(), + outerWidth = win.outerWidth(), + overLeft = win.scrollLeft() - data.collisionPosition.left + winOffset.left, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset.left; // element is wider than window or too far left -> align with left edge - if ( data.collisionWidth > win.width() || overLeft > 0 ) { + if ( data.collisionWidth > outerWidth || overLeft > 0 ) { position.left = position.left + overLeft; // too far right -> align with right edge } else if ( overRight > 0 ) { @@ -199,12 +205,14 @@ $.ui.position = { } }, top: function( position, data ) { - var win = $( window ), - overTop = win.scrollTop() - data.collisionPosition.top, - overBottom = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(); + var win = $( data.within ), + winOffset = win.offset(), + outerHeight = win.outerHeight(), + overTop = win.scrollTop() - data.collisionPosition.top + winOffset.top, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - win.scrollTop() - winOffset.top; // element is taller than window or too far up -> align with top edge - if ( data.collisionHeight > win.height() || overTop > 0 ) { + if ( data.collisionHeight > outerHeight || overTop > 0 ) { position.top = position.top + overTop; // too far down -> align with bottom edge } else if ( overBottom > 0 ) { @@ -220,8 +228,12 @@ $.ui.position = { if ( data.at[ 0 ] === center ) { return; } - var win = $( window ), - over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(), + var win = $( data.within ), + winOffset = win.offset(), + outerWidth = win.outerWidth(), + overLeft = data.collisionPosition.left - winOffset.left, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset.left, + left = data.my[ 0 ] === "left", myOffset = data.my[ 0 ] === "left" ? -data.elemWidth : data.my[ 0 ] === "right" ? @@ -231,19 +243,21 @@ $.ui.position = { data.targetWidth : -data.targetWidth, offset = -2 * data.offset[ 0 ]; - position.left += data.collisionPosition.left < 0 ? - myOffset + atOffset + offset : - over > 0 ? - myOffset + atOffset + offset : - 0; + if ( overLeft < 0 || overRight > 0 ) { + position.left += myOffset + atOffset + offset; + } }, top: function( position, data ) { if ( data.at[ 1 ] === center ) { return; } - var win = $( window ), - over = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(), - myOffset = data.my[ 1 ] === "top" ? + var win = $( data.within ), + winOffset = win.offset(), + outerHeight = win.outerHeight(), + overTop = data.collisionPosition.top - winOffset.top, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - win.scrollTop() - winOffset.top, + top = data.my[ 1 ] === "top", + myOffset = top ? -data.elemHeight : data.my[ 1 ] === "bottom" ? data.elemHeight : @@ -252,11 +266,9 @@ $.ui.position = { data.targetHeight : -data.targetHeight, offset = -2 * data.offset[ 1 ]; - position.top += data.collisionPosition.top < 0 ? - myOffset + atOffset + offset : - over > 0 ? - myOffset + atOffset + offset : - 0; + if ( overTop < 0 || overBottom > 0) { + position.top += myOffset + atOffset + offset; + } } } }; @@ -297,4 +309,4 @@ if ( $.uiBackCompat !== false ) { }( jQuery ) ); } -}( jQuery ) ); +}( jQuery ) ); \ No newline at end of file From abf3a86c8b4220442d35c2da61544d5a0a529b77 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Wed, 11 May 2011 16:44:20 -0700 Subject: [PATCH 02/20] Fix issue when window is "within". --- ui/jquery.ui.position.js | 46 +++++++++++++++++++++------------------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 184571154b4..eb94a64578d 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -37,8 +37,6 @@ $.fn.position = function( options ) { targetHeight, basePosition; - options.within = within; - if ( targetElem.nodeType === 9 ) { targetWidth = target.width(); targetHeight = target.height(); @@ -187,11 +185,12 @@ $.fn.position = function( options ) { $.ui.position = { fit: { left: function( position, data ) { - var win = $( data.within ), - winOffset = win.offset(), - outerWidth = win.outerWidth(), - overLeft = win.scrollLeft() - data.collisionPosition.left + winOffset.left, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset.left; + var win = data.within, + isWindow = $.isWindow(data.within[0]), + winOffset = isWindow ? 0 : win.offset().left, + outerWidth = isWindow ? win.width() : win.outerWidth(), + overLeft = win.scrollLeft() - data.collisionPosition.left + winOffset, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset; // element is wider than window or too far left -> align with left edge if ( data.collisionWidth > outerWidth || overLeft > 0 ) { @@ -205,11 +204,12 @@ $.ui.position = { } }, top: function( position, data ) { - var win = $( data.within ), - winOffset = win.offset(), - outerHeight = win.outerHeight(), - overTop = win.scrollTop() - data.collisionPosition.top + winOffset.top, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - win.scrollTop() - winOffset.top; + var win = data.within, + isWindow = $.isWindow(data.within[0]), + winOffset = isWindow ? 0 : win.offset().top, + outerHeight = isWindow ? win.height() : win.outerHeight(), + overTop = win.scrollTop() - data.collisionPosition.top + winOffset, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - win.scrollTop() - winOffset; // element is taller than window or too far up -> align with top edge if ( data.collisionHeight > outerHeight || overTop > 0 ) { @@ -228,11 +228,12 @@ $.ui.position = { if ( data.at[ 0 ] === center ) { return; } - var win = $( data.within ), - winOffset = win.offset(), - outerWidth = win.outerWidth(), - overLeft = data.collisionPosition.left - winOffset.left, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset.left, + var win = data.within, + isWindow = $.isWindow(data.within[0]), + winOffset = isWindow ? 0 : win.offset().left, + outerWidth = isWindow ? win.width() : win.outerWidth(), + overLeft = data.collisionPosition.left - winOffset, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset left = data.my[ 0 ] === "left", myOffset = data.my[ 0 ] === "left" ? -data.elemWidth : @@ -251,11 +252,12 @@ $.ui.position = { if ( data.at[ 1 ] === center ) { return; } - var win = $( data.within ), - winOffset = win.offset(), - outerHeight = win.outerHeight(), - overTop = data.collisionPosition.top - winOffset.top, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - win.scrollTop() - winOffset.top, + var win = data.within, + isWindow = $.isWindow(data.within[0]), + winOffset = isWindow ? 0 : win.offset().top, + outerHeight = isWindow ? win.height() : win.outerHeight(), + overTop = data.collisionPosition.top - winOffset, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - win.scrollTop() - winOffset, top = data.my[ 1 ] === "top", myOffset = top ? -data.elemHeight : From 9e4e359705e6cb0b9608c3d842b7235ab1daefef Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Wed, 11 May 2011 16:52:43 -0700 Subject: [PATCH 03/20] fix spacing and add in a missing comma --- ui/jquery.ui.position.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index eb94a64578d..ab9c6aae0c3 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -186,7 +186,7 @@ $.ui.position = { fit: { left: function( position, data ) { var win = data.within, - isWindow = $.isWindow(data.within[0]), + isWindow = $.isWindow( data.within[0] ), winOffset = isWindow ? 0 : win.offset().left, outerWidth = isWindow ? win.width() : win.outerWidth(), overLeft = win.scrollLeft() - data.collisionPosition.left + winOffset, @@ -205,7 +205,7 @@ $.ui.position = { }, top: function( position, data ) { var win = data.within, - isWindow = $.isWindow(data.within[0]), + isWindow = $.isWindow( data.within[0] ), winOffset = isWindow ? 0 : win.offset().top, outerHeight = isWindow ? win.height() : win.outerHeight(), overTop = win.scrollTop() - data.collisionPosition.top + winOffset, @@ -228,12 +228,13 @@ $.ui.position = { if ( data.at[ 0 ] === center ) { return; } + var win = data.within, - isWindow = $.isWindow(data.within[0]), + isWindow = $.isWindow( data.within[0] ), winOffset = isWindow ? 0 : win.offset().left, outerWidth = isWindow ? win.width() : win.outerWidth(), overLeft = data.collisionPosition.left - winOffset, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset, left = data.my[ 0 ] === "left", myOffset = data.my[ 0 ] === "left" ? -data.elemWidth : @@ -253,7 +254,7 @@ $.ui.position = { return; } var win = data.within, - isWindow = $.isWindow(data.within[0]), + isWindow = $.isWindow( data.within[0] ), winOffset = isWindow ? 0 : win.offset().top, outerHeight = isWindow ? win.height() : win.outerHeight(), overTop = data.collisionPosition.top - winOffset, From b6497996cee2dc8dff0006ceae0d6e240e658f6a Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 13:28:01 +0000 Subject: [PATCH 04/20] Replace comma with semi-colon. How'd that get there? --- ui/jquery.ui.position.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index ab9c6aae0c3..c1c815bd28e 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -111,7 +111,7 @@ $.fn.position = function( options ) { parseInt( offsets.at[ 1 ], 10 ) * ( rpercent.test( offsets.at[ 1 ] ) ? targetHeight / 100 : 1 ) ]; - basePosition.left += atOffset[ 0 ], + basePosition.left += atOffset[ 0 ]; basePosition.top += atOffset[ 1 ]; return this.each(function() { From 396ed559a490507d07a605bd989e83d24e2d7f40 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 14:27:29 +0000 Subject: [PATCH 05/20] Add a new visual test for position --- tests/visual/position/position_within.html | 177 +++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 tests/visual/position/position_within.html diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html new file mode 100644 index 00000000000..f30ee625f40 --- /dev/null +++ b/tests/visual/position/position_within.html @@ -0,0 +1,177 @@ + + + + + Position Visual Test: Default + + + + + + + + + + + + + + + + +
+ Use the form controls to configure the positioning, or drag the positioned element to modify its offset. +
Drag around the parent element to see collision detection in action. +
+ +
+
+ +
+

This is the position parent element.

+
+ +
+

to position

+
+ +
+

to position 2

+
+ +
+ position... +
+ my: + + +
+
+ at: + + +
+
+ offset: + +
+
+ collision: + + +
+
+ +
+
+ + + \ No newline at end of file From 0bda22f443ace20035ec4f049c60b951d5c82b03 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 14:29:27 +0000 Subject: [PATCH 06/20] Update title to reflect test --- tests/visual/position/position_within.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index f30ee625f40..da97eb7e13a 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -2,7 +2,7 @@ - Position Visual Test: Default + Position Visual Test: Containing Element From 7bca8c100445d1ab8da4f25bd9201408f5eb2174 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 20:44:24 +0000 Subject: [PATCH 07/20] Fix typos in original tests --- tests/unit/position/position_core.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index dbbda8a3b8a..b3f5d9b61e1 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -1,7 +1,7 @@ (function( $ ) { function scrollTopSupport() { - $( window ).scrollTop( 1 ); + $( window ).scrollTop( 1 ); return $( window ).scrollTop() === 1; } @@ -64,7 +64,6 @@ test( "positions", function() { center: 3, right: 6, top: 0, - center: 3, bottom: 6 }; var start = { left: 4, top: 4 }; @@ -351,7 +350,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" ); }); From 17be87f34cb2651e7903db3911527c43f5c05ba1 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 20:48:01 +0000 Subject: [PATCH 08/20] Whitespace fix --- tests/unit/position/position_core.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index b3f5d9b61e1..613fffa02fb 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -1,7 +1,7 @@ (function( $ ) { function scrollTopSupport() { - $( window ).scrollTop( 1 ); + $( window ).scrollTop( 1 ); return $( window ).scrollTop() === 1; } From dc66f02601eb3a46a93e5d08145e9b4580def237 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 20:50:16 +0000 Subject: [PATCH 09/20] Add tests for position's `within` --- tests/unit/position/position.html | 44 +- tests/unit/position/position_core_within.js | 560 ++++++++++++++++++++ tests/visual/position/position_within.html | 1 + 3 files changed, 586 insertions(+), 19 deletions(-) create mode 100644 tests/unit/position/position_core_within.js diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index 4f2e87e080b..6e4373172f6 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -16,6 +16,7 @@ + @@ -34,29 +35,34 @@

-->
-
-
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+ +
+ +
+
+
+
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js new file mode 100644 index 00000000000..0ece93b6920 --- /dev/null +++ b/tests/unit/position/position_core_within.js @@ -0,0 +1,560 @@ +(function( $ ) { + +$("#within-container").show(); + +function scrollTopSupport() { + $( window ).scrollTop( 1 ); + return $( window ).scrollTop() === 1; +} +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( "within: my, at, of", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + 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-container") + }); + 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-container") + }); + 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-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" ); +}); + +test( "within: multiple elements", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + 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( "within: positions", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + 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( "within: of", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: $( "#parentx"), + collision: "none", + within: $("#within-container") + }); + 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-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" ); + + // these tests are not valid for "within" since of is not contained by within. + /* + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: document, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( document ).height() - 10, + left: addLeft + $( document ).width() - 10 + }, "document" ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: $( document ), + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( document ).height() - 10, + left: addLeft + $( document ).width() - 10 + }, "document as jQuery object" ); + + $( window ).scrollTop( 0 ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: window, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( window ).height() - 10, + left: addLeft + $( window ).width() - 10 + }, "window" ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: $( window ), + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( window ).height() - 10, + left: addLeft + $( window ).width() - 10 + }, "window as jQuery object" ); + + if ( scrollTopSupport() ) { + $( window ).scrollTop( 500 ).scrollLeft( 200 ); + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: window, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( window ).height() + 500 - 10, + left: addLeft + $( window ).width() + 200 - 10 + }, "window, scrolled" ); + $( window ).scrollTop( 0 ).scrollLeft( 0 ); + }*/ + + var event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } ); + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: event, + collision: "none", + within: $("#within-container") + }); + 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-container") + }); + same( $( "#elx" ).offset(), { + top: 600, + left: 400 + }, "event - left top, right bottom" ); +}); + +test( "within:offsets", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).position({ + my: "left top", + at: "left+10 bottom+10", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + 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-container") + }); + 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-container") + }); + 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-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" ); +}); + +test( "within: using", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + expect( 6 ); + + 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-container") + }).addOffsets(); + + elems.position({ + my: "left top", + at: "left top", + of: "#parentx", + using: function( position ) { + position.top -= $("#within-container").offset().top; + position.left -= $("#within-container").offset().left; + same( this, elems[ count ], "correct context for call #" + count ); + same( position, expectedPosition, "correct position for call #" + count ); + count++; + }, + within: $("#within-container") + }); + + elems.each(function() { + same( $( this ).addOffsets(), originalPosition, "elements not moved" ); + }); +}); + +function collisionTest( config, result, msg ) { + var elem = $( "#elx" ).position( $.extend({ + my: "left top", + at: "right bottom", + of: $("#within-container")[0], + within: $("#within-container") + }, config ) ); + same( elem.addOffsets(), result, msg ); +} + +function collisionTest2( config, result, msg ) { + collisionTest( $.extend({ + my: "right bottom", + at: "left top" + }, config ), result, msg ); +} + +test( "within: collision: fit, no offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 0, left: addLeft + 0 }, "left top" ); +}); + + +test( "within: collision: fit, with offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "fit", + at: "right+2 bottom+3" + }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "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( "within: collision: fit, window scrolled", function() { + if ( scrollTopSupport() ) { + $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); + + + + var win = $("#within-container").css("overflow", "auto"); + win.scrollTop( 300 ).scrollLeft( 150 ); + + collisionTest({ + collision: "fit", + at: "left-100 top-100" + }, { top: addTop + 300, left: addLeft + 150 }, "top left" ); + collisionTest2({ + collision: "fit", + at: "right+100 bottom+100" + }, { top: addTop + 300 + win.height() + 10, left: addLeft + 150 + win.width() + 10 }, "right bottom" ); + win.scrollTop( 0 ).scrollLeft( 0 ); + + } + +}); + +test( "within: collision: flip, no offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "flip" + }, { top: addTop + -10, left: addLeft + -10 }, "left top" ); + + collisionTest2({ + collision: "flip" + }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "right bottom" ); +}); + +test( "within: collision: flip, with offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + 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-container").height() - 3, left: addLeft + $("#within-container").width() - 2 }, "bottom, positive offset" ); + + collisionTest2({ + collision: "flip", + at: "left-2 top-3" + }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, negative offset" ); +}); + +test( "within: collision: none, no offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "none" + }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "left top" ); + + collisionTest2({ + collision: "none" + }, { top: addTop + -10, left: addLeft + -10 }, "moved to the right bottom" ); +}); + +test( "within: collision: none, with offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "none", + at: "right+2 bottom+3" + }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").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( "within: collision: fit, with margin", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).css( "margin", 10 ); + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "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-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "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-container").height() - 25, left: addLeft + $("#within-container").width() - 25 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 5, left: addLeft + 5 }, "left top" ); +}); + +test( "within: collision: flip, with margin", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).css( "margin", 10 ); + + collisionTest({ + collision: "flip", + at: "left top" + }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "left top" ); + + collisionTest2({ + collision: "flip", + at: "right bottom" + }, { top: addTop + 0, left: addLeft + 0 }, "right bottom" ); +}); + +//test( "bug #5280: consistent results (avoid fractional values)", function() { +// var wrapper = $( "#bug-5280" ), +// elem = wrapper.children(), +// offset1 = elem.position({ +// my: "center", +// at: "center", +// of: wrapper, +// collision: "none" +// }).offset(), +// offset2 = elem.position({ +// my: "center", +// at: "center", +// of: wrapper, +// collision: "none" +// }).offset(); +// same( offset1, offset2 ); +//}); + + + +}( jQuery ) ); diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index da97eb7e13a..e53e9ddf608 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -76,6 +76,7 @@ collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() }); } + $( ".demo" ).append("
").css("overflow","auto").scrollTop( 500 ).scrollLeft( 500 ); $( ".positionable" ).css( "opacity", 0.5 ); From c9c6908434b41df9fcfd55c38d2cbf58df9d2e04 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 20:51:49 +0000 Subject: [PATCH 10/20] Another whitespace fix --- tests/unit/position/position_core_within.js | 206 ++++++++++---------- 1 file changed, 103 insertions(+), 103 deletions(-) diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 0ece93b6920..90c12c44b32 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -3,33 +3,33 @@ $("#within-container").show(); function scrollTopSupport() { - $( window ).scrollTop( 1 ); - return $( window ).scrollTop() === 1; + $( window ).scrollTop( 1 ); + return $( window ).scrollTop() === 1; } var addTop = -20, - addLeft = -20; - + addLeft = -20; + $.fn.addOffsets = function() { - var elOffset = this.offset(), - offset = $("#within-container").offset(); + 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 }; + elOffset.top -= offset.top; + elOffset.left -= offset.left; + + return {top: elOffset.top - offset.top, left: elOffset.left - offset.left }; }; test( "within: my, at, of", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + $( "#elx" ).position({ my: "left top", at: "left top", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "left top, left top" ); @@ -38,7 +38,7 @@ test( "within: my, at, of", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "left top, left bottom" ); @@ -47,7 +47,7 @@ test( "within: my, at, of", function() { at: "bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 55, left: addLeft + 50 }, "left, bottom" ); @@ -56,23 +56,23 @@ test( "within: my, at, of", function() { at: "bar baz", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" ); }); test( "within: multiple elements", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + var elements = $( "#el1, #el2" ); var result = elements.position({ my: "left top", at: "left bottom", of: "#parent", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( result, elements ); @@ -83,10 +83,10 @@ test( "within: multiple elements", function() { }); test( "within: positions", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + var definitions = []; var offsets = { left: 0, @@ -117,7 +117,7 @@ test( "within: positions", function() { at: definition.at, of: "#parent", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( el.addOffsets(), definition.result, "Position via " + QUnit.jsDump.parse({ my:definition.my, at:definition.at }) ); @@ -125,17 +125,17 @@ test( "within: positions", function() { }); test( "within: of", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).position({ my: "left top", at: "left top", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" ); @@ -144,7 +144,7 @@ test( "within: of", function() { at: "left bottom", of: $( "#parentx"), collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "jQuery object" ); @@ -153,18 +153,18 @@ test( "within: of", function() { at: "left top", of: $( "#parentx" )[ 0 ], collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" ); - // these tests are not valid for "within" since of is not contained by within. - /* - $( "#elx" ).position({ + // these tests are not valid for "within" since of is not contained by within. + /* + $( "#elx" ).position({ my: "right bottom", at: "right bottom", of: document, collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + $( document ).height() - 10, @@ -176,7 +176,7 @@ test( "within: of", function() { at: "right bottom", of: $( document ), collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + $( document ).height() - 10, @@ -190,7 +190,7 @@ test( "within: of", function() { at: "right bottom", of: window, collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + $( window ).height() - 10, @@ -202,7 +202,7 @@ test( "within: of", function() { at: "right bottom", of: $( window ), collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + $( window ).height() - 10, @@ -216,7 +216,7 @@ test( "within: of", function() { at: "right bottom", of: window, collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + $( window ).height() + 500 - 10, @@ -231,7 +231,7 @@ test( "within: of", function() { at: "left top", of: event, collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).offset(), { top: 300, @@ -244,7 +244,7 @@ test( "within: of", function() { at: "right bottom", of: event, collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).offset(), { top: 600, @@ -253,16 +253,16 @@ test( "within: of", function() { }); test( "within:offsets", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + $( "#elx" ).position({ my: "left top", at: "left+10 bottom+10", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 70, left: addLeft + 50 }, "offsets in at" ); @@ -271,7 +271,7 @@ test( "within:offsets", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 50, left: addLeft + 50 }, "offsets in my" ); @@ -280,7 +280,7 @@ test( "within:offsets", function() { at: "left+50% bottom-10%", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 58, left: addLeft + 50 }, "percentage offsets in at" ); @@ -289,16 +289,16 @@ test( "within:offsets", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" ); }); test( "within: using", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + expect( 6 ); var count = 0, @@ -309,7 +309,7 @@ test( "within: using", function() { at: "rigt bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }).addOffsets(); elems.position({ @@ -317,13 +317,13 @@ test( "within: using", function() { at: "left top", of: "#parentx", using: function( position ) { - position.top -= $("#within-container").offset().top; - position.left -= $("#within-container").offset().left; + position.top -= $("#within-container").offset().top; + position.left -= $("#within-container").offset().left; same( this, elems[ count ], "correct context for call #" + count ); same( position, expectedPosition, "correct position for call #" + count ); count++; }, - within: $("#within-container") + within: $("#within-container") }); elems.each(function() { @@ -336,7 +336,7 @@ function collisionTest( config, result, msg ) { my: "left top", at: "right bottom", of: $("#within-container")[0], - within: $("#within-container") + within: $("#within-container") }, config ) ); same( elem.addOffsets(), result, msg ); } @@ -349,10 +349,10 @@ function collisionTest2( config, result, msg ) { } test( "within: collision: fit, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "fit" }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom" ); @@ -364,10 +364,10 @@ test( "within: collision: fit, no offset", function() { test( "within: collision: fit, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "fit", at: "right+2 bottom+3" @@ -386,13 +386,13 @@ test( "within: collision: fit, with offset", function() { test( "within: collision: fit, window scrolled", function() { if ( scrollTopSupport() ) { - $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); - - - - var win = $("#within-container").css("overflow", "auto"); - win.scrollTop( 300 ).scrollLeft( 150 ); - + $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); + + + + var win = $("#within-container").css("overflow", "auto"); + win.scrollTop( 300 ).scrollLeft( 150 ); + collisionTest({ collision: "fit", at: "left-100 top-100" @@ -406,12 +406,12 @@ test( "within: collision: fit, window scrolled", function() { } }); - + test( "within: collision: flip, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "flip" }, { top: addTop + -10, left: addLeft + -10 }, "left top" ); @@ -422,10 +422,10 @@ test( "within: collision: flip, no offset", function() { }); test( "within: collision: flip, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "flip", at: "right+2 bottom+3" @@ -443,10 +443,10 @@ test( "within: collision: flip, with offset", function() { }); test( "within: collision: none, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "none" }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "left top" ); @@ -457,10 +457,10 @@ test( "within: collision: none, no offset", function() { }); test( "within: collision: none, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "none", at: "right+2 bottom+3" @@ -478,10 +478,10 @@ test( "within: collision: none, with offset", function() { }); test( "within: collision: fit, with margin", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + $( "#elx" ).css( "margin", 10 ); collisionTest({ @@ -520,10 +520,10 @@ test( "within: collision: fit, with margin", function() { }); test( "within: collision: flip, with margin", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + $( "#elx" ).css( "margin", 10 ); collisionTest({ From e31d707d93faafa6ba788de06688069015411adf Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 21:07:09 +0000 Subject: [PATCH 11/20] The qunit-fixture were preventing the results from being clicked. Make the results appear on top of the qunit-fixture --- tests/unit/position/position.html | 17 +++++++++-------- tests/unit/position/position_core_within.js | 2 -- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index 6e4373172f6..d71bae49774 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -21,20 +21,21 @@ - -

jQuery UI Position Test Suite

-

-
-

-
    -
+
+

jQuery UI Position Test Suite

+

+
+

+
    +
+
-
+
diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 90c12c44b32..98a2f5943dc 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -555,6 +555,4 @@ test( "within: collision: flip, with margin", function() { // same( offset1, offset2 ); //}); - - }( jQuery ) ); From 2f4da6f13d825698ce1fed5c11b2b4e8afada04e Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 19:17:42 +0000 Subject: [PATCH 12/20] Update var name to avoid confusion --- ui/jquery.ui.position.js | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index c1c815bd28e..6020f01410c 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -185,12 +185,12 @@ $.fn.position = function( options ) { $.ui.position = { fit: { left: function( position, data ) { - var win = data.within, + var within = data.within, isWindow = $.isWindow( data.within[0] ), - winOffset = isWindow ? 0 : win.offset().left, - outerWidth = isWindow ? win.width() : win.outerWidth(), - overLeft = win.scrollLeft() - data.collisionPosition.left + winOffset, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset; + withinOffset = isWindow ? 0 : within.offset().left, + outerWidth = isWindow ? within.width() : within.outerWidth(), + overLeft = within.scrollLeft() - data.collisionPosition.left + withinOffset, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - within.scrollLeft() - withinOffset; // element is wider than window or too far left -> align with left edge if ( data.collisionWidth > outerWidth || overLeft > 0 ) { @@ -204,12 +204,12 @@ $.ui.position = { } }, top: function( position, data ) { - var win = data.within, + var within = data.within, isWindow = $.isWindow( data.within[0] ), - winOffset = isWindow ? 0 : win.offset().top, - outerHeight = isWindow ? win.height() : win.outerHeight(), - overTop = win.scrollTop() - data.collisionPosition.top + winOffset, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - win.scrollTop() - winOffset; + withinOffset = isWindow ? 0 : within.offset().top, + outerHeight = isWindow ? within.height() : within.outerHeight(), + overTop = within.scrollTop() - data.collisionPosition.top + withinOffset, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - within.scrollTop() - withinOffset; // element is taller than window or too far up -> align with top edge if ( data.collisionHeight > outerHeight || overTop > 0 ) { @@ -229,12 +229,12 @@ $.ui.position = { return; } - var win = data.within, + var within = data.within, isWindow = $.isWindow( data.within[0] ), - winOffset = isWindow ? 0 : win.offset().left, - outerWidth = isWindow ? win.width() : win.outerWidth(), - overLeft = data.collisionPosition.left - winOffset, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset, + withinOffset = isWindow ? 0 : within.offset().left, + outerWidth = isWindow ? within.width() : within.outerWidth(), + overLeft = data.collisionPosition.left - withinOffset, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - within.scrollLeft() - withinOffset, left = data.my[ 0 ] === "left", myOffset = data.my[ 0 ] === "left" ? -data.elemWidth : @@ -253,12 +253,12 @@ $.ui.position = { if ( data.at[ 1 ] === center ) { return; } - var win = data.within, + var within = data.within, isWindow = $.isWindow( data.within[0] ), - winOffset = isWindow ? 0 : win.offset().top, - outerHeight = isWindow ? win.height() : win.outerHeight(), - overTop = data.collisionPosition.top - winOffset, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - win.scrollTop() - winOffset, + withinOffset = isWindow ? 0 : within.offset().top, + outerHeight = isWindow ? within.height() : within.outerHeight(), + overTop = data.collisionPosition.top - withinOffset, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - within.scrollTop() - withinOffset, top = data.my[ 1 ] === "top", myOffset = top ? -data.elemHeight : From 2bf45db9a556cfdcdb62e568a61423f395156482 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 20:53:25 +0000 Subject: [PATCH 13/20] Update test to make things a bit easier to test --- tests/visual/position/position_within.html | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index e53e9ddf608..a20ae7b5626 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -19,6 +19,9 @@ height:100%; width:100%; margin:0; + /* force scroll bar*/ + min-height:800px; + min-width:800px; } .demo-description { text-align:center; @@ -76,7 +79,7 @@ collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() }); } - $( ".demo" ).append("
").css("overflow","auto").scrollTop( 500 ).scrollLeft( 500 ); + $( ".demo" ).append("
").css("overflow","auto"); $( ".positionable" ).css( "opacity", 0.5 ); @@ -91,8 +94,9 @@ // reset offset before calculating it $( "#offset" ).val( "0" ); position(function( result ) { - $( "#offset" ).val( "" + ( ui.offset.left - result.left ) + - " " + ( ui.offset.top - result.top ) ); + 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(); }); } From 939b6989c71683638415361e2f5410307b4211dc Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 20:54:25 +0000 Subject: [PATCH 14/20] Update position to work properly when window and/or within element is scrolled. --- ui/jquery.ui.position.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 6020f01410c..5ac19fcca38 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -186,11 +186,12 @@ $.ui.position = { fit: { left: function( position, data ) { var within = data.within, + win = $( window ), isWindow = $.isWindow( data.within[0] ), withinOffset = isWindow ? 0 : within.offset().left, outerWidth = isWindow ? within.width() : within.outerWidth(), - overLeft = within.scrollLeft() - data.collisionPosition.left + withinOffset, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - within.scrollLeft() - withinOffset; + overLeft = - data.collisionPosition.left + withinOffset, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset; // element is wider than window or too far left -> align with left edge if ( data.collisionWidth > outerWidth || overLeft > 0 ) { @@ -205,11 +206,12 @@ $.ui.position = { }, top: function( position, data ) { var within = data.within, + win = $( window ), isWindow = $.isWindow( data.within[0] ), withinOffset = isWindow ? 0 : within.offset().top, outerHeight = isWindow ? within.height() : within.outerHeight(), - overTop = within.scrollTop() - data.collisionPosition.top + withinOffset, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - within.scrollTop() - withinOffset; + overTop = - data.collisionPosition.top + withinOffset, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset; // element is taller than window or too far up -> align with top edge if ( data.collisionHeight > outerHeight || overTop > 0 ) { @@ -230,11 +232,12 @@ $.ui.position = { } var within = data.within, + win = $( window ), isWindow = $.isWindow( data.within[0] ), withinOffset = isWindow ? 0 : within.offset().left, outerWidth = isWindow ? within.width() : within.outerWidth(), overLeft = data.collisionPosition.left - withinOffset, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - within.scrollLeft() - withinOffset, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset, left = data.my[ 0 ] === "left", myOffset = data.my[ 0 ] === "left" ? -data.elemWidth : @@ -254,11 +257,12 @@ $.ui.position = { return; } var within = data.within, + win = $( window ), isWindow = $.isWindow( data.within[0] ), withinOffset = isWindow ? 0 : within.offset().top, outerHeight = isWindow ? within.height() : within.outerHeight(), overTop = data.collisionPosition.top - withinOffset, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - within.scrollTop() - withinOffset, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset, top = data.my[ 1 ] === "top", myOffset = top ? -data.elemHeight : @@ -269,6 +273,7 @@ $.ui.position = { data.targetHeight : -data.targetHeight, offset = -2 * data.offset[ 1 ]; + console.log(overBottom); if ( overTop < 0 || overBottom > 0) { position.top += myOffset + atOffset + offset; } From cf96d225325961a24d43bbfdfcf0023bb87e3101 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 21:57:16 +0000 Subject: [PATCH 15/20] position now passes all tests! 0/ --- tests/unit/position/position_core.js | 3 +- tests/unit/position/position_core_within.js | 8 ++--- ui/jquery.ui.position.js | 33 +++++++++++---------- 3 files changed, 23 insertions(+), 21 deletions(-) diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index 613fffa02fb..73b7026e609 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -314,7 +314,7 @@ test( "collision: fit, with offset", function() { test( "collision: fit, window scrolled", function() { if ( scrollTopSupport() ) { var win = $( window ); - win.scrollTop( 300 ).scrollLeft( 200 ); + $( window ).scrollTop( 300 ).scrollLeft( 200 ); collisionTest({ collision: "fit", at: "left-100 top-100" @@ -323,6 +323,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 ); } }); diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 98a2f5943dc..2f912c6b909 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -384,7 +384,7 @@ test( "within: collision: fit, with offset", function() { }, { top: addTop + 0, left: addLeft + 0 }, "left top, negative offset" ); }); -test( "within: collision: fit, window scrolled", function() { +test( "within: collision: fit, within scrolled", function() { if ( scrollTopSupport() ) { $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); @@ -396,15 +396,13 @@ test( "within: collision: fit, window scrolled", function() { collisionTest({ collision: "fit", at: "left-100 top-100" - }, { top: addTop + 300, left: addLeft + 150 }, "top left" ); + }, { top: addTop, left: addLeft }, "top left" ); collisionTest2({ collision: "fit", at: "right+100 bottom+100" - }, { top: addTop + 300 + win.height() + 10, left: addLeft + 150 + win.width() + 10 }, "right bottom" ); + }, { top: addTop + win.height() - 10, left: addLeft + win.width() - 10 }, "right bottom" ); win.scrollTop( 0 ).scrollLeft( 0 ); - } - }); test( "within: collision: flip, no offset", function() { diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 5ac19fcca38..2b44c8f707d 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -188,41 +188,45 @@ $.ui.position = { var within = data.within, win = $( window ), isWindow = $.isWindow( data.within[0] ), - withinOffset = isWindow ? 0 : within.offset().left, - outerWidth = isWindow ? within.width() : within.outerWidth(), - overLeft = - data.collisionPosition.left + withinOffset, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset; + withinOffset = isWindow ? win.scrollLeft() : within.offset().left, + outerWidth = isWindow ? win.width() : within.outerWidth(), + overLeft = withinOffset - data.collisionPosition.left, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset, + newLeft; // element is wider than window or too far left -> align with left edge if ( data.collisionWidth > outerWidth || overLeft > 0 ) { - position.left = position.left + overLeft; + newLeft = position.left + overLeft; // too far right -> align with right edge } else if ( overRight > 0 ) { - position.left = position.left - overRight; + newLeft = position.left - overRight; // adjust based on position and margin } else { - position.left = Math.max( position.left - data.collisionPosition.left, position.left ); + newLeft = Math.max( position.left - data.collisionPosition.left, position.left ); } + position.left = newLeft; }, top: function( position, data ) { var within = data.within, win = $( window ), isWindow = $.isWindow( data.within[0] ), - withinOffset = isWindow ? 0 : within.offset().top, - outerHeight = isWindow ? within.height() : within.outerHeight(), - overTop = - data.collisionPosition.top + withinOffset, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset; + withinOffset = isWindow ? win.scrollTop() : within.offset().top, + outerHeight = isWindow ? win.height() : within.outerHeight(), + overTop = withinOffset - data.collisionPosition.top, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset, + newTop; // element is taller than window or too far up -> align with top edge if ( data.collisionHeight > outerHeight || overTop > 0 ) { - position.top = position.top + overTop; + newTop = position.top + overTop; // too far down -> align with bottom edge } else if ( overBottom > 0 ) { - position.top = position.top - overBottom; + newTop = position.top - overBottom; // adjust based on position and margin } else { - position.top = Math.max( position.top - data.collisionPosition.top, position.top ); + newTop = Math.max( position.top - data.collisionPosition.top, position.top ); } + position.top = newTop; } }, flip: { @@ -273,7 +277,6 @@ $.ui.position = { data.targetHeight : -data.targetHeight, offset = -2 * data.offset[ 1 ]; - console.log(overBottom); if ( overTop < 0 || overBottom > 0) { position.top += myOffset + atOffset + offset; } From f798b046e0e25f1eea0ed695089c4f4502f9c18d Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 22:21:52 +0000 Subject: [PATCH 16/20] Update core visual test to allow testing while the window is scrolled. --- tests/visual/position/position.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html index da0ff51707e..11932da0e75 100644 --- a/tests/visual/position/position.html +++ b/tests/visual/position/position.html @@ -35,7 +35,7 @@ From e4a42991df74955294d0cfa95273722eb006969d Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Mon, 16 May 2011 23:46:21 +0000 Subject: [PATCH 17/20] Removing unnecessary variables, caching 'within' in tests where its beneficial, and making some other changes based on the code review --- tests/unit/position/position_core.js | 5 +- tests/unit/position/position_core_within.js | 259 ++++++-------------- ui/jquery.ui.position.js | 20 +- 3 files changed, 83 insertions(+), 201 deletions(-) diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index 73b7026e609..bd8e586123b 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -314,7 +314,8 @@ test( "collision: fit, with offset", function() { test( "collision: fit, window scrolled", function() { if ( scrollTopSupport() ) { var win = $( window ); - $( window ).scrollTop( 300 ).scrollLeft( 200 ); + win.scrollTop( 300 ).scrollLeft( 200 ); + collisionTest({ collision: "fit", at: "left-100 top-100" @@ -323,7 +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 ); } }); diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 2f912c6b909..c572329e5f8 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -1,14 +1,19 @@ (function( $ ) { -$("#within-container").show(); - 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(); @@ -19,17 +24,15 @@ $.fn.addOffsets = function() { return {top: elOffset.top - offset.top, left: elOffset.left - offset.left }; }; -test( "within: my, at, of", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "my, at, of", function() { + var within = $("#within-container"); $( "#elx" ).position({ my: "left top", at: "left top", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "left top, left top" ); @@ -38,7 +41,7 @@ test( "within: my, at, of", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "left top, left bottom" ); @@ -47,7 +50,7 @@ test( "within: my, at, of", function() { at: "bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 55, left: addLeft + 50 }, "left, bottom" ); @@ -56,16 +59,12 @@ test( "within: my, at, of", function() { at: "bar baz", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" ); }); -test( "within: multiple elements", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - +test( "multiple elements", function() { var elements = $( "#el1, #el2" ); var result = elements.position({ my: "left top", @@ -82,11 +81,7 @@ test( "within: multiple elements", function() { }); }); -test( "within: positions", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - +test( "positions", function() { var definitions = []; var offsets = { left: 0, @@ -124,18 +119,15 @@ test( "within: positions", function() { }); }); -test( "within: of", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - +test( "of", function() { + var within = $("#within-container"); $( "#elx" ).position({ my: "left top", at: "left top", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" ); @@ -144,7 +136,7 @@ test( "within: of", function() { at: "left bottom", of: $( "#parentx"), collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "jQuery object" ); @@ -153,85 +145,17 @@ test( "within: of", function() { at: "left top", of: $( "#parentx" )[ 0 ], collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" ); - // these tests are not valid for "within" since of is not contained by within. - /* - $( "#elx" ).position({ - my: "right bottom", - at: "right bottom", - of: document, - collision: "none", - within: $("#within-container") - }); - same( $( "#elx" ).addOffsets(), { - top: addTop + $( document ).height() - 10, - left: addLeft + $( document ).width() - 10 - }, "document" ); - - $( "#elx" ).position({ - my: "right bottom", - at: "right bottom", - of: $( document ), - collision: "none", - within: $("#within-container") - }); - same( $( "#elx" ).addOffsets(), { - top: addTop + $( document ).height() - 10, - left: addLeft + $( document ).width() - 10 - }, "document as jQuery object" ); - - $( window ).scrollTop( 0 ); - - $( "#elx" ).position({ - my: "right bottom", - at: "right bottom", - of: window, - collision: "none", - within: $("#within-container") - }); - same( $( "#elx" ).addOffsets(), { - top: addTop + $( window ).height() - 10, - left: addLeft + $( window ).width() - 10 - }, "window" ); - - $( "#elx" ).position({ - my: "right bottom", - at: "right bottom", - of: $( window ), - collision: "none", - within: $("#within-container") - }); - same( $( "#elx" ).addOffsets(), { - top: addTop + $( window ).height() - 10, - left: addLeft + $( window ).width() - 10 - }, "window as jQuery object" ); - - if ( scrollTopSupport() ) { - $( window ).scrollTop( 500 ).scrollLeft( 200 ); - $( "#elx" ).position({ - my: "right bottom", - at: "right bottom", - of: window, - collision: "none", - within: $("#within-container") - }); - same( $( "#elx" ).addOffsets(), { - top: addTop + $( window ).height() + 500 - 10, - left: addLeft + $( window ).width() + 200 - 10 - }, "window, scrolled" ); - $( window ).scrollTop( 0 ).scrollLeft( 0 ); - }*/ - var event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } ); $( "#elx" ).position({ my: "left top", at: "left top", of: event, collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).offset(), { top: 300, @@ -244,7 +168,7 @@ test( "within: of", function() { at: "right bottom", of: event, collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).offset(), { top: 600, @@ -253,16 +177,14 @@ test( "within: of", function() { }); test( "within:offsets", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - + var within = $("#within-container"); $( "#elx" ).position({ my: "left top", at: "left+10 bottom+10", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 70, left: addLeft + 50 }, "offsets in at" ); @@ -271,7 +193,7 @@ test( "within:offsets", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 50, left: addLeft + 50 }, "offsets in my" ); @@ -280,7 +202,7 @@ test( "within:offsets", function() { at: "left+50% bottom-10%", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 58, left: addLeft + 50 }, "percentage offsets in at" ); @@ -289,17 +211,15 @@ test( "within:offsets", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" ); }); -test( "within: using", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - +test( "using", function() { expect( 6 ); + + var within = $("#within-container"); var count = 0, elems = $( "#el1, #el2" ), @@ -309,7 +229,7 @@ test( "within: using", function() { at: "rigt bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }).addOffsets(); elems.position({ @@ -317,13 +237,13 @@ test( "within: using", function() { at: "left top", of: "#parentx", using: function( position ) { - position.top -= $("#within-container").offset().top; - position.left -= $("#within-container").offset().left; + 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-container") + within: within }); elems.each(function() { @@ -332,12 +252,15 @@ test( "within: using", function() { }); function collisionTest( config, result, msg ) { + var within = $("#within-container"); + var elem = $( "#elx" ).position( $.extend({ my: "left top", at: "right bottom", - of: $("#within-container")[0], - within: $("#within-container") + of: within[0], + within: within }, config ) ); + same( elem.addOffsets(), result, msg ); } @@ -348,14 +271,12 @@ function collisionTest2( config, result, msg ) { }, config ), result, msg ); } -test( "within: collision: fit, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: fit, no offset", function() { + var within = $("#within-container"); collisionTest({ collision: "fit" - }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom" ); + }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom" ); collisionTest2({ collision: "fit" @@ -363,15 +284,13 @@ test( "within: collision: fit, no offset", function() { }); -test( "within: collision: fit, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: fit, with offset", function() { + var within = $("#within-container"); collisionTest({ collision: "fit", at: "right+2 bottom+3" - }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom"); + }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom"); collisionTest2({ collision: "fit", @@ -384,14 +303,10 @@ test( "within: collision: fit, with offset", function() { }, { top: addTop + 0, left: addLeft + 0 }, "left top, negative offset" ); }); -test( "within: collision: fit, within scrolled", function() { +test( "collision: fit, within scrolled", function() { if ( scrollTopSupport() ) { - $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); - - - - var win = $("#within-container").css("overflow", "auto"); - win.scrollTop( 300 ).scrollLeft( 150 ); + var within = $("#within-container").css({"width": "1000px", "height": "800px", "overflow": "auto"}); + within.scrollTop( 300 ).scrollLeft( 150 ); collisionTest({ collision: "fit", @@ -400,15 +315,13 @@ test( "within: collision: fit, within scrolled", function() { collisionTest2({ collision: "fit", at: "right+100 bottom+100" - }, { top: addTop + win.height() - 10, left: addLeft + win.width() - 10 }, "right bottom" ); - win.scrollTop( 0 ).scrollLeft( 0 ); + }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom" ); + within.scrollTop( 0 ).scrollLeft( 0 ); } }); -test( "within: collision: flip, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: flip, no offset", function() { + var within = $("#within-container"); collisionTest({ collision: "flip" @@ -416,13 +329,11 @@ test( "within: collision: flip, no offset", function() { collisionTest2({ collision: "flip" - }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "right bottom" ); + }, { top: addTop + within.height(), left: addLeft + within.width() }, "right bottom" ); }); -test( "within: collision: flip, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: flip, with offset", function() { + var within = $("#within-container"); collisionTest({ collision: "flip", @@ -432,37 +343,33 @@ test( "within: collision: flip, with offset", function() { collisionTest2({ collision: "flip", at: "left+2 top+3" - }, { top: addTop + $("#within-container").height() - 3, left: addLeft + $("#within-container").width() - 2 }, "bottom, positive offset" ); + }, { top: addTop + within.height() - 3, left: addLeft + within.width() - 2 }, "bottom, positive offset" ); collisionTest2({ collision: "flip", at: "left-2 top-3" - }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, negative offset" ); + }, { top: addTop + within.height() + 3, left: addLeft + within.width() + 2 }, "right bottom, negative offset" ); }); -test( "within: collision: none, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: none, no offset", function() { + var within = $("#within-container"); collisionTest({ collision: "none" - }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "left top" ); + }, { 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( "within: collision: none, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: none, with offset", function() { + var within = $("#within-container"); collisionTest({ collision: "none", at: "right+2 bottom+3" - }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, with offset added" ); + }, { top: addTop + within.height() + 3, left: addLeft + within.width() + 2 }, "right bottom, with offset added" ); collisionTest2({ collision: "none", @@ -475,16 +382,14 @@ test( "within: collision: none, with offset", function() { }, { top: addTop + -13, left: addLeft + -12 }, "left top, negative offset" ); }); -test( "within: collision: fit, with margin", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: fit, with margin", function() { + var within = $("#within-container"); $( "#elx" ).css( "margin", 10 ); collisionTest({ collision: "fit" - }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "right bottom" ); + }, { top: addTop + within.height() - 20, left: addLeft + within.width() - 20 }, "right bottom" ); collisionTest2({ collision: "fit" @@ -497,7 +402,7 @@ test( "within: collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "right bottom" ); + }, { top: addTop + within.height() - 20, left: addLeft + within.width() - 20 }, "right bottom" ); collisionTest2({ collision: "fit" @@ -510,24 +415,22 @@ test( "within: collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + $("#within-container").height() - 25, left: addLeft + $("#within-container").width() - 25 }, "right bottom" ); + }, { top: addTop + within.height() - 25, left: addLeft + within.width() - 25 }, "right bottom" ); collisionTest2({ collision: "fit" }, { top: addTop + 5, left: addLeft + 5 }, "left top" ); }); -test( "within: collision: flip, with margin", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: flip, with margin", function() { + var within = $("#within-container"); $( "#elx" ).css( "margin", 10 ); collisionTest({ collision: "flip", at: "left top" - }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "left top" ); + }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "left top" ); collisionTest2({ collision: "flip", @@ -535,22 +438,4 @@ test( "within: collision: flip, with margin", function() { }, { top: addTop + 0, left: addLeft + 0 }, "right bottom" ); }); -//test( "bug #5280: consistent results (avoid fractional values)", function() { -// var wrapper = $( "#bug-5280" ), -// elem = wrapper.children(), -// offset1 = elem.position({ -// my: "center", -// at: "center", -// of: wrapper, -// collision: "none" -// }).offset(), -// offset2 = elem.position({ -// my: "center", -// at: "center", -// of: wrapper, -// collision: "none" -// }).offset(); -// same( offset1, offset2 ); -//}); - }( jQuery ) ); diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 2b44c8f707d..cea45dc2dc4 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -191,20 +191,18 @@ $.ui.position = { withinOffset = isWindow ? win.scrollLeft() : within.offset().left, outerWidth = isWindow ? win.width() : within.outerWidth(), overLeft = withinOffset - data.collisionPosition.left, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset, - newLeft; + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset; // element is wider than window or too far left -> align with left edge if ( data.collisionWidth > outerWidth || overLeft > 0 ) { - newLeft = position.left + overLeft; + position.left += overLeft; // too far right -> align with right edge } else if ( overRight > 0 ) { - newLeft = position.left - overRight; + position.left -= overRight; // adjust based on position and margin } else { - newLeft = Math.max( position.left - data.collisionPosition.left, position.left ); + position.left = Math.max( position.left - data.collisionPosition.left, position.left ); } - position.left = newLeft; }, top: function( position, data ) { var within = data.within, @@ -213,20 +211,18 @@ $.ui.position = { withinOffset = isWindow ? win.scrollTop() : within.offset().top, outerHeight = isWindow ? win.height() : within.outerHeight(), overTop = withinOffset - data.collisionPosition.top, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset, - newTop; + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset; // element is taller than window or too far up -> align with top edge if ( data.collisionHeight > outerHeight || overTop > 0 ) { - newTop = position.top + overTop; + position.top += overTop; // too far down -> align with bottom edge } else if ( overBottom > 0 ) { - newTop = position.top - overBottom; + position.top -= overBottom; // adjust based on position and margin } else { - newTop = Math.max( position.top - data.collisionPosition.top, position.top ); + position.top = Math.max( position.top - data.collisionPosition.top, position.top ); } - position.top = newTop; } }, flip: { From c11ac9c3f30d923164dea9cbe6982d212388fddb Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 26 May 2011 00:53:16 +0000 Subject: [PATCH 18/20] Now takes scrollbar width into account in collision detection --- ui/jquery.ui.position.js | 34 ++++++++++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index cea45dc2dc4..678b5e3eafd 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -17,7 +17,32 @@ var rhorizontal = /left|center|right/, rposition = /^\w+/, rpercent = /%$/, center = "center", - _position = $.fn.position; + _position = $.fn.position, + getScrollbarWidth = function() { + var div = $( "
" ), + innerDiv = div.children()[0], + w1, w2; + $( "body" ).append( div ); + w1 = innerDiv.offsetWidth; + div.css( "overflow", "scroll" ); + + w2 = innerDiv.offsetWidth; + + if ( w1 === w2 ) { + w2 = div[0].clientWidth; + } + + div.remove(); + + return w1 - w2; + }, + getScrollInfo = function( within ) { + var that = within[0], + scrollHeight = within.height() < that.scrollHeight, + scrollWidth = within.width() < that.scrollWidth, + scrollbarWidth = getScrollbarWidth(); + return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 }; + }; $.fn.position = function( options ) { if ( !options || !options.of ) { @@ -114,16 +139,17 @@ $.fn.position = function( options ) { basePosition.left += atOffset[ 0 ]; basePosition.top += atOffset[ 1 ]; - return this.each(function() { + return this.each(function() { console.log(getScrollInfo( within )); var elem = $( this ), elemWidth = elem.outerWidth(), elemHeight = elem.outerHeight(), marginLeft = parseInt( $.curCSS( this, "marginLeft", true ) ) || 0, marginTop = parseInt( $.curCSS( this, "marginTop", true ) ) || 0, + scrollInfo = getScrollInfo( within ), collisionWidth = elemWidth + marginLeft + - ( parseInt( $.curCSS( this, "marginRight", true ) ) || 0 ), + ( parseInt( $.curCSS( this, "marginRight", true ) ) || 0 ) + scrollInfo.width, collisionHeight = elemHeight + marginTop + - ( parseInt( $.curCSS( this, "marginBottom", true ) ) || 0 ), + ( parseInt( $.curCSS( this, "marginBottom", true ) ) || 0 ) + scrollInfo.height, position = $.extend( {}, basePosition ), myOffset = [ parseInt( offsets.my[ 0 ], 10 ) * From cde7cc0e6f5981d74390fa75c2519b935a4d6e0c Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 26 May 2011 01:15:05 +0000 Subject: [PATCH 19/20] updated tests to account for scrollbar width/height --- tests/unit/position/position_core_within.js | 37 +++++++++++++++++---- ui/jquery.ui.position.js | 2 +- 2 files changed, 32 insertions(+), 7 deletions(-) diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index c572329e5f8..9c563b1a2b7 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -4,6 +4,31 @@ function scrollTopSupport() { $( window ).scrollTop( 1 ); return $( window ).scrollTop() === 1; } +function getScrollbarWidth() { + var div = $( "
" ), + innerDiv = div.children()[0], + w1, w2; + $( "body" ).append( div ); + w1 = innerDiv.offsetWidth; + div.css( "overflow", "scroll" ); + + w2 = innerDiv.offsetWidth; + + if ( w1 === w2 ) { + w2 = div[0].clientWidth; + } + + div.remove(); + + return w1 - w2; +} +function getScrollInfo ( within ) { + var that = within[0], + scrollHeight = within.height() < that.scrollHeight, + scrollWidth = within.width() < that.scrollWidth, + scrollbarWidth = getScrollbarWidth(); + return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 }; +}; module( "position - within", { setup: function(){ @@ -276,7 +301,7 @@ test( "collision: fit, no offset", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom" ); + }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -290,7 +315,7 @@ test( "collision: fit, with offset", function() { collisionTest({ collision: "fit", at: "right+2 bottom+3" - }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom"); + }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom"); collisionTest2({ collision: "fit", @@ -315,7 +340,7 @@ test( "collision: fit, within scrolled", function() { collisionTest2({ collision: "fit", at: "right+100 bottom+100" - }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom" ); + }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom" ); within.scrollTop( 0 ).scrollLeft( 0 ); } }); @@ -389,7 +414,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 20, left: addLeft + within.width() - 20 }, "right bottom" ); + }, { top: addTop + within.height() - 20 - getScrollInfo( within ).height, left: addLeft + within.width() - 20 - getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -402,7 +427,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 20, left: addLeft + within.width() - 20 }, "right bottom" ); + }, { top: addTop + within.height() - 20 - getScrollInfo( within ).height, left: addLeft + within.width() - 20 - getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -415,7 +440,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 25, left: addLeft + within.width() - 25 }, "right bottom" ); + }, { top: addTop + within.height() - 25 - getScrollInfo( within ).height, left: addLeft + within.width() - 25 - getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 678b5e3eafd..e254ff9ffda 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -139,7 +139,7 @@ $.fn.position = function( options ) { basePosition.left += atOffset[ 0 ]; basePosition.top += atOffset[ 1 ]; - return this.each(function() { console.log(getScrollInfo( within )); + return this.each(function() { var elem = $( this ), elemWidth = elem.outerWidth(), elemHeight = elem.outerHeight(), From 40c008872154965d7572cda7911d42857e9fc3a9 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 26 May 2011 14:22:12 +0000 Subject: [PATCH 20/20] Fix visual test in IE6 and move the new helper functions for getting scrollbar properties to $.position --- tests/unit/position/position_core_within.js | 37 ++++----------------- tests/visual/position/position_within.html | 9 ++++- ui/jquery.ui.position.js | 15 +++++---- 3 files changed, 23 insertions(+), 38 deletions(-) diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 9c563b1a2b7..567c1719253 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -4,31 +4,6 @@ function scrollTopSupport() { $( window ).scrollTop( 1 ); return $( window ).scrollTop() === 1; } -function getScrollbarWidth() { - var div = $( "
" ), - innerDiv = div.children()[0], - w1, w2; - $( "body" ).append( div ); - w1 = innerDiv.offsetWidth; - div.css( "overflow", "scroll" ); - - w2 = innerDiv.offsetWidth; - - if ( w1 === w2 ) { - w2 = div[0].clientWidth; - } - - div.remove(); - - return w1 - w2; -} -function getScrollInfo ( within ) { - var that = within[0], - scrollHeight = within.height() < that.scrollHeight, - scrollWidth = within.width() < that.scrollWidth, - scrollbarWidth = getScrollbarWidth(); - return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 }; -}; module( "position - within", { setup: function(){ @@ -301,7 +276,7 @@ test( "collision: fit, no offset", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -315,7 +290,7 @@ test( "collision: fit, with offset", function() { collisionTest({ collision: "fit", at: "right+2 bottom+3" - }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom"); + }, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom"); collisionTest2({ collision: "fit", @@ -340,7 +315,7 @@ test( "collision: fit, within scrolled", function() { collisionTest2({ collision: "fit", at: "right+100 bottom+100" - }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom" ); + }, { 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 ); } }); @@ -414,7 +389,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 20 - getScrollInfo( within ).height, left: addLeft + within.width() - 20 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -427,7 +402,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 20 - getScrollInfo( within ).height, left: addLeft + within.width() - 20 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -440,7 +415,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 25 - getScrollInfo( within ).height, left: addLeft + within.width() - 25 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 25 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 25 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index a20ae7b5626..ac1009d3ed2 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -22,6 +22,9 @@ /* force scroll bar*/ min-height:800px; min-width:800px; + + /* IE6 needs this */ + text-align:center; } .demo-description { text-align:center; @@ -29,8 +32,10 @@ } .demo-container { background:#aaa; - width:80%; + width:80%; height:80%; + + text-align:left; margin:0 auto; position:relative; padding:10px; @@ -40,6 +45,8 @@ overflow:hidden; position:relative; height:100%; + /* IE6 needs this */ + width:100%; } #parent { width: 60%; diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index e254ff9ffda..5ebff5d1640 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -17,8 +17,10 @@ var rhorizontal = /left|center|right/, rposition = /^\w+/, rpercent = /%$/, center = "center", - _position = $.fn.position, - getScrollbarWidth = function() { + _position = $.fn.position; + +$.position = { + scrollbarWidth : function() { var div = $( "
" ), innerDiv = div.children()[0], w1, w2; @@ -36,13 +38,14 @@ var rhorizontal = /left|center|right/, return w1 - w2; }, - getScrollInfo = function( within ) { + getScrollInfo : function( within ) { var that = within[0], scrollHeight = within.height() < that.scrollHeight, scrollWidth = within.width() < that.scrollWidth, - scrollbarWidth = getScrollbarWidth(); + scrollbarWidth = $.position.scrollbarWidth(); return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 }; - }; + } +}; $.fn.position = function( options ) { if ( !options || !options.of ) { @@ -145,7 +148,7 @@ $.fn.position = function( options ) { elemHeight = elem.outerHeight(), marginLeft = parseInt( $.curCSS( this, "marginLeft", true ) ) || 0, marginTop = parseInt( $.curCSS( this, "marginTop", true ) ) || 0, - scrollInfo = getScrollInfo( within ), + scrollInfo = $.position.getScrollInfo( within ), collisionWidth = elemWidth + marginLeft + ( parseInt( $.curCSS( this, "marginRight", true ) ) || 0 ) + scrollInfo.width, collisionHeight = elemHeight + marginTop +