Question

At my website, I try to accomplish (with javascript) that the footer height changes if the page height is larger then a specific value (907 pixels, the body height). It also needs to change if the page height changes (so if the viewer changes his client height).

I use jQuery to get the page height, but I need it’s continuously checked, and not only when the page loads.

This is the snippet I use:

$(document).ready(function(){
    var windowheight = $(window).height();
    if(windowheight >= "907") {
        var extrafooterheight = windowheight - 907;
        $('#footer').height(40 + extrafooterheight);
        $('body').height(907 + extrafooterheight);
    }
});

Thanks for your help.

Answer 1

I suggest attaching to the resize event of the window using jQuery:

$(document).ready(function(){
    $(window).resize(function() {
        var windowheight = $(window).height();

        if(windowheight >= "907") {
            var extrafooterheight = windowheight - 907;
            $('#footer').height(40 + extrafooterheight);
            $('body').height(907 + extrafooterheight);
        }
    });
});

Take a look at the jQuery resize() docs.