deac/jquery
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fixed an issue with setting offset of absolutely positioned element that has no position values ("auto"). Fixes #5781.

Browse source
This commit is contained in:
Brandon Aaron 2010-03-22 20:11:37 -04:00
parent 08cf82e88e
commit 656fe92178
3 changed files with 29 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/offset.js
View file

@ -150,15 +150,27 @@ jQuery.offset = {
}, },
setOffset: function( elem, options, i ) { setOffset: function( elem, options, i ) {
var position = jQuery.curCSS( elem, "position" );
// set position first, in-case top/left are set even on static elem // set position first, in-case top/left are set even on static elem
if ( /static/.test( jQuery.curCSS( elem, "position" ) ) ) { if ( position === "static" ) {
elem.style.position = "relative"; elem.style.position = "relative";
} }
var curElem = jQuery( elem ),
curOffset = curElem.offset(), var curElem = jQuery( elem ),
curTop = parseInt( jQuery.curCSS( elem, "top", true ), 10 ) || 0, curOffset = curElem.offset(),
curLeft = parseInt( jQuery.curCSS( elem, "left", true ), 10 ) || 0, curCSSTop = jQuery.curCSS( elem, "top", true ),
props = {}; curCSSLeft = jQuery.curCSS( elem, "left", true ),
calculatePosition = (position === "absolute" && jQuery.inArray('auto', [curCSSTop, curCSSLeft]) > -1),
props = {}, curPosition = {}, curTop, curLeft;
// need to be able to calculate position if either top or left is auto and position is absolute
if ( calculatePosition ) {
curPosition = curElem.position();
}
curTop = calculatePosition ? curPosition.top : parseInt( curCSSTop, 10 ) || 0;
curLeft = calculatePosition ? curPosition.left : parseInt( curCSSLeft, 10 ) || 0;
if ( jQuery.isFunction( options ) ) { if ( jQuery.isFunction( options ) ) {
options = options.call( elem, i, curOffset ); options = options.call( elem, i, curOffset );

2
test/data/offset/absolute.html
View file

@ -13,6 +13,7 @@
#absolute-2 { top: 19px; left: 19px; } #absolute-2 { top: 19px; left: 19px; }
#marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; } #marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; }
p.instructions { position: absolute; bottom: 0; } p.instructions { position: absolute; bottom: 0; }
#positionTest { position: absolute; }
</style> </style>
<script type="text/javascript" src="../../../dist/jquery.js"></script> <script type="text/javascript" src="../../../dist/jquery.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
@ -33,6 +34,7 @@
</div> </div>
</div> </div>
<div id="absolute-2" class="absolute">absolute-2</div> <div id="absolute-2" class="absolute">absolute-2</div>
<div id="positionTest">Has absolute position but no values set for the location ('auto').</div>
<div id="marker"></div> <div id="marker"></div>
<p class="instructions">Click the white box to move the marker to it. Clicking the box also changes the position to absolute (if not already) and sets the position according to the position method.</p> <p class="instructions">Click the white box to move the marker to it. Clicking the box also changes the position to absolute (if not already) and sets the position according to the position method.</p>
</body> </body>

12
test/unit/offset.js
View file

@ -35,7 +35,7 @@ testoffset("absolute"/* in iframe */, function($, iframe) {
}); });
testoffset("absolute", function( jQuery ) { testoffset("absolute", function( jQuery ) {
expect(176); expect(178);
// get offset tests // get offset tests
var tests = [ var tests = [
@ -62,6 +62,11 @@ testoffset("absolute", function( jQuery ) {
equals( jQuery( this.id ).position().left, this.left, "jQuery('" + this.id + "').position().left" ); equals( jQuery( this.id ).position().left, this.left, "jQuery('" + this.id + "').position().left" );
}); });
// test #5781
var offset = jQuery( '#positionTest' ).offset({ top: 10, left: 10 }).offset();
equals( offset.top, 10, "Setting offset on element with position absolute but 'auto' values." )
equals( offset.left, 10, "Setting offset on element with position absolute but 'auto' values." )
// set offset // set offset
tests = [ tests = [
@ -97,8 +102,9 @@ testoffset("absolute", function( jQuery ) {
equals( jQuery( this.id ).offset().top, this.top + 1, "jQuery('" + this.id + "').offset({ top: " + (this.top + 1) + " })" ); equals( jQuery( this.id ).offset().top, this.top + 1, "jQuery('" + this.id + "').offset({ top: " + (this.top + 1) + " })" );
equals( jQuery( this.id ).offset().left, this.left + 1, "jQuery('" + this.id + "').offset({ left: " + (this.left + 1) + " })" ); equals( jQuery( this.id ).offset().left, this.left + 1, "jQuery('" + this.id + "').offset({ left: " + (this.left + 1) + " })" );
jQuery( this.id ).offset({ top: this.top + 2 }); jQuery( this.id )
jQuery( this.id ).offset({ left: this.left + 2 }); .offset({ left: this.left + 2 })
.offset({ top: this.top + 2 });
equals( jQuery( this.id ).offset().top, this.top + 2, "Setting one property at a time." ); equals( jQuery( this.id ).offset().top, this.top + 2, "Setting one property at a time." );
equals( jQuery( this.id ).offset().left, this.left + 2, "Setting one property at a time." ); equals( jQuery( this.id ).offset().left, this.left + 2, "Setting one property at a time." );