jQuery: .height() returns null in .ready() but it works when run the same code console

Question

I'am trying to assign the height to a main div container to give the scroll only to this "rightContent" div.

All I am doing is finding height of all other DIV and subtracting the heights of those DIVs with the "window" height, to give the height to main div "rightContent"

But I am getting an issue, I get the height of all the "DIVs" except ".tabstripContainer" div, Its a dynamic DIV, it generates at runtime.

I added below code at the end of page in ".ready()", but when I run the code, its returns "null" for "tabstripContainer = $('.tabstripContainer').outerHeight();"

Here is the output when I run the code:

===========================================================

BUT when I run the code in Browser Console, I get the correct value for "tabstripContainer = $('.tabstripContainer').outerHeight();" also."

Here is the output when I run my code in Browser CONSOLE:

==================================================================== Here is my code:

$(document).ready(function() {
    // -----------------------------------------------------
    // 100% height fill for splitter main window and panes [Master layout]
    // -----------------------------------------------------
    var bHeight = $('body').height(),
        wHeight = $(window).height(),
        headerHeight = $('header').outerHeight(),
        blueHeader = $('.blueHeader').outerHeight(),
        greyHeader = $('.greyHeader').outerHeight(),
        tabstripContainer = $('.tabstripContainer').outerHeight();

    changepush();
    $(window).resize(function() {
        wHeight = $(window).height();
        changepush();
    });

    function changepush() {
        if (wHeight >= bHeight) {
            var rightContent = wHeight - headerHeight - blueHeader - greyHeader - tabstripContainer;
            $('.rightContent').height(rightContent);

            alert("bHeight" + " > " + bHeight + " wHeight" + " > " + wHeight + " headerHeight" + " > " + headerHeight + " blueHeader" + " > " + blueHeader + " greyHeader" + " > " + greyHeader + " tabstripContainer" + " > " + tabstripContainer + " rightContent" + " > " + rightContent);
        }
    }
});

Please suggest!

Answer 1

If you´re creating the content at runtime, you need to wait until this happens. document.ready is fired just after the browser finished to parse all the DOM, but before others scripts (like ajax calls, etc).

One possible solution is to defer the change push() calling using a setTimeout, or calling the function once your content is displayed.

Another solution is to fire your own event (i.e. "contentLoaded") once your div content was loaded.

You can try to use window.load instead of document.ready, an event triggered after all the external request are done (imgs, frames, etc).

setTimeout reference: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

jQuery custom events: https://learn.jquery.com/events/introduction-to-custom-events/