Skip to content
Permalink
Browse files

Core: Added .outerWidth(), .outerHeight(), .innerWidth(), .innerHeigh…

…t(). Fixes #5850 - .outerWidth(), .outerHeight(), .innerWidth(), .innerHeight() setters.
  • Loading branch information
scottgonzalez committed Jul 22, 2010
1 parent 3f070bd commit 4deb824699b025d74d6849a73ec47c182df93fa0
Showing with 155 additions and 6 deletions.
  1. +2 −0 tests/unit/core/core.html
  2. +108 −0 tests/unit/core/core.js
  3. +2 −6 ui/jquery.ui.autocomplete.js
  4. +43 −0 ui/jquery.ui.core.js
@@ -127,6 +127,8 @@ <h2 id="qunit-userAgent"></h2>
<div id="zIndexAutoWithParentViaCSSPositioned">.</div>
</div>
<div id="zIndexAutoNoParent"></div>

<div id="dimensions" style="float: left; height: 50px; width: 100px; margin: 1px 12px 11px 2px; border-style: solid; border-width: 3px 14px 13px 4px; padding: 5px 16px 15px 6px;"></div>
</div>

</body>
@@ -46,4 +46,112 @@ test('zIndex', function() {
equals($('#zIndexAutoNoParent').zIndex(), 0, 'zIndex never explicitly set in hierarchy');
});

test( "innerWidth - getter", function() {
var el = $( "#dimensions" );

equals( el.innerWidth(), 122, "getter passthru" );
el.hide();
equals( el.innerWidth(), 122, "getter passthru when hidden" );
});

test( "innerWidth - setter", function() {
var el = $( "#dimensions" );

el.innerWidth( 120 );
equals( el.width(), 98, "width set properly" );
el.hide();
el.innerWidth( 100 );
equals( el.width(), 78, "width set properly when hidden" );
});

test( "innerHeight - getter", function() {
var el = $( "#dimensions" );

equals( el.innerHeight(), 70, "getter passthru" );
el.hide();
equals( el.innerHeight(), 70, "getter passthru when hidden" );
});

test( "innerHeight - setter", function() {
var el = $( "#dimensions" );

el.innerHeight( 60 );
equals( el.height(), 40, "height set properly" );
el.hide();
el.innerHeight( 50 );
equals( el.height(), 30, "height set properly when hidden" );
});

test( "outerWidth - getter", function() {
var el = $( "#dimensions" );

equals( el.outerWidth(), 140, "getter passthru" );
el.hide();
equals( el.outerWidth(), 140, "getter passthru when hidden" );
});

test( "outerWidth - setter", function() {
var el = $( "#dimensions" );

el.outerWidth( 130 );
equals( el.width(), 90, "width set properly" );
el.hide();
el.outerWidth( 120 );
equals( el.width(), 80, "width set properly when hidden" );
});

test( "outerWidth(true) - getter", function() {
var el = $( "#dimensions" );

equals( el.outerWidth(true), 154, "getter passthru w/ margin" );
el.hide();
equals( el.outerWidth(true), 154, "getter passthru w/ margin when hidden" );
});

test( "outerWidth(true) - setter", function() {
var el = $( "#dimensions" );

el.outerWidth( 130, true );
equals( el.width(), 76, "width set properly" );
el.hide();
el.outerWidth( 120, true );
equals( el.width(), 66, "width set properly when hidden" );
});

test( "outerHeight - getter", function() {
var el = $( "#dimensions" );

equals( el.outerHeight(), 86, "getter passthru" );
el.hide();
equals( el.outerHeight(), 86, "getter passthru when hidden" );
});

test( "outerHeight - setter", function() {
var el = $( "#dimensions" );

el.outerHeight( 80 );
equals( el.height(), 44, "height set properly" );
el.hide();
el.outerHeight( 70 );
equals( el.height(), 34, "height set properly when hidden" );
});

test( "outerHeight(true) - getter", function() {
var el = $( "#dimensions" );

equals( el.outerHeight(true), 98, "getter passthru w/ margin" );
el.hide();
equals( el.outerHeight(true), 98, "getter passthru w/ margin when hidden" );
});

test( "outerHeight(true) - setter", function() {
var el = $( "#dimensions" );

el.outerHeight( 90, true );
equals( el.height(), 42, "height set properly" );
el.hide();
el.outerHeight( 80, true );
equals( el.height(), 32, "height set properly when hidden" );
});

})(jQuery);
@@ -279,13 +279,9 @@ $.widget( "ui.autocomplete", {

menuWidth = ul.width( "" ).outerWidth();
textWidth = this.element.outerWidth();
ul.width( Math.max( menuWidth, textWidth )
- ( parseFloat( ul.css("paddingLeft") ) || 0 )
- ( parseFloat( ul.css("paddingRight") ) || 0 )
- ( parseFloat( ul.css("borderLeftWidth") ) || 0 )
- ( parseFloat( ul.css("borderRightWidth") ) || 0 ) );
ul.outerWidth( Math.max( menuWidth, textWidth ) );
},

_renderMenu: function( ul, items ) {
var self = this;
$.each( items, function( index, item ) {
@@ -186,6 +186,49 @@ $.fn.extend({
}
});

$.each( [ "Width", "Height" ], function( i, name ) {
var side = name === "Width" ? [ "Left", "Right" ] : [ "Top", "Bottom" ],
type = name.toLowerCase(),
orig = {
innerWidth: $.fn.innerWidth,
innerHeight: $.fn.innerHeight,
outerWidth: $.fn.outerWidth,
outerHeight: $.fn.outerHeight
};

function reduce( elem, size, border, margin ) {
$.each( side, function() {
size -= parseFloat( $.curCSS( elem, "padding" + this, true)) || 0;
if ( border ) {
size -= parseFloat( $.curCSS( elem, "border" + this + "Width", true)) || 0;
}
if ( margin ) {
size -= parseFloat( $.curCSS( elem, "margin" + this, true)) || 0;
}
});
return size;
}

$.fn[ "inner" + name ] = function( size ) {
if ( size === undefined ) {
return orig[ "inner" + name ].call( this );
}

return this.each(function() {
$.style( this, type, reduce( this, size ) + "px" );
});
};

$.fn[ "outer" + name] = function( size, margin ) {
if ( typeof size !== "number" ) {
return orig[ "outer" + name ].call( this, size );
}

return this.each(function() {
$.style( this, type, reduce( this, size, true, margin ) + "px" );
});
};
});

//Additional selectors
$.extend($.expr[':'], {

1 comment on commit 4deb824

@pete-otaqui

This comment has been minimized.

Copy link

pete-otaqui commented on 4deb824 Sep 10, 2010

That's great Scott, thanks

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