0

I've created a function that allows a footer to be attached/detached to the screen when jQuery collects the new page content via AJAX. This is then swiped in from the right and the background is 100% height and width to the window. The only thing is, when this function is called, it jumps into the right size according to the new content (getting it's height) and it would be great to have this animated rather than jumping about.

I've had a go at creating a second function that can be called when I need it animated but it doesn't work correctly. Is there a way of doing this or is this completely impossible? If so, how well have I done so far? Any suggestions would be greatly appreciated.

Current 'jumpy' function:

function resize() {

    //content_height has been changed to $("#content").height();
    //to collect the new content height
    if($(window).height() < $("#content").height()+291) {
        $(".full").css("height", $(".full").height()+19 + "px");
        $("#footer-wrapper").css({
            bottom: "auto",
            top: ($("#content").height()+147) + "px"
        });
        $(".bg").css("height", ($("#content").height()+272) + "px");
    } else {
        $(".full").css("height", $(window).height()-274 + "px");
        $("#footer-wrapper").css({ bottom: 0, top: "auto" });
        $(".bg").css("height", "100%");
    }
}

Animated function:

function animateResize() {
    if($(window).height() < $("#content").height()+291) {
        $(".full").animate({ height: full_height+19 + "px" });
        $("#footer-wrapper").animate({
           bottom: "auto",
           top: ($("#content").height()+166) + "px"
        });
        $(".bg").animate({ height: ($("#content").height()+291) + "px" });
    } else {
        $(".full").animate({ height: $(window).height()-274 + "px" });
        $("#footer-wrapper").animate({ bottom: 0, top: "auto" });
        $(".bg").animate({ height: "100%" });
    }
}

Just for reference, the added pixels is the height of the header and/or footer.

Oliver Tappin
  • 2,511
  • 1
  • 24
  • 43
  • Define "doesn't work correctly". – Ryan Lynch Sep 05 '12 at 21:16
  • Be warned - some versions of IE only fire the resize event after the resizing stops, not continually. – Diodeus - James MacFarlane Sep 05 '12 at 21:18
  • @RyanLynch as in the height of the object does not animate. I'm unsure whether the object needs the initial height and for it to be added on so it knows where it's being animated from. The other bits is that it's changing from `bottom:0` to `bottom:auto` and don't think this can be animated at all. Maybe the best way is to have the footer slide up and the new footer (at the bottom of the page as `auto`) slide up simultaneously. Thanks for the warning @Diodeus - it needs to be supported in IE7 at the least. – Oliver Tappin Sep 05 '12 at 21:31

0 Answers0