Bug Tracker

Opened 8 years ago

Closed 7 years ago

Last modified 7 years ago

#7523 closed feature (wontfix)

Setting outerWidth and outerHeight

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

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 (17)

comment:1 Changed 8 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 8 years ago by dmethvin

Keywords: needsreview added

comment:3 Changed 8 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 8 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 8 years ago by Rick Waldron

Component: unfiledcss

comment:6 Changed 8 years ago by Rick Waldron

Milestone: 1.next

comment:7 Changed 8 years ago by john

Keywords: 1.7-discuss added

Nominating ticket for 1.7 discussion.

comment:8 Changed 8 years ago by Rick Waldron

Description: modified (diff)

+0,

comment:9 Changed 8 years ago by jaubourg

-1, plugin plugin plugin

comment:10 Changed 8 years ago by timmywil

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

comment:11 Changed 8 years ago by dmethvin

Description: modified (diff)

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

comment:12 Changed 8 years ago by john

Description: modified (diff)

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

comment:13 Changed 8 years ago by 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.

comment:14 Changed 8 years ago by ajpiano

Description: modified (diff)

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

comment:15 Changed 8 years ago by jzaefferer

Description: modified (diff)

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

comment:17 Changed 7 years ago by dmethvin

Resolution: wontfix
Status: newclosed

Voted no in the 1.7 meeting.

Note: See TracTickets for help on using tickets.