Bug Tracker

Opened 9 years ago

Last modified 8 years ago

#7523 closed feature

Setting outerWidth and outerHeight — at Version 8

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

Description (last modified by Rick Waldron)

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

Change History (8)

comment:1 Changed 9 years ago by apritchard@…

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

comment:2 Changed 9 years ago by dmethvin

Keywords: needsreview added

comment:3 Changed 9 years ago by 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.

comment:4 Changed 9 years ago by jordan@…

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

comment:5 Changed 9 years ago by Rick Waldron

Component: unfiledcss

comment:6 Changed 9 years ago by Rick Waldron

Milestone: 1.next

comment:7 Changed 9 years ago by john

Keywords: 1.7-discuss added

Nominating ticket for 1.7 discussion.

comment:8 Changed 9 years ago by Rick Waldron

Description: modified (diff)

+0,

Note: See TracTickets for help on using tickets.