#7523 closed feature (wontfix)
Setting outerWidth and outerHeight
Reported by: | 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 )
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 12 years ago by
comment:2 Changed 12 years ago by
Keywords: | needsreview added |
---|
comment:3 Changed 12 years ago by
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 12 years ago by
I had to do something similar to this awhile back as well... http://boedesign.com/misc/outer_setters.html
comment:5 Changed 12 years ago by
Component: | unfiled → css |
---|
comment:6 Changed 12 years ago by
Milestone: | → 1.next |
---|
comment:11 Changed 12 years ago by
Description: | modified (diff) |
---|
-1, Sorry but core has to make too many deoptimizing assumptions for this to work effectively. Plugin.
comment:12 Changed 12 years ago by
Description: | modified (diff) |
---|
+0, Hmm, definitely going to want to see more use cases here.
comment:13 Changed 12 years ago by
+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 12 years ago by
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 12 years ago by
Description: | modified (diff) |
---|
+1, less pain until CSS3 box-sizing: border-box is more available
comment:16 Changed 12 years ago by
Description: | modified (diff) |
---|
comment:17 Changed 12 years ago by
Resolution: | → wontfix |
---|---|
Status: | new → closed |
Voted no in the 1.7 meeting.
Oh, forgot to mention my plugin uses the jSizes plugin which I use heavily. That could be swapped out with native .css() calls.