Upon loading the page, I am trying to store the height of an element. To achieve this, I have utilized the jQuery "ready" function to establish a callback:
var h_top;
var h_what;
var h_nav;
$(".people").ready(function() {
h_top = $(".top").height();
h_what = $(".what").height();
h_nav = $(".nav").height();
console.log("h_top: " + h_top.toString());
console.log("h_what: " + h_what.toString());
console.log("h_nav: " + h_nav.toString());
});
Unfortunately, the values returned for all elements appear to be incorrect. These values consistently differ by a few pixels compared to when I manually call the height functions from the browser console. I also attempted using outerHeight() and innerHeight(), but encountered the same discrepancy.
What could be causing this issue and how can it be resolved?