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

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

Answer 4

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 5

It is working fine mate, i can't be sure without seeing your html and css but you can inspect this example and examine it is working fine on jQuery 1.8.0

Here is working jsFiddle.

jQuery:

console.log($('#stackoverflowdiv').outerHeight(false));//returns 110
console.log($('#stackoverflowdiv').outerHeight(true));//returns 130

css:

#stackoverflowdiv { 
      height:100px; 
      margin:10px 5px; 
      padding:5px; 
      border 2px solid #fff;
}​

Are you sure that you forgot use a semicolon or define document.ready ? Or worse forgot to define margin or border ?

Answer 6

outerHeight only returns an integer or null according to the jQuery DOCs.

Returns the height of the element, including top and bottom padding, border, and optionally margin, in pixels. If called on an empty set of elements, returns undefined (null before jQuery 3.0).

There must be something else in your code futzing with your output and making you see the div element.