13

This is a re-do of a question that was closed erroneously: jQuery 1.8 outer Height/Width not working

I'm hitting the same issue. outerWidth and outerHeight and now returning the jQuery object instead of numbers.

We are using jQuery UI 1.8.17, released Jan 10, 2012. It is not a super old version so I have a feeling other people will see this. We are locked into this version because of some terrible jQuery ui plugins, so upgrading is not currently an option.

If I find a solution I will answer this question.

Here's a fiddle demonstrating the problem http://jsfiddle.net/delvarworld/yxDHu/ (jQuery UI version added in "manage resources")

Update: It's because this line in jQuery UI:

return orig[ "outer" + name ].call( this, size );

is erroneously triggering this condition in jQuery 1.8.2:

var chainable = arguments.length && ( defaultExtra || typeof margin !== "boolean" ),

because even though size is undefined, the check is for arguments.length. chainable should be false here. You can pass in undefined and it will still make arguments an object with length 1. Someone needs to read up on their JS ;)

Community
  • 1
  • 1
Andy Ray
  • 30,372
  • 14
  • 101
  • 138
  • 1
    Bug opened: http://bugs.jquery.com/ticket/12647 – Andy Ray Oct 03 '12 at 23:03
  • +1 for reopening the question. according to http://api.jquery.com/outerHeight/ `includeMargin` is an optional parameter, but if not set to true/false it still (jquery 1.8.3) returns the element. – roberkules Jan 10 '13 at 04:57

3 Answers3

8

A simple solution seems to be just passing in false

$(document.body).outerWidth(false);

Or, true if you want the margins, but if you were passing in true it looks like you would not have encountered this bug.

Andy Ray
  • 30,372
  • 14
  • 101
  • 138
  • This seems like a crude solution. I'd have to modify every outerWidth/outerHeight call in every single jQueryUI plugin to pass false when true isn't already there. The real problem is that jQueryUI's overridden methods aren't designed well enough (as of the OP's version). Thus, the proper solution should modify jQueryUI's extension with smarter logic -- fix the problem instead of its symptoms. – Tom Aug 14 '13 at 18:21
7

Looks like it is jqueryUI issue. Seems to be fixed in 1.8.22.

With jquery UI 1.8.21: http://jsfiddle.net/yVq5H/13/

With jquery UI 1.8.22 (fixed): http://jsfiddle.net/yVq5H/14/

warrickh
  • 1,616
  • 1
  • 16
  • 14
  • 1
    I had the problem with jQuery 1.8.2 and jQuery UI 1.8.17 - which caused the Foundation Orbit slider to not slide. Took me a while to figure out outerWidth() was broken - an upgrade to the latest jQuery UI 1.10.0 fixed this issue. – rkallensee Jan 29 '13 at 14:22
  • Agreed. Via http://bugs.jquery.com/ticket/12293 : "Please upgrade jqueryUI to 1.8.22, as that's the one that's compatible with jQuery 1.8" – Grae Kindel Mar 05 '13 at 19:11
  • I concur with rkallensee -- this has been a huge pain to diagnose. – Tom Aug 14 '13 at 18:23
2

I suggest upgrading both your jQuery and jQuery UI packages. 1.8.1 and 1.8.2 in particular address issues related to outerWidth / outerHeight, and jQuery UI of course needs to be kept in sync.

See the changelogs on the announcements for reference:

http://blog.jquery.com/

http://blog.jqueryui.com/

Joshua
  • 3,615
  • 1
  • 26
  • 32
  • cannot upgrade as per question. as jquery is supposed to be backwards compatible, this is an issue – Andy Ray Oct 03 '12 at 23:18
  • If you read the blog - jquery 1.8 had issues with outerWidth / outerHeight. http://blog.jquery.com/2012/08/30/jquery-1-8-1-released/ Try upgrading jquery itself to 1.8.2 and see if that helps. – Joshua Oct 03 '12 at 23:20