jQuery 1.8 outer Height/Width not working

Question

I have used outerHeight and outerWidth on many places. Now, after jQuery 1.8 was released I have met a lot of issues caused by object return instead of its size.

For example:

$('#stackoverflowdiv').Height()      // returns 100 px
$('#stackoverflowdiv').outerHeight() // returns "stackoverflowdiv" div

The only thing that I have found to fix this was to use "true/false" in the function as follows but the I get the same results as the standard width() and height() functions:

$('#stackoverflowdiv').outerHeight(true)  //  returns 100 px
$('#stackoverflowdiv').outerHeight(false) //  returns 100 px

Has anyone knew why this is not working any more or other way to get the height/width of element + its margins.

EDIT: I started to believe that this is caused because I am selecting elements in iframe using contents() function. I will try to make a demo.

Answer 1

This is actually a known jQuery bug that you can read about here.

I'm experiencing it with no parameter and the fix is setting the parameter (even though there's a default {false}), but I was able to break Barlas' fiddle by replacing the true parameter with 1 and false with 0. So don't do that if you are.

Do this:

alert(jQuery(this).outerHeight(false));

Don't do this:

alert(jQuery(this).outerHeight());
alert(jQuery(this).outerHeight(0));

Answer 2

It only works if I do .outerHeight(1); not .outerHeight(true);

Answer 3

The best fix is to pass the Boolean parameter true or false when calling outerHeight or outerWidth

But..

If by any chance you don't have access to files which calls outerHeight or you don't want to edit all outerHeight functions in your files, you can override the jQuery outerHeight function like below to make it always pass the true parameter

var oldOuterHeight =  $.fn.outerHeight;

$.fn.outerHeight = function () { 
    return oldOuterHeight.apply(this, [true]);
};

Answer 4

JQuery 1.8 height(), innerHeight(), outerHeight() and outerHeight(true) work as expected:

DEMO - Working height methods

The demo above is using a div:

<div id="myDiv">My Div</div>

With the following CSS:

div{
    border: 1px solid blue;
    padding: 5px;
    margin: 10px;
}

Using this script:

var $div = $("#myDiv");
var height = $div.height();
var heightWithPadding = $div.innerHeight();
var heightWithPaddingAndBorder = $div.outerHeight();
var heightWithPaddingAndBorderAndMargin = $div.outerHeight(true);

var $result = $("#result");
$result.append("height: " + height);
$result.append("<br />height with padding: " + heightWithPadding);
$result.append("<br />height with padding and borders: " + heightWithPaddingAndBorder);
$result.append("<br />height with padding and borders and margin: " + heightWithPaddingAndBorderAndMargin);

Resulting in the following:

height: 20
height with padding: 30
height with padding and borders: 32
height with padding and borders and margin: 52