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

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.