jQuery miscalculates div height on document ready

Question

I'm trying to change the section height after the page loads but it doesn't always work. I know my code to change the height is fine, and it works on window resize, just the initial call after document.ready doesn't always work.

var $window = $(window);

function wrap_element_link_mobile(object, path) {
    if ($(this).width() < 921 && !object.parent().is('a')) {
        object.wrap("<a href='" + path + "'></a>");
    } else if ($(this).width() > 920 && object.parent().is('a')) {
        object.unwrap();
    }
}

function resize_section() {
    var sectionMinHeight = $(window).height() - $('header').height() - $('footer').height() - 7;
    $('section').css('min-height', sectionMinHeight);
}

/* Called after document Load
================================ */

$(document).ready(function () {
    var $mainLogo = $('#main-logo');

    wrap_element_link_mobile($mainLogo, '/');
    resize_section();

    $window.resize(function () {
        wrap_element_link_mobile($mainLogo, '/');
        resize_section();
    });
});

After creating a console.log in the initial call I figured out it is getting called but for some reason it's not working.

*Edit screen of what I see

Notice the scroll bar, it goes away if I resize the window at all though and is the proper height.

http://jsfiddle.net/QHSm3/6/

Cashbook

Probably not the issue, but you're missing a semi-colon after your }) – Rachelrachele

Thanks I added those but it's still not working as you suspect – Cashbook

where are you including your JS code? – Comptometer

What is the value of sectionMinHeight in resize_section() when it fires? I suspect you are loading images in the header which not not be fully loaded when the DOM is ready. If any images you should set the dimension explicitly. – Emilio

@RiteshChandora That doesn't matter when using $(document).ready() – Emilio

does it work on $(window).load() ? – Sind

why are you using min-height? If you want to resize, shouldnt you use height? – Winn

After the pages initial load my code works, using $(window).load works on initial load but not anytime after ie if I click a link, using min-height allows content to overflow and still have the background move. – Cashbook

Your code seems to be working here: jsfiddle.net/salman/QHSm3/5 – Gremlin

@Snowfiring do you have images in header or footer? If you want to use the Height, Width properties of an image for example, then document.ready is a deal braker!! – Comptometer

jsfiddle.net/QHSm3/6 is the code in use with what I'm doing. I don't understand why this is working here but in my development environment I get a different result. Ill post it in the main post, but I'm guessing this is a env issue. – Cashbook

You can keep searching for that problem but I think what you're doing can be achieved with pure css – Recurvate

This is a long shot but I guess you are using rails(From the comment in your css file). Are github.com/rails/turbolinks enabled? They dont always fire the onload events properly. Try disabling them (data-no-turbolink attribute on the body tag) – Foregather

@JonasGrumann I've been trying to solve it with pure css but its been a bit beyond my skill. I would have to reapproach designing my website as a lot of it bases off height and the best way to solve the background issues involve setting a min height which breaks height percentages. TejasKale your right Im using rails perhaps this is why indeed ill try this – Cashbook

Answer 1

The problem is with the tree logo!!! Here is what happens:

You did not specify width and height on the image. When you do that, the browser assumes a height of 0px on document.ready ¹. On document.ready, your script calculates the height of the header to be 60px and sets a min-height on section right away.

When the image loads, the height of header changes to 101px; at this point, the content (header, section, footer) grows by 41px hence the scrollbar.

¹ The results could be different if the image is loaded from cache.

You have two three options:

1: specify image dimensions in HTML source:

<img alt="Tree Logo" id="main-logo" src="logo.png" width="83" height="101"/>

Demo here, seems to work.

2: calculate heights on window.load instead of document.ready.

3. Better, use a CSS sticky footer (unless I misunderstood what you're trying to do).

Gremlin

Wow this is the correct answer. who would of known I'm very glad I put a bounty on this so people know to set a height on images if they want them counted in a document.ready!! – Cashbook

Answer 2

This would be my pure html/css attempt.

http://jsfiddle.net/QHSm3/10/

section.pages {
    position: fixed;
    bottom: 0;
    left: 0;
    top: 102px;
    right: 0;
    overflow: auto;
}

I know it doesn't answer your question directly but I think stackoverflow should show the right path, and personally, I think that if there's a way of solving a layout problem with pure css, it should be done that way.

EDIT: Here's another attempt, it involves calc:

http://jsfiddle.net/QHSm3/11/

section.pages {
    position: absolute;
    left: 0;
    top: 102px;
    right: 0;
    min-height: calc(100% - 123px);
}

Please note that this will let ie8 behind: http://caniuse.com/#search=calc

Recurvate

I edited the overflow: scroll to overflow: auto, to hide the scrollbar when it's not needed – Recurvate

In a way this works but then the header is always on the page. I'm not a huge fan of that method even though its more common now. – Cashbook

make position: absolute – Scraggy

If you just set position: absolute you'll have a problem when there's less text in the project thingy. I edited my answer with another solution – Recurvate

jsfiddle.net/QHSm3/12 This seems to break my footer which is why I chose the method I did. – Cashbook

jsfiddle.net/QHSm3/15 broken when content overflows the section. hence using min height – Cashbook