Skip to main content

Bug Tracker

Side navigation

#7523 closed feature (wontfix)

Opened November 15, 2010 01:54PM UTC

Closed July 12, 2011 02:36PM UTC

Last modified March 13, 2012 04:44PM UTC

Setting outerWidth and outerHeight

Reported by: apritchard@gmail.com Owned by:
Priority: undecided Milestone: 1.next
Component: css Version: 1.4.4
Keywords: needsreview,1.7-discuss Cc:
Blocked by: Blocking:
Description

I've written a plugin to override the default outerWidth and outerHeight functions so they can be used to set the outerWidth and outerHeight of an element.

I constantly found myself calculating the width and height of an element in order to achieve a desired outer width & outer height. This plugin allows me to specify my desired outer width and it takes care of deducting the border and padding from the width value that actually gets set.

I feel this feature is useful enough to warrant inclusion in the core library, what do you reckon?

My plugin is as follows...

/**
* jQuery.setouter - Set the outer sizes of elements
* Written by Adam Pritchard
* Date: 2010/11/05 (remember, remember...)
* 
* This plugin overrides the default outerWidth and outerHeight functions
*
* @author Adam Pritchard
* @version 0.1
*
**/

(function ($) {

    if ($) {
        // get references to original functions
        var outerWidth = $.fn.outerWidth;
        var outerHeight = $.fn.outerHeight;

        var workerFunc = function (height, value) {
            var border = this.border();
            var padding = this.padding();
            var actualSize;
            if (height) {
                actualSize = value - border.top - padding.top - padding.bottom - border.bottom;
                return this.height(actualSize);
            } else {
                actualSize = value - border.left - padding.left - padding.right - border.right;
                return this.width(actualSize);
            }
        };

        $.fn.extend({
            outerWidth: function (value) {
                if (typeof (value) != "undefined" && value === value * 1.0) {
                    return workerFunc.apply(this, [false, value]);
                } else {
                    // pass onto original function
                    return outerWidth.apply(this, arguments);
                }
            },

            outerHeight: function (value) {
                if (typeof (value) != "undefined" && value === value * 1.0) {
                    return workerFunc.apply(this, [true, value]);
                } else {
                    // pass onto original function
                    return outerHeight.apply(this, arguments);
                }
            }
        });
    }

})(jQuery);
Attachments (0)
Change History (17)

Changed November 15, 2010 01:58PM UTC by apritchard@gmail.com comment:1

Oh, forgot to mention my plugin uses the jSizes plugin which I use heavily. That could be swapped out with native .css() calls.

Changed November 16, 2010 04:12AM UTC by dmethvin comment:2

keywords: → needsreview

Changed December 23, 2010 06:07PM UTC by dmethvin comment:3

I have needed similar functionality in several plugins. My concern with making this a core function is that we need to expect the worst-case situation and re-grab the borders and padding each time (as you've done here, indirectly through jSizes). If it's done at a higher level you can often know that the borders/padding don't change, or even document that the plugin requires they don't change.

Changed February 19, 2011 07:40PM UTC by jordan@boedesign.com comment:4

I had to do something similar to this awhile back as well...

http://boedesign.com/misc/outer_setters.html

Changed March 30, 2011 08:04PM UTC by rwaldron comment:5

component: unfiledcss

Changed March 30, 2011 08:25PM UTC by rwaldron comment:6

milestone: → 1.next

Changed May 22, 2011 07:27PM UTC by john comment:7

keywords: needsreviewneedsreview,1.7-discuss

Nominating ticket for 1.7 discussion.

Changed May 22, 2011 09:35PM UTC by rwaldron comment:8

description: I've written a plugin to override the default outerWidth and outerHeight functions so they can be used to set the outerWidth and outerHeight of an element. \ \ I constantly found myself calculating the width and height of an element in order to achieve a desired outer width & outer height. This plugin allows me to specify my desired outer width and it takes care of deducting the border and padding from the width value that actually gets set. \ \ I feel this feature is useful enough to warrant inclusion in the core library, what do you reckon? \ \ My plugin is as follows... \ \ \ {{{ \ /** \ * jQuery.setouter - Set the outer sizes of elements \ * Written by Adam Pritchard \ * Date: 2010/11/05 (remember, remember...) \ * \ * This plugin overrides the default outerWidth and outerHeight functions \ * \ * @author Adam Pritchard \ * @version 0.1 \ * \ **/ \ \ (function ($) { \ \ if ($) { \ // get references to original functions \ var outerWidth = $.fn.outerWidth; \ var outerHeight = $.fn.outerHeight; \ \ var workerFunc = function (height, value) { \ var border = this.border(); \ var padding = this.padding(); \ var actualSize; \ if (height) { \ actualSize = value - border.top - padding.top - padding.bottom - border.bottom; \ return this.height(actualSize); \ } else { \ actualSize = value - border.left - padding.left - padding.right - border.right; \ return this.width(actualSize); \ } \ }; \ \ $.fn.extend({ \ outerWidth: function (value) { \ if (typeof (value) != "undefined" && value === value * 1.0) { \ return workerFunc.apply(this, [false, value]); \ } else { \ // pass onto original function \ return outerWidth.apply(this, arguments); \ } \ }, \ \ outerHeight: function (value) { \ if (typeof (value) != "undefined" && value === value * 1.0) { \ return workerFunc.apply(this, [true, value]); \ } else { \ // pass onto original function \ return outerHeight.apply(this, arguments); \ } \ } \ }); \ } \ \ })(jQuery); \ }}} \ \ I've written a plugin to override the default outerWidth and outerHeight functions so they can be used to set the outerWidth and outerHeight of an element.\ \ I constantly found myself calculating the width and height of an element in order to achieve a desired outer width & outer height. This plugin allows me to specify my desired outer width and it takes care of deducting the border and padding from the width value that actually gets set.\ \ I feel this feature is useful enough to warrant inclusion in the core library, what do you reckon?\ \ My plugin is as follows...\ \ \ {{{\ /**\ * jQuery.setouter - Set the outer sizes of elements\ * Written by Adam Pritchard\ * Date: 2010/11/05 (remember, remember...)\ * \ * This plugin overrides the default outerWidth and outerHeight functions\ *\ * @author Adam Pritchard\ * @version 0.1\ *\ **/\ \ (function ($) {\ \ if ($) {\ // get references to original functions\ var outerWidth = $.fn.outerWidth;\ var outerHeight = $.fn.outerHeight;\ \ var workerFunc = function (height, value) {\ var border = this.border();\ var padding = this.padding();\ var actualSize;\ if (height) {\ actualSize = value - border.top - padding.top - padding.bottom - border.bottom;\ return this.height(actualSize);\ } else {\ actualSize = value - border.left - padding.left - padding.right - border.right;\ return this.width(actualSize);\ }\ };\ \ $.fn.extend({\ outerWidth: function (value) {\ if (typeof (value) != "undefined" && value === value * 1.0) {\ return workerFunc.apply(this, [false, value]);\ } else {\ // pass onto original function\ return outerWidth.apply(this, arguments);\ }\ },\ \ outerHeight: function (value) {\ if (typeof (value) != "undefined" && value === value * 1.0) {\ return workerFunc.apply(this, [true, value]);\ } else {\ // pass onto original function\ return outerHeight.apply(this, arguments);\ }\ }\ });\ }\ \ })(jQuery);\ }}}\ \

+0,

Changed May 23, 2011 12:22AM UTC by jaubourg comment:9

-1, plugin plugin plugin

Changed May 23, 2011 04:02AM UTC by timmywil comment:10

-1, There are so many ways this can break.

Changed May 26, 2011 04:06AM UTC by dmethvin comment:11

description: I've written a plugin to override the default outerWidth and outerHeight functions so they can be used to set the outerWidth and outerHeight of an element.\ \ I constantly found myself calculating the width and height of an element in order to achieve a desired outer width & outer height. This plugin allows me to specify my desired outer width and it takes care of deducting the border and padding from the width value that actually gets set.\ \ I feel this feature is useful enough to warrant inclusion in the core library, what do you reckon?\ \ My plugin is as follows...\ \ \ {{{\ /**\ * jQuery.setouter - Set the outer sizes of elements\ * Written by Adam Pritchard\ * Date: 2010/11/05 (remember, remember...)\ * \ * This plugin overrides the default outerWidth and outerHeight functions\ *\ * @author Adam Pritchard\ * @version 0.1\ *\ **/\ \ (function ($) {\ \ if ($) {\ // get references to original functions\ var outerWidth = $.fn.outerWidth;\ var outerHeight = $.fn.outerHeight;\ \ var workerFunc = function (height, value) {\ var border = this.border();\ var padding = this.padding();\ var actualSize;\ if (height) {\ actualSize = value - border.top - padding.top - padding.bottom - border.bottom;\ return this.height(actualSize);\ } else {\ actualSize = value - border.left - padding.left - padding.right - border.right;\ return this.width(actualSize);\ }\ };\ \ $.fn.extend({\ outerWidth: function (value) {\ if (typeof (value) != "undefined" && value === value * 1.0) {\ return workerFunc.apply(this, [false, value]);\ } else {\ // pass onto original function\ return outerWidth.apply(this, arguments);\ }\ },\ \ outerHeight: function (value) {\ if (typeof (value) != "undefined" && value === value * 1.0) {\ return workerFunc.apply(this, [true, value]);\ } else {\ // pass onto original function\ return outerHeight.apply(this, arguments);\ }\ }\ });\ }\ \ })(jQuery);\ }}}\ \ I've written a plugin to override the default outerWidth and outerHeight functions so they can be used to set the outerWidth and outerHeight of an element. \ \ I constantly found myself calculating the width and height of an element in order to achieve a desired outer width & outer height. This plugin allows me to specify my desired outer width and it takes care of deducting the border and padding from the width value that actually gets set. \ \ I feel this feature is useful enough to warrant inclusion in the core library, what do you reckon? \ \ My plugin is as follows... \ \ \ {{{ \ /** \ * jQuery.setouter - Set the outer sizes of elements \ * Written by Adam Pritchard \ * Date: 2010/11/05 (remember, remember...) \ * \ * This plugin overrides the default outerWidth and outerHeight functions \ * \ * @author Adam Pritchard \ * @version 0.1 \ * \ **/ \ \ (function ($) { \ \ if ($) { \ // get references to original functions \ var outerWidth = $.fn.outerWidth; \ var outerHeight = $.fn.outerHeight; \ \ var workerFunc = function (height, value) { \ var border = this.border(); \ var padding = this.padding(); \ var actualSize; \ if (height) { \ actualSize = value - border.top - padding.top - padding.bottom - border.bottom; \ return this.height(actualSize); \ } else { \ actualSize = value - border.left - padding.left - padding.right - border.right; \ return this.width(actualSize); \ } \ }; \ \ $.fn.extend({ \ outerWidth: function (value) { \ if (typeof (value) != "undefined" && value === value * 1.0) { \ return workerFunc.apply(this, [false, value]); \ } else { \ // pass onto original function \ return outerWidth.apply(this, arguments); \ } \ }, \ \ outerHeight: function (value) { \ if (typeof (value) != "undefined" && value === value * 1.0) { \ return workerFunc.apply(this, [true, value]); \ } else { \ // pass onto original function \ return outerHeight.apply(this, arguments); \ } \ } \ }); \ } \ \ })(jQuery); \ }}} \ \

-1, Sorry but core has to make too many deoptimizing assumptions for this to work effectively. Plugin.

Changed June 03, 2011 01:44PM UTC by john comment:12

description: I've written a plugin to override the default outerWidth and outerHeight functions so they can be used to set the outerWidth and outerHeight of an element. \ \ I constantly found myself calculating the width and height of an element in order to achieve a desired outer width & outer height. This plugin allows me to specify my desired outer width and it takes care of deducting the border and padding from the width value that actually gets set. \ \ I feel this feature is useful enough to warrant inclusion in the core library, what do you reckon? \ \ My plugin is as follows... \ \ \ {{{ \ /** \ * jQuery.setouter - Set the outer sizes of elements \ * Written by Adam Pritchard \ * Date: 2010/11/05 (remember, remember...) \ * \ * This plugin overrides the default outerWidth and outerHeight functions \ * \ * @author Adam Pritchard \ * @version 0.1 \ * \ **/ \ \ (function ($) { \ \ if ($) { \ // get references to original functions \ var outerWidth = $.fn.outerWidth; \ var outerHeight = $.fn.outerHeight; \ \ var workerFunc = function (height, value) { \ var border = this.border(); \ var padding = this.padding(); \ var actualSize; \ if (height) { \ actualSize = value - border.top - padding.top - padding.bottom - border.bottom; \ return this.height(actualSize); \ } else { \ actualSize = value - border.left - padding.left - padding.right - border.right; \ return this.width(actualSize); \ } \ }; \ \ $.fn.extend({ \ outerWidth: function (value) { \ if (typeof (value) != "undefined" && value === value * 1.0) { \ return workerFunc.apply(this, [false, value]); \ } else { \ // pass onto original function \ return outerWidth.apply(this, arguments); \ } \ }, \ \ outerHeight: function (value) { \ if (typeof (value) != "undefined" && value === value * 1.0) { \ return workerFunc.apply(this, [true, value]); \ } else { \ // pass onto original function \ return outerHeight.apply(this, arguments); \ } \ } \ }); \ } \ \ })(jQuery); \ }}} \ \ I've written a plugin to override the default outerWidth and outerHeight functions so they can be used to set the outerWidth and outerHeight of an element.\ \ I constantly found myself calculating the width and height of an element in order to achieve a desired outer width & outer height. This plugin allows me to specify my desired outer width and it takes care of deducting the border and padding from the width value that actually gets set.\ \ I feel this feature is useful enough to warrant inclusion in the core library, what do you reckon?\ \ My plugin is as follows...\ \ \ {{{\ /**\ * jQuery.setouter - Set the outer sizes of elements\ * Written by Adam Pritchard\ * Date: 2010/11/05 (remember, remember...)\ * \ * This plugin overrides the default outerWidth and outerHeight functions\ *\ * @author Adam Pritchard\ * @version 0.1\ *\ **/\ \ (function ($) {\ \ if ($) {\ // get references to original functions\ var outerWidth = $.fn.outerWidth;\ var outerHeight = $.fn.outerHeight;\ \ var workerFunc = function (height, value) {\ var border = this.border();\ var padding = this.padding();\ var actualSize;\ if (height) {\ actualSize = value - border.top - padding.top - padding.bottom - border.bottom;\ return this.height(actualSize);\ } else {\ actualSize = value - border.left - padding.left - padding.right - border.right;\ return this.width(actualSize);\ }\ };\ \ $.fn.extend({\ outerWidth: function (value) {\ if (typeof (value) != "undefined" && value === value * 1.0) {\ return workerFunc.apply(this, [false, value]);\ } else {\ // pass onto original function\ return outerWidth.apply(this, arguments);\ }\ },\ \ outerHeight: function (value) {\ if (typeof (value) != "undefined" && value === value * 1.0) {\ return workerFunc.apply(this, [true, value]);\ } else {\ // pass onto original function\ return outerHeight.apply(this, arguments);\ }\ }\ });\ }\ \ })(jQuery);\ }}}\ \

+0, Hmm, definitely going to want to see more use cases here.

Changed June 03, 2011 03:41PM UTC by scottgonzalez comment:13

+1, I'd probably +1 anything dimension related, so maybe my vote should be taken with a grain of salt. We have these in jQuery UI already.

Changed June 05, 2011 09:04PM UTC by ajpiano comment:14

description: I've written a plugin to override the default outerWidth and outerHeight functions so they can be used to set the outerWidth and outerHeight of an element.\ \ I constantly found myself calculating the width and height of an element in order to achieve a desired outer width & outer height. This plugin allows me to specify my desired outer width and it takes care of deducting the border and padding from the width value that actually gets set.\ \ I feel this feature is useful enough to warrant inclusion in the core library, what do you reckon?\ \ My plugin is as follows...\ \ \ {{{\ /**\ * jQuery.setouter - Set the outer sizes of elements\ * Written by Adam Pritchard\ * Date: 2010/11/05 (remember, remember...)\ * \ * This plugin overrides the default outerWidth and outerHeight functions\ *\ * @author Adam Pritchard\ * @version 0.1\ *\ **/\ \ (function ($) {\ \ if ($) {\ // get references to original functions\ var outerWidth = $.fn.outerWidth;\ var outerHeight = $.fn.outerHeight;\ \ var workerFunc = function (height, value) {\ var border = this.border();\ var padding = this.padding();\ var actualSize;\ if (height) {\ actualSize = value - border.top - padding.top - padding.bottom - border.bottom;\ return this.height(actualSize);\ } else {\ actualSize = value - border.left - padding.left - padding.right - border.right;\ return this.width(actualSize);\ }\ };\ \ $.fn.extend({\ outerWidth: function (value) {\ if (typeof (value) != "undefined" && value === value * 1.0) {\ return workerFunc.apply(this, [false, value]);\ } else {\ // pass onto original function\ return outerWidth.apply(this, arguments);\ }\ },\ \ outerHeight: function (value) {\ if (typeof (value) != "undefined" && value === value * 1.0) {\ return workerFunc.apply(this, [true, value]);\ } else {\ // pass onto original function\ return outerHeight.apply(this, arguments);\ }\ }\ });\ }\ \ })(jQuery);\ }}}\ \ I've written a plugin to override the default outerWidth and outerHeight functions so they can be used to set the outerWidth and outerHeight of an element. \ \ I constantly found myself calculating the width and height of an element in order to achieve a desired outer width & outer height. This plugin allows me to specify my desired outer width and it takes care of deducting the border and padding from the width value that actually gets set. \ \ I feel this feature is useful enough to warrant inclusion in the core library, what do you reckon? \ \ My plugin is as follows... \ \ \ {{{ \ /** \ * jQuery.setouter - Set the outer sizes of elements \ * Written by Adam Pritchard \ * Date: 2010/11/05 (remember, remember...) \ * \ * This plugin overrides the default outerWidth and outerHeight functions \ * \ * @author Adam Pritchard \ * @version 0.1 \ * \ **/ \ \ (function ($) { \ \ if ($) { \ // get references to original functions \ var outerWidth = $.fn.outerWidth; \ var outerHeight = $.fn.outerHeight; \ \ var workerFunc = function (height, value) { \ var border = this.border(); \ var padding = this.padding(); \ var actualSize; \ if (height) { \ actualSize = value - border.top - padding.top - padding.bottom - border.bottom; \ return this.height(actualSize); \ } else { \ actualSize = value - border.left - padding.left - padding.right - border.right; \ return this.width(actualSize); \ } \ }; \ \ $.fn.extend({ \ outerWidth: function (value) { \ if (typeof (value) != "undefined" && value === value * 1.0) { \ return workerFunc.apply(this, [false, value]); \ } else { \ // pass onto original function \ return outerWidth.apply(this, arguments); \ } \ }, \ \ outerHeight: function (value) { \ if (typeof (value) != "undefined" && value === value * 1.0) { \ return workerFunc.apply(this, [true, value]); \ } else { \ // pass onto original function \ return outerHeight.apply(this, arguments); \ } \ } \ }); \ } \ \ })(jQuery); \ }}} \ \

+0, I like the idea - but I haven't heard this come up with any regularity as something people Need To Do, and I'm getting the impression it's a bit of a bear...

Changed June 06, 2011 04:01PM UTC by jzaefferer comment:15

description: I've written a plugin to override the default outerWidth and outerHeight functions so they can be used to set the outerWidth and outerHeight of an element. \ \ I constantly found myself calculating the width and height of an element in order to achieve a desired outer width & outer height. This plugin allows me to specify my desired outer width and it takes care of deducting the border and padding from the width value that actually gets set. \ \ I feel this feature is useful enough to warrant inclusion in the core library, what do you reckon? \ \ My plugin is as follows... \ \ \ {{{ \ /** \ * jQuery.setouter - Set the outer sizes of elements \ * Written by Adam Pritchard \ * Date: 2010/11/05 (remember, remember...) \ * \ * This plugin overrides the default outerWidth and outerHeight functions \ * \ * @author Adam Pritchard \ * @version 0.1 \ * \ **/ \ \ (function ($) { \ \ if ($) { \ // get references to original functions \ var outerWidth = $.fn.outerWidth; \ var outerHeight = $.fn.outerHeight; \ \ var workerFunc = function (height, value) { \ var border = this.border(); \ var padding = this.padding(); \ var actualSize; \ if (height) { \ actualSize = value - border.top - padding.top - padding.bottom - border.bottom; \ return this.height(actualSize); \ } else { \ actualSize = value - border.left - padding.left - padding.right - border.right; \ return this.width(actualSize); \ } \ }; \ \ $.fn.extend({ \ outerWidth: function (value) { \ if (typeof (value) != "undefined" && value === value * 1.0) { \ return workerFunc.apply(this, [false, value]); \ } else { \ // pass onto original function \ return outerWidth.apply(this, arguments); \ } \ }, \ \ outerHeight: function (value) { \ if (typeof (value) != "undefined" && value === value * 1.0) { \ return workerFunc.apply(this, [true, value]); \ } else { \ // pass onto original function \ return outerHeight.apply(this, arguments); \ } \ } \ }); \ } \ \ })(jQuery); \ }}} \ \ I've written a plugin to override the default outerWidth and outerHeight functions so they can be used to set the outerWidth and outerHeight of an element.\ \ I constantly found myself calculating the width and height of an element in order to achieve a desired outer width & outer height. This plugin allows me to specify my desired outer width and it takes care of deducting the border and padding from the width value that actually gets set.\ \ I feel this feature is useful enough to warrant inclusion in the core library, what do you reckon?\ \ My plugin is as follows...\ \ \ {{{\ /**\ * jQuery.setouter - Set the outer sizes of elements\ * Written by Adam Pritchard\ * Date: 2010/11/05 (remember, remember...)\ * \ * This plugin overrides the default outerWidth and outerHeight functions\ *\ * @author Adam Pritchard\ * @version 0.1\ *\ **/\ \ (function ($) {\ \ if ($) {\ // get references to original functions\ var outerWidth = $.fn.outerWidth;\ var outerHeight = $.fn.outerHeight;\ \ var workerFunc = function (height, value) {\ var border = this.border();\ var padding = this.padding();\ var actualSize;\ if (height) {\ actualSize = value - border.top - padding.top - padding.bottom - border.bottom;\ return this.height(actualSize);\ } else {\ actualSize = value - border.left - padding.left - padding.right - border.right;\ return this.width(actualSize);\ }\ };\ \ $.fn.extend({\ outerWidth: function (value) {\ if (typeof (value) != "undefined" && value === value * 1.0) {\ return workerFunc.apply(this, [false, value]);\ } else {\ // pass onto original function\ return outerWidth.apply(this, arguments);\ }\ },\ \ outerHeight: function (value) {\ if (typeof (value) != "undefined" && value === value * 1.0) {\ return workerFunc.apply(this, [true, value]);\ } else {\ // pass onto original function\ return outerHeight.apply(this, arguments);\ }\ }\ });\ }\ \ })(jQuery);\ }}}\ \

+1, less pain until CSS3 box-sizing: border-box is more available

Changed June 06, 2011 05:15PM UTC by john comment:16

description: I've written a plugin to override the default outerWidth and outerHeight functions so they can be used to set the outerWidth and outerHeight of an element.\ \ I constantly found myself calculating the width and height of an element in order to achieve a desired outer width & outer height. This plugin allows me to specify my desired outer width and it takes care of deducting the border and padding from the width value that actually gets set.\ \ I feel this feature is useful enough to warrant inclusion in the core library, what do you reckon?\ \ My plugin is as follows...\ \ \ {{{\ /**\ * jQuery.setouter - Set the outer sizes of elements\ * Written by Adam Pritchard\ * Date: 2010/11/05 (remember, remember...)\ * \ * This plugin overrides the default outerWidth and outerHeight functions\ *\ * @author Adam Pritchard\ * @version 0.1\ *\ **/\ \ (function ($) {\ \ if ($) {\ // get references to original functions\ var outerWidth = $.fn.outerWidth;\ var outerHeight = $.fn.outerHeight;\ \ var workerFunc = function (height, value) {\ var border = this.border();\ var padding = this.padding();\ var actualSize;\ if (height) {\ actualSize = value - border.top - padding.top - padding.bottom - border.bottom;\ return this.height(actualSize);\ } else {\ actualSize = value - border.left - padding.left - padding.right - border.right;\ return this.width(actualSize);\ }\ };\ \ $.fn.extend({\ outerWidth: function (value) {\ if (typeof (value) != "undefined" && value === value * 1.0) {\ return workerFunc.apply(this, [false, value]);\ } else {\ // pass onto original function\ return outerWidth.apply(this, arguments);\ }\ },\ \ outerHeight: function (value) {\ if (typeof (value) != "undefined" && value === value * 1.0) {\ return workerFunc.apply(this, [true, value]);\ } else {\ // pass onto original function\ return outerHeight.apply(this, arguments);\ }\ }\ });\ }\ \ })(jQuery);\ }}}\ \ I've written a plugin to override the default outerWidth and outerHeight functions so they can be used to set the outerWidth and outerHeight of an element. \ \ I constantly found myself calculating the width and height of an element in order to achieve a desired outer width & outer height. This plugin allows me to specify my desired outer width and it takes care of deducting the border and padding from the width value that actually gets set. \ \ I feel this feature is useful enough to warrant inclusion in the core library, what do you reckon? \ \ My plugin is as follows... \ \ \ {{{ \ /** \ * jQuery.setouter - Set the outer sizes of elements \ * Written by Adam Pritchard \ * Date: 2010/11/05 (remember, remember...) \ * \ * This plugin overrides the default outerWidth and outerHeight functions \ * \ * @author Adam Pritchard \ * @version 0.1 \ * \ **/ \ \ (function ($) { \ \ if ($) { \ // get references to original functions \ var outerWidth = $.fn.outerWidth; \ var outerHeight = $.fn.outerHeight; \ \ var workerFunc = function (height, value) { \ var border = this.border(); \ var padding = this.padding(); \ var actualSize; \ if (height) { \ actualSize = value - border.top - padding.top - padding.bottom - border.bottom; \ return this.height(actualSize); \ } else { \ actualSize = value - border.left - padding.left - padding.right - border.right; \ return this.width(actualSize); \ } \ }; \ \ $.fn.extend({ \ outerWidth: function (value) { \ if (typeof (value) != "undefined" && value === value * 1.0) { \ return workerFunc.apply(this, [false, value]); \ } else { \ // pass onto original function \ return outerWidth.apply(this, arguments); \ } \ }, \ \ outerHeight: function (value) { \ if (typeof (value) != "undefined" && value === value * 1.0) { \ return workerFunc.apply(this, [true, value]); \ } else { \ // pass onto original function \ return outerHeight.apply(this, arguments); \ } \ } \ }); \ } \ \ })(jQuery); \ }}} \ \

Changed July 12, 2011 02:36PM UTC by dmethvin comment:17

resolution: → wontfix
status: newclosed

Voted no in the 1.7 meeting.