-1

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:

enter image description here

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

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: enter image description here

==================================================================== 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!

Sushil
  • 2,837
  • 4
  • 21
  • 29
UID
  • 4,434
  • 11
  • 45
  • 75
  • 1
    If the `div` is dynamically created, there's a chance it doesn't exist when you query its height the first time. Make sure this code you've shown is running after whatever code is creating the element. – Oka May 04 '15 at 22:19

2 Answers2

1

I do not have enough reputation to comment so had to provide this as an answer.

Have you tried using $(window).load instead of $(document).ready? The former fires when additional page assets have loaded (eg. images), whereas the latter will trigger when the DOM is ready.

cwild
  • 36
  • 3
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/

sminutoli
  • 853
  • 4
  • 11