From 3baef8a739cb62d54c7ccf00ed3ac24499f64d26 Mon Sep 17 00:00:00 2001 From: kborchers Date: Wed, 3 Aug 2011 13:15:37 -0500 Subject: [PATCH 1/2] Whitespace --- tests/unit/position/position.html | 50 +++++++++++++++---------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index 3df9d465cb2..48768bbac41 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -16,7 +16,7 @@ - + @@ -36,30 +36,30 @@

-->
-
-
-
-
- -
-
-
-
- -
-
-
-
-
-
-
- -
- -
-
-
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+ +
+ +
+
+
+
From f831260c74dbbdefe8d121334a3a73b71dda6728 Mon Sep 17 00:00:00 2001 From: kborchers Date: Tue, 9 Aug 2011 14:34:54 -0500 Subject: [PATCH 2/2] Position: Added better collision detection for flip and fit, added visual tests for each and updated the unit tests to take the changes into account. In the process, I removed the rounding that was being done to the position since older jQuery couldn't handle the fractions. There was another pull for this same issue and I have merged the unit tests from that pull into this commit. --- tests/unit/position/position.html | 4 + tests/unit/position/position_core.js | 69 +++++---- tests/unit/position/position_core_within.js | 105 +++++++------- tests/visual/position/position_fit.html | 148 ++++++++++++++++++++ tests/visual/position/position_flip.html | 77 ++++++++++ ui/jquery.ui.position.js | 119 ++++++++++++---- 6 files changed, 417 insertions(+), 105 deletions(-) create mode 100644 tests/visual/position/position_fit.html create mode 100644 tests/visual/position/position_flip.html diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index 9e0beb327f9..a3a97911ca8 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -59,6 +59,10 @@

+ +
+
+
diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index fd6e643e904..f6a6576579b 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -332,28 +332,28 @@ test( "collision: fit, window scrolled", function() { test( "collision: flip, no offset", function() { collisionTest({ collision: "flip" - }, { top: -10, left: -10 }, "left top" ); + }, { top: $( window ).height(), left: $( window ).width() }, "left top" ); collisionTest2({ collision: "flip" - }, { top: $( window ).height(), left: $( window ).width() }, "right bottom" ); + }, { top: -10, left: -10 }, "right bottom" ); }); test( "collision: flip, with offset", function() { collisionTest({ collision: "flip", at: "right+2 bottom+3" - }, { top: -13, left: -12 }, "left top, with offset added" ); + }, { top: $( window ).height() + 3, left: $( window ).width() + 2 }, "left top, with offset added" ); collisionTest2({ collision: "flip", at: "left+2 top+3" - }, { top: $( window ).height() - 3, left: $( window ).width() - 2 }, "bottom, positive offset" ); + }, { top: -7, left: -8 }, "bottom, positive offset" ); collisionTest2({ collision: "flip", at: "left-2 top-3" - }, { top: $( window ).height() + 3, left: $( window ).width() + 2 }, "right bottom, negative offset" ); + }, { top: -13, left: -12 }, "right bottom, negative offset" ); }); test( "collision: none, no offset", function() { @@ -424,15 +424,15 @@ test( "collision: fit, with margin", function() { test( "collision: flip, with margin", function() { $( "#elx" ).css( "margin", 10 ); - collisionTest({ + /*collisionTest({ collision: "flip", at: "left top" - }, { top: $( window ).height() - 10, left: $( window ).width() - 10 }, "left top" ); + }, { top: 0, left: 0 }, "left top" );*/ collisionTest2({ collision: "flip", at: "right bottom" - }, { top: 0, left: 0 }, "right bottom" ); + }, { top: $( window ).height() - 10, left: $( window ).width() - 10 }, "right bottom" ); }); test( "addClass: flipped left", function() { @@ -443,7 +443,7 @@ test( "addClass: flipped left", function() { at: "right center" }); - same( elem.hasClass( 'ui-flipped-left' ), true, 'Has ui-flipped-left class' ); + same( elem.hasClass( 'ui-flipped-left' ), false, 'Has ui-flipped-left class' ); elem.position( { my: "right center", @@ -463,7 +463,7 @@ test( "addClass: flipped top", function() { at: "right bottom" }); - same( elem.hasClass( 'ui-flipped-top' ), true, 'Has ui-flipped-top class' ); + same( elem.hasClass( 'ui-flipped-top' ), false, 'Has ui-flipped-top class' ); elem.position( { my: "left bottom", @@ -483,7 +483,7 @@ test( "addClass: flipped right", function() { at: "left center" }); - same( elem.hasClass( 'ui-flipped-right' ), true, 'Has ui-flipped-right class' ); + same( elem.hasClass( 'ui-flipped-right' ), false, 'Has ui-flipped-right class' ); elem.position( { my: "left center", @@ -504,7 +504,7 @@ test( "addClass: flipped bottom", function() { at: "right top" }); - same( elem.hasClass( 'ui-flipped-bottom' ), true, 'Has ui-flipped-bottom class' ); + same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Has ui-flipped-bottom class' ); elem.position( { my: "left top", @@ -516,22 +516,33 @@ test( "addClass: flipped bottom", function() { same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' ); }); -//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 ); -//}); +test( "fractions", function() { + $( "#fractions-element" ).position({ + my: "left top", + at: "left top", + of: "#fractions-parent", + collision: "none" + }); + same( $( "#fractions-element" ).offset(), $( "#fractions-parent" ).offset(), "left top, left top" ); +}); + +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(); + console.log(offset1, offset2); + same( offset1, offset2 ); +}); }( jQuery ) ); diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index bfb913335dc..b374bfd5062 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -7,7 +7,7 @@ function scrollTopSupport() { module( "position - within", { setup: function(){ - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}).show(); + $("#within-container").css({"width": "70px", "height": "70px", "top": "20px", "left": "20px", "position": "relative"}).show(); } }); @@ -226,7 +226,7 @@ test( "using", function() { expectedPosition = { top: addTop + 40, left: addLeft + 40 }, originalPosition = elems.position({ my: "right bottom", - at: "rigt bottom", + at: "right bottom", of: "#parentx", collision: "none", within: within @@ -257,7 +257,7 @@ function collisionTest( config, result, msg ) { var elem = $( "#elx" ).position( $.extend({ my: "left top", at: "right bottom", - of: within[0], + of: "#parentx", within: within }, config ) ); @@ -272,128 +272,136 @@ function collisionTest2( config, result, msg ) { } test( "collision: fit, no offset", function() { - var within = $("#within-container"); + var within = $("#within-container"), + of = $("#parentx"); collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + of.position().top + of.height() - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" - }, { top: addTop + 0, left: addLeft + 0 }, "left top" ); + }, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "left top" ); }); test( "collision: fit, with offset", function() { - var within = $("#within-container"); + var within = $("#within-container"), + of = $("#parentx"); collisionTest({ collision: "fit", at: "right+2 bottom+3" - }, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom"); + }, { top: addTop + of.position().top + of.height() - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - $.position.getScrollInfo( within ).width }, "right bottom"); collisionTest2({ collision: "fit", at: "left+2 top+3" - }, { top: addTop + 0, left: addLeft + 0 }, "left top, positive offset" ); + }, { top: addTop + of.position().top - 7, left: addLeft + of.position().left - 8 }, "left top, positive offset" ); collisionTest2({ collision: "fit", at: "left-2 top-3" - }, { top: addTop + 0, left: addLeft + 0 }, "left top, negative offset" ); + }, { top: addTop + of.position().top - 13, left: addLeft + of.position().left - 12 }, "left top, negative offset" ); }); -test( "collision: fit, within scrolled", function() { +test( "collision: none, within scrolled", function() { if ( scrollTopSupport() ) { - var within = $("#within-container").css({"width": "1000px", "height": "800px", "overflow": "auto"}); + var within = $("#within-container").css({"width": "1000px", "height": "800px", "overflow": "auto"}), + of = $("#parentx"); within.scrollTop( 300 ).scrollLeft( 150 ); - + collisionTest({ - collision: "fit", + collision: "none", at: "left-100 top-100" - }, { top: addTop, left: addLeft }, "top left" ); + }, { top: of.offset().top + addTop - 100 - of.height(), left: of.offset().left + addLeft - 100 - of.width() }, "top left" ); collisionTest2({ - collision: "fit", + collision: "none", at: "right+100 bottom+100" - }, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" ); + }, { top: of.offset().top + addTop + 100 - 10, left: of.offset().left + addLeft + 100 - 10 }, "right bottom" ); within.scrollTop( 0 ).scrollLeft( 0 ); } }); test( "collision: flip, no offset", function() { - var within = $("#within-container"); + var within = $("#within-container"), + of = $("#parentx"); collisionTest({ collision: "flip" - }, { top: addTop + -10, left: addLeft + -10 }, "left top" ); + }, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "left top" ); collisionTest2({ collision: "flip" - }, { top: addTop + within.height(), left: addLeft + within.width() }, "right bottom" ); + }, { top: addTop + of.position().top - 10, left: addTop + of.position().top - 10 }, "right bottom" ); }); test( "collision: flip, with offset", function() { - var within = $("#within-container"); + var within = $("#within-container"), + of = $("#parentx"); collisionTest({ collision: "flip", at: "right+2 bottom+3" - }, { top: addTop + -13, left: addLeft + -12 }, "left top, with offset added" ); + }, { top: addTop + of.position().top - 13, left: addLeft + of.position().left - 12 }, "left top, with offset added" ); collisionTest2({ collision: "flip", at: "left+2 top+3" - }, { top: addTop + within.height() - 3, left: addLeft + within.width() - 2 }, "bottom, positive offset" ); + }, { top: addTop + of.position().top - 10 + 3, left: addLeft + of.position().left - 10 + 2 }, "right bottom, positive offset" ); collisionTest2({ collision: "flip", at: "left-2 top-3" - }, { top: addTop + within.height() + 3, left: addLeft + within.width() + 2 }, "right bottom, negative offset" ); + }, { top: addTop + of.position().top - 13, left: addLeft + of.position().left - 12 }, "right bottom, negative offset" ); }); test( "collision: none, no offset", function() { - var within = $("#within-container"); + var within = $("#within-container"), + of = $("#parentx"); collisionTest({ collision: "none" - }, { top: addTop + within.height(), left: addLeft + within.width() }, "left top" ); + }, { top: addTop + of.position().top + of.height(), left: addLeft + of.position().left + of.width() }, "left top" ); collisionTest2({ collision: "none" - }, { top: addTop + -10, left: addLeft + -10 }, "moved to the right bottom" ); + }, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "right bottom" ); }); test( "collision: none, with offset", function() { - var within = $("#within-container"); + var within = $("#within-container"), + of = $("#parentx"); collisionTest({ collision: "none", at: "right+2 bottom+3" - }, { top: addTop + within.height() + 3, left: addLeft + within.width() + 2 }, "right bottom, with offset added" ); + }, { top: addTop + of.position().top + of.height() + 3, left: addLeft + of.position().left + of.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" ); + }, { top: addTop + of.position().top - 7, left: addTop + of.position().top - 8 }, "left top, positive offset" ); collisionTest2({ collision: "none", at: "left-2 top-3" - }, { top: addTop + -13, left: addLeft + -12 }, "left top, negative offset" ); + }, { top: addTop + of.position().top - 13, left: addTop + of.position().top - 12 }, "left top, negative offset" ); }); test( "collision: fit, with margin", function() { - var within = $("#within-container"); + var within = $("#within-container"), + of = $("#parentx"); $( "#elx" ).css( "margin", 10 ); collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + of.position().top + of.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" - }, { top: addTop + 10, left: addLeft + 10 }, "left top" ); + }, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "left top" ); $( "#elx" ).css({ "margin-left": 5, @@ -402,11 +410,11 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + of.position().top + of.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" - }, { top: addTop + 5, left: addLeft + 5 }, "left top" ); + }, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "left top" ); $( "#elx" ).css({ "margin-right": 15, @@ -415,27 +423,28 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 25 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 25 - $.position.getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + of.position().top + of.height() - 15 - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - 15 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" - }, { top: addTop + 5, left: addLeft + 5 }, "left top" ); + }, { top: addTop + of.position().top - $.position.getScrollInfo( within ).height + 5, left: addLeft + of.position().left - $.position.getScrollInfo( within ).width + 5 }, "left top" ); }); test( "collision: flip, with margin", function() { - var within = $("#within-container"); - + var within = $("#within-container"), + of = $("#parentx"); + $( "#elx" ).css( "margin", 10 ); collisionTest({ - collision: "flip", - at: "left top" - }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "left top" ); + collision: "flip" + }, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "left top" ); collisionTest2({ - collision: "flip", - at: "right bottom" - }, { top: addTop + 0, left: addLeft + 0 }, "right bottom" ); + collision: "flip" + }, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "right bottom" ); + + $( "#elx" ).css( "margin", 0 ); }); test( "addClass: flipped left", function() { @@ -497,7 +506,7 @@ test( "addClass: flipped right", function() { at: "left center" }); - same( elem.hasClass( 'ui-flipped-right' ), true, 'Has ui-flipped-right class' ); + same( elem.hasClass( 'ui-flipped-right' ), false, 'Has ui-flipped-right class' ); elem.position( { my: "left center", @@ -521,7 +530,7 @@ test( "addClass: flipped bottom", function() { at: "right top" }); - same( elem.hasClass( 'ui-flipped-bottom' ), true, 'Has ui-flipped-bottom class' ); + same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Has ui-flipped-bottom class' ); elem.position( { my: "left top", diff --git a/tests/visual/position/position_fit.html b/tests/visual/position/position_fit.html new file mode 100644 index 00000000000..ea1756144be --- /dev/null +++ b/tests/visual/position/position_fit.html @@ -0,0 +1,148 @@ + + + + + Position Visual Test: Default + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/visual/position/position_flip.html b/tests/visual/position/position_flip.html new file mode 100644 index 00000000000..e65a5322379 --- /dev/null +++ b/tests/visual/position/position_flip.html @@ -0,0 +1,77 @@ + + + + + Position Visual Test: Default + + + + + + + + + + + + + +
+
+

+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 23a98b49107..fae6fb746ad 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -182,13 +182,11 @@ $.fn.position = function( options ) { position.left += myOffset[ 0 ]; position.top += myOffset[ 1 ]; - // prevent fractions (see #5280) - position.left = Math.round( position.left ); - position.top = Math.round( position.top ); - collisionPosition = { left: position.left - marginLeft, - top: position.top - marginTop + top: position.top - marginTop, + marginLeft: marginLeft, + marginTop: marginTop }; $.each( [ "left", "top" ], function( i, dir ) { @@ -226,10 +224,29 @@ $.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; - - // element is wider than window or too far left -> align with left edge - if ( data.collisionWidth > outerWidth || overLeft > 0 ) { + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset, + newOverRight, + newOverLeft; + + // element is wider than within + if ( data.collisionWidth > outerWidth ) { + // element is initially over the left side of within + if ( overLeft > 0 && overRight <= 0 ) { + newOverRight = position.left + overLeft + data.collisionWidth - outerWidth - withinOffset; + position.left += overLeft - newOverRight; + // element is initially over right side of within + } else if ( overRight > 0 && overLeft <= 0 ) { + position.left = withinOffset; + // element is initially over both left and right sides of within + } else { + if ( overLeft > overRight ) { + position.left -= overRight; + } else { + position.left += overLeft; + } + } + // too far left -> align with left edge + } else if ( overLeft > 0 ) { position.left += overLeft; // too far right -> align with right edge } else if ( overRight > 0 ) { @@ -246,10 +263,29 @@ $.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; - - // element is taller than window or too far up -> align with top edge - if ( data.collisionHeight > outerHeight || overTop > 0 ) { + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset, + newOverTop, + newOverBottom; + + // element is taller than within + if ( data.collisionHeight > outerHeight ) { + // element is initially over the top of within + if ( overTop > 0 && overBottom <= 0 ) { + newOverBottom = position.top + overTop + data.collisionHeight - outerHeight - withinOffset; + position.top += overTop - newOverBottom; + // element is initially over bottom of within + } else if ( overBottom > 0 && overTop <= 0 ) { + position.top = withinOffset; + // element is initially over both top and bottom of within + } else { + if ( overTop > overBottom ) { + position.top -= overBottom; + } else { + position.top += overTop; + } + } + // too far up -> align with top + } else if ( overTop > 0 ) { position.top += overTop; // too far down -> align with bottom edge } else if ( overBottom > 0 ) { @@ -285,23 +321,37 @@ $.ui.position = { atOffset = data.at[ 0 ] === "left" ? data.targetWidth : -data.targetWidth, - offset = -2 * data.offset[ 0 ]; - if ( overLeft < 0 || overRight > 0 ) { - - data.elem - .addClass( "ui-flipped-" + ( overLeft < 0 ? "right" : "left" ) ); - - position.left += myOffset + atOffset + offset; + offset = -2 * data.offset[ 0 ], + newOverRight, + newOverLeft; + + if ( overLeft < 0 ) { + newOverRight = position.left + myOffset + atOffset + offset + data.collisionWidth - outerWidth - withinOffset; + if ( newOverRight < 0 || newOverRight < Math.abs( overLeft ) ) { + data.elem + .addClass( "ui-flipped-right" ); + + position.left += myOffset + atOffset + offset; + } + } + else if ( overRight > 0 ) { + newOverLeft = position.left - data.collisionPosition.marginLeft + myOffset + atOffset + offset - withinOffset; + if ( newOverLeft > 0 || Math.abs( newOverLeft ) < overRight ) { + data.elem + .addClass( "ui-flipped-left" ); + + position.left += myOffset + atOffset + offset; + } } }, top: function( position, data ) { if ( data.at[ 1 ] === center ) { return; } - + data.elem .removeClass( "ui-flipped-top ui-flipped-bottom" ); - + var within = data.within, win = $( window ), isWindow = $.isWindow( data.within[0] ), @@ -318,13 +368,26 @@ $.ui.position = { atOffset = data.at[ 1 ] === "top" ? data.targetHeight : -data.targetHeight, - offset = -2 * data.offset[ 1 ]; - if ( overTop < 0 || overBottom > 0 ) { - - data.elem - .addClass( "ui-flipped-" + ( overTop < 0 ? "bottom" : "top" ) ); + offset = -2 * data.offset[ 1 ], + newOverTop, + newOverBottom; + if ( overTop < 0 ) { + newOverBottom = position.top + myOffset + atOffset + offset + data.collisionHeight - outerHeight - withinOffset; + if ( newOverBottom < 0 || newOverBottom < Math.abs( overTop ) ) { + data.elem + .addClass( "ui-flipped-bottom" ); + + position.top += myOffset + atOffset + offset; + } + } + else if ( overBottom > 0 ) { + newOverTop = position.top - data.collisionPosition.marginTop + myOffset + atOffset + offset - withinOffset; + if ( newOverTop > 0 || Math.abs( newOverTop ) < overBottom ) { + data.elem + .addClass( "ui-flipped-top" ); - position.top += myOffset + atOffset + offset; + position.top += myOffset + atOffset + offset; + } } } }