Setting outerWidth and outerHeight

[apritchard@…]

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);

[apritchard@…]

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

[dmethvin]

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.

[jordan@…]

I had to do something similar to this awhile back as well... ​http://boedesign.com/misc/outer_setters.html

[john]

Nominating ticket for 1.7 discussion.

[Rick Waldron]

+0,

[jaubourg]

-1, plugin plugin plugin

[timmywil]

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

[dmethvin]

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

[john]

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

[scottgonzalez]

+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.

[ajpiano]

+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...

[jzaefferer]

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

[john]

See: ​https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.core.js#L132-174

[dmethvin]

Voted no in the 1.7 meeting.