Issue with getting div height dynamically

Question

I have been trying to get the height of an image dynamically while adjusting the browser window.

I used console.log() to get the value to check if my results are correct, and somehow the result is always 0! What am I doing wrong?

$(function(){
    var ScreenHeight = $(window).height();
    var ImageHeight  = $('#bkgImages').height();
    var ImageMove   = (ScreenHeight-ImageHeight)/2
    $('#wrapper').slideDown(500);
    $('#bkgScreen').animate({opacity: .5}, 700);
    $('#bkgImages').css({top: "-" + ImageMove + "px"});
    console.log(ImageHeight);           
});

I manage to get the window height result working but not the div element height. The other issue is this calculates the result only once per session, where as I need to function to run every-time a user adjusts the browser window size. How do I go about doing that?

Answer 1

I think it depends on the css property of the div, and you may refer to answer here https://stackoverflow.com/a/10656669/693110.

In short, you need to specify the div to have display: inline-block; property.