library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-10-05 01:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Position: Handled scrolled windows properly with collision: fit. Fixes #7211 - Position: Collision: fit doesn't work at top of window when scrolled.

Browse Source
This commit is contained in:
Jean-Francois Remy 2011-05-03 04:38:17 -04:00 committed by Scott González
parent 51df02ee4e
commit 5e44b3ce88
2 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
tests/unit/position/position_core.js
View File

@ -1,5 +1,10 @@
(function( $ ) { (function( $ ) {
function scrollTopSupport() {
$( window ).scrollTop( 1 );
return $( window ).scrollTop() === 1;
}
module( "position" ); module( "position" );
test( "my, at, of", function() { test( "my, at, of", function() {
@ -161,11 +166,7 @@ test( "of", function() {
left: $( window ).width() - 10 left: $( window ).width() - 10
}, "window as jQuery object" ); }, "window as jQuery object" );
var scrollTopSupport = (function() { if ( scrollTopSupport() ) {
$( window ).scrollTop( 1 );
return $( window ).scrollTop() === 1;
}() );
if ( scrollTopSupport ) {
$( window ).scrollTop( 500 ).scrollLeft( 200 ); $( window ).scrollTop( 500 ).scrollLeft( 200 );
$( "#elx" ).position({ $( "#elx" ).position({
my: "right bottom", my: "right bottom",
@ -311,6 +312,22 @@ test( "collision: fit, with offset", function() {
}, { top: 0, left: 0 }, "left top, negative offset" ); }, { 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() { test( "collision: flip, no offset", function() {
collisionTest({ collisionTest({
collision: "flip" collision: "flip"

35
ui/jquery.ui.position.js vendored
View File

@ -184,20 +184,37 @@ $.ui.position = {
fit: { fit: {
left: function( position, data ) { left: function( position, data ) {
var win = $( window ), var win = $( window ),
over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(); overLeft = win.scrollLeft() - data.collisionPosition.left,
position.left = over > 0 ? overRight = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft();
position.left - over :
Math.max( position.left - data.collisionPosition.left, position.left ); // 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 ) { top: function( position, data ) {
var win = $( window ), var win = $( window ),
over = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(); overTop = win.scrollTop() - data.collisionPosition.top,
position.top = over > 0 ? overBottom = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop();
position.top - over :
Math.max( position.top - data.collisionPosition.top, position.top ); // 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: { flip: {
left: function( position, data ) { left: function( position, data ) {
if ( data.at[ 0 ] === center ) { if ( data.at[ 0 ] === center ) {