Question

Why would firefox give me the correct output but Chrome doesn’t ?

I am trying to find the height of a div that has not been specified in the stylesheet or anywhere else.

Chrome gives me the integer value of ’20’, but firefox gives me the correct value (using firebug) of 516.

This is the code I am using to generate the console.log:

var img_h = $("#pics").height();
    console.log(img_h);

<div id="pics" width="100%">
        <img src="image1.jpg" width="45%">
        <img src="image2.jpg" width="45%">
    </div>

Thoughts?

Answer 1

If you want images to be loaded, instead of document.ready you should use window.onload, like this:

$(window).load(function() {
  var img_h = $("#pics").height();
  console.log(img_h);
});

The most notable difference is that images (not created dynamically!) are loaded and ready when this code runs.