Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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

…t(). Fixes #5850 - .outerWidth(), .outerHeight(), .innerWidth(), .innerHeight() setters.
  • Loading branch information...
commit 4deb824699b025d74d6849a73ec47c182df93fa0 1 parent 3f070bd
@scottgonzalez scottgonzalez authored
View
2  tests/unit/core/core.html
@@ -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>
View
108 tests/unit/core/core.js
@@ -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);
View
8 ui/jquery.ui.autocomplete.js
@@ -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 ) {
View
43 ui/jquery.ui.core.js
@@ -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

That's great Scott, thanks

Please sign in to comment.
Something went wrong with that request. Please try again.