CODEWITHSUNDEEP
jqueryheight
lowe_22
lowe_22

Reputation: 395

jQuery height() differs from clientHeight

So I have an element:

<div class="obj">
  <img width="896" height="595" src... />
  <div class="details">
    <h2>Title</h2>
    <p>...</p>
  </div>
</div>
<div class="obj">
  <img width="896" height="595" src... />
  <div class="details">
    <h2>Title</h2>
    <p>...</p>
  </div>
</div>

I'm then performing this on them:

$objs = $('.obj');
$objs.each(function() {
    console.log($(this).height());
}

In element inspector in Chrome, the height of .obj is 720 (same as the image). However I get 0 in the console for each element.

The images aren't floated, so the .obj is containing it's children in css. I don't really know what could be going wrong, and why jQuery isn't returning 720.

Could it be CSS related?

Upvotes: 1

Views: 4333

Answers (2)

ron tornambe
ron tornambe

Reputation: 10780

Handle the window.onload event to ensure all images are loaded, ex. 

$(window).load(
  function() {
    $objs = $('.obj');
    $objs.each(function() {
        console.log($(this).height());
    }
  }
);

Upvotes: 0

WiredPrairie
WiredPrairie

Reputation: 59763

It could be CSS related. Without posting your CSS, it's hard to know. (You say that Chrome reports the height of obj is 720, the same as the image, yet the height of the image is set to 595)?

This jsfiddle shows how it does work.

Upvotes: 1

Related Questions