Geek asks and answers

Running jQuery function after loading all media

I have a simple jQuery script that pushes the footer to the bottom of the page, even if the content is not long enough:

$(document).ready(function(){
    positionFooter();
    function positionFooter(){
        //get the div padding
        var padding_top = $("#footer").css("padding-top").replace("px", "");
        //get the current page height - the padding of the footer
        var page_height = $(document.body).height() - padding_top;
        var window_height = $(window).height();
        //calculate the difference between page and window height
        var difference = window_height - page_height;
        if (difference < 0) 
            difference = 0;
        //write the changes to the div
        $("#footer").css({
            padding: difference + "px 0 0 0"
        })
    }
    //re-run the function if browser window is resized
    $(window).resize(positionFooter)
});

Unfortunately, the (document) .ready trigger is early and the dose does not take into account the loading of images and fonts, so the calculated value is incorrect. Is there a trigger suitable for such tasks?

Also the site I'm building uses Disqus fot comments, which also change the page length, although I think I need a reverse call to the Disqus script to take this change into account.

+3
source share
5 answers

try $(window).load()

jQuery : http://api.jquery.com/category/events/document-loading/

,

+9

: jQuery , -

+1

CSS, :

    $(window).resize(positionFooter).resize();
});

resize , . JS :

    $(window).resize($.throttle(250, positionFooter)).resize();
});
+1

I wonder if using the doms.onload window might be the best solution. I think I will wait for the media to load.

0
source

You can accomplish this in pure CSS using the sticky footer technique.

http://www.cssstickyfooter.com/

-2
source

More articles:


All Articles