Question

The current jQuery documentation makes no mention of .outerWidth() behaving as a setter. While I am sure I could work it out, setting the width of an element in a line based on the calculated widths of other elements in the line is cumbersome and doesn’t work equally in IE9 when compared to the other major browsers. On a hunch, I tried using .outerWidth() as a setter. It works beautifully and equally in all browsers.

Here is the line of code (with the “value” set using a JavaScript variable, whose value is confirmed by an alert):

$("#WelcomeMessage").outerWidth(WidthAvailableForWelcomeMessage);

And here are the jQuery references in my site:

<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />

One comment in the documentation of .outWidth(), at the end of the comments section, says that this feature is in the jQuery ui. Commenting out the ref to the ui makes it not work. But I can’t find explicit documentation concerning this feature anywhere.

Is this behavior reliable?

Answer 1

The documentation for jQuery ui has always been spotty at best, and I too can’t find any documentation on it. I would suggest not using outerWidth as a setter and finding an alternative.

outerWidth is going to be a setter and a getter in jquery 1.8, it is safe to use it as long as you continue to include jQuery ui in your code until you upgrade to jquery 1.8

http://blog.jquery.com/2012/06/22/jquery-1-8-beta-1-see-whats-coming-and-going/

at least, it is currently planned to be in 1.8. Since it is still beta, that could of course change.