Skip to content
Permalink
Browse files

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

…s #7211 - Position: Collision: fit doesn't work at top of window when scrolled.
  • Loading branch information...
Jean-Francois Remy authored and scottgonzalez committed May 3, 2011
1 parent 51df02e commit 5e44b3ce8851f62a38ce9211c6721e1050e2dabf
Showing with 48 additions and 14 deletions.
  1. +22 −5 tests/unit/position/position_core.js
  2. +26 −9 ui/jquery.ui.position.js
@@ -1,5 +1,10 @@
(function( $ ) {

function scrollTopSupport() {
$( window ).scrollTop( 1 );
return $( window ).scrollTop() === 1;
}

module( "position" );

test( "my, at, of", function() {
@@ -161,11 +166,7 @@ test( "of", function() {
left: $( window ).width() - 10
}, "window as jQuery object" );

var scrollTopSupport = (function() {
$( window ).scrollTop( 1 );
return $( window ).scrollTop() === 1;
}() );
if ( scrollTopSupport ) {
if ( scrollTopSupport() ) {
$( window ).scrollTop( 500 ).scrollLeft( 200 );
$( "#elx" ).position({
my: "right bottom",
@@ -311,6 +312,22 @@ test( "collision: fit, with offset", function() {
}, { top: 0, left: 0 }, "left top, negative offset" );
});

test( "collision: fit, window scrolled", function() {
if ( scrollTopSupport() ) {
var win = $( window );
win.scrollTop( 300 ).scrollLeft( 200 );
collisionTest({
collision: "fit",
at: "left-100 top-100"
}, { top: 300, left: 200 }, "top left" );
collisionTest2({
collision: "fit",
at: "right+100 bottom+100"
}, { top: 300 + win.height() - 10, left: 200 + win.width() - 10 }, "right bottom" );
win.scrollTop( 0 ).scrollLeft( 0 );
}
});

test( "collision: flip, no offset", function() {
collisionTest({
collision: "flip"
@@ -184,20 +184,37 @@ $.ui.position = {
fit: {
left: function( position, data ) {
var win = $( window ),
over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft();
position.left = over > 0 ?
position.left - over :
Math.max( position.left - data.collisionPosition.left, position.left );
overLeft = win.scrollLeft() - data.collisionPosition.left,
overRight = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft();

// element is wider than window or too far left -> align with left edge
if ( data.collisionWidth > win.width() || overLeft > 0 ) {
position.left = position.left + overLeft;
// too far right -> align with right edge
} else if ( overRight > 0 ) {
position.left = position.left - overRight;
// adjust based on position and margin
} else {
position.left = Math.max( position.left - data.collisionPosition.left, position.left );
}
},
top: function( position, data ) {
var win = $( window ),
over = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop();
position.top = over > 0 ?
position.top - over :
Math.max( position.top - data.collisionPosition.top, position.top );
overTop = win.scrollTop() - data.collisionPosition.top,
overBottom = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop();

// element is taller than window or too far up -> align with top edge
if ( data.collisionHeight > win.height() || overTop > 0 ) {
position.top = position.top + overTop;
// too far down -> align with bottom edge
} else if ( overBottom > 0 ) {
position.top = position.top - overBottom;
// adjust based on position and margin
} else {
position.top = Math.max( position.top - data.collisionPosition.top, position.top );
}
}
},

flip: {
left: function( position, data ) {
if ( data.at[ 0 ] === center ) {

0 comments on commit 5e44b3c

Please sign in to comment.
You can’t perform that action at this time.