CODEWITHSUNDEEP
jqueryhtmlcss
Jamie
Jamie

Reputation: 3071

Height doesn't get updated when resizing the window

I'm currently having some issues to get the height of html element, it seems that it doesn't get updated when the window has been resized. I tried to reset the html with: 'height: auto', but that doesn't seem to help.

The width works fine, but the height doesn't get updated.

Any solutions for this problem?

Thanks in advance!

JQuery:

 function UpdateLeftBar() {
    // Reset
    $('html').height('auto');
    // Get the height of the window and minus the header and left top elements
    height = $('html').height() - 85 - 56 + 29;
    width = $('html').width() - 300;
    // Set the div to the new height
    $('#leftContentBottom').css({ 'height': height });
    $('#middleContent.span10').css({ 'width': width });
    console.log(height);
}

$(window).resize(function () {
    UpdateLeftBar();
});

Real strange, i noticed that it updates like 80% of the time, but if you double click the window, it doesn't get resized.

Fix: Instead getting the height of the html, you should get the height of the window. This fixed my problem.

Upvotes: 1

Views: 1766

Answers (1)

Jamie
Jamie

Reputation: 3071

Thanks to Huangism for posting the duplicate thread, it was very easy to solve my problem.

The solution is to use window instead of using the html element to get the height of the window. It seems like html doesn't get always updated.

        function UpdateLeftBar() {
    // Get the height of the window and minus the header and left top elements
    height = $(window).height() - 85 - 56;
    width = $('html').width() - 300;
    // Set the div to the new height
    $('#leftContentBottom').css({ 'height': height });
    $('#middleContent.span10').css({ 'width': width });
    console.log(height);
}

$(window).resize(function () {
    UpdateLeftBar();
});

Upvotes: 1

Related Questions