Now takes scrollbar width into account in collision detection

diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js
index cea45dc2dc4a20e9b0d46b9fe25384de8e80cdfb..678b5e3eafdf8157d334a6aa2d7aab0c6e438f0c 100644 (file)
--- 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 = $( "<div style='display:block;width:50px;height:50px;overflow:hidden;'><div style='height:100px;width:auto;'></div></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 ) *