Skip to content
Permalink
Browse files

Fix visual test in IE6 and move the new helper functions for getting …

…scrollbar properties to $.position
  • Loading branch information
David Murdoch
David Murdoch committed May 26, 2011
1 parent cde7cc0 commit 40c008872154965d7572cda7911d42857e9fc3a9
@@ -4,31 +4,6 @@ function scrollTopSupport() {
$( window ).scrollTop( 1 );
return $( window ).scrollTop() === 1;
}
function getScrollbarWidth() {
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;
}
function getScrollInfo ( 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 };
};

module( "position - within", {
setup: function(){
@@ -301,7 +276,7 @@ test( "collision: fit, no offset", function() {

collisionTest({
collision: "fit"
}, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom" );
}, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" );

collisionTest2({
collision: "fit"
@@ -315,7 +290,7 @@ test( "collision: fit, with offset", function() {
collisionTest({
collision: "fit",
at: "right+2 bottom+3"
}, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom");
}, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom");

collisionTest2({
collision: "fit",
@@ -340,7 +315,7 @@ test( "collision: fit, within scrolled", function() {
collisionTest2({
collision: "fit",
at: "right+100 bottom+100"
}, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom" );
}, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" );
within.scrollTop( 0 ).scrollLeft( 0 );
}
});
@@ -414,7 +389,7 @@ test( "collision: fit, with margin", function() {

collisionTest({
collision: "fit"
}, { top: addTop + within.height() - 20 - getScrollInfo( within ).height, left: addLeft + within.width() - 20 - getScrollInfo( within ).width }, "right bottom" );
}, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" );

collisionTest2({
collision: "fit"
@@ -427,7 +402,7 @@ test( "collision: fit, with margin", function() {

collisionTest({
collision: "fit"
}, { top: addTop + within.height() - 20 - getScrollInfo( within ).height, left: addLeft + within.width() - 20 - getScrollInfo( within ).width }, "right bottom" );
}, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" );

collisionTest2({
collision: "fit"
@@ -440,7 +415,7 @@ test( "collision: fit, with margin", function() {

collisionTest({
collision: "fit"
}, { top: addTop + within.height() - 25 - getScrollInfo( within ).height, left: addLeft + within.width() - 25 - getScrollInfo( within ).width }, "right bottom" );
}, { top: addTop + within.height() - 25 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 25 - $.position.getScrollInfo( within ).width }, "right bottom" );

collisionTest2({
collision: "fit"
@@ -22,15 +22,20 @@
/* force scroll bar*/
min-height:800px;
min-width:800px;

/* IE6 needs this */
text-align:center;
}
.demo-description {
text-align:center;
padding:1.5em;
}
.demo-container {
background:#aaa;
width:80%;
width:80%;
height:80%;

text-align:left;
margin:0 auto;
position:relative;
padding:10px;
@@ -40,6 +45,8 @@
overflow:hidden;
position:relative;
height:100%;
/* IE6 needs this */
width:100%;
}
#parent {
width: 60%;
@@ -17,8 +17,10 @@ var rhorizontal = /left|center|right/,
rposition = /^\w+/,
rpercent = /%$/,
center = "center",
_position = $.fn.position,
getScrollbarWidth = function() {
_position = $.fn.position;

$.position = {
scrollbarWidth : 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;
@@ -36,13 +38,14 @@ var rhorizontal = /left|center|right/,

return w1 - w2;
},
getScrollInfo = function( within ) {
getScrollInfo : function( within ) {
var that = within[0],
scrollHeight = within.height() < that.scrollHeight,
scrollWidth = within.width() < that.scrollWidth,
scrollbarWidth = getScrollbarWidth();
scrollbarWidth = $.position.scrollbarWidth();
return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 };
};
}
};

$.fn.position = function( options ) {
if ( !options || !options.of ) {
@@ -145,7 +148,7 @@ $.fn.position = function( options ) {
elemHeight = elem.outerHeight(),
marginLeft = parseInt( $.curCSS( this, "marginLeft", true ) ) || 0,
marginTop = parseInt( $.curCSS( this, "marginTop", true ) ) || 0,
scrollInfo = getScrollInfo( within ),
scrollInfo = $.position.getScrollInfo( within ),
collisionWidth = elemWidth + marginLeft +
( parseInt( $.curCSS( this, "marginRight", true ) ) || 0 ) + scrollInfo.width,
collisionHeight = elemHeight + marginTop +

0 comments on commit 40c0088

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