CODEWITHSUNDEEP
javascriptjqueryhtmlcssfooter
user3420034
user3420034

Reputation:

Correct way to avoid element jumping to bottom of page?

So currently I run some Javascript on page load that moves a website footer div to the bottom of the page if the page content is shorter than the total page height.

It looks like this:

if (window.addEventListener) { // Mozilla, Netscape, Firefox
    window.addEventListener('load', windowLoad, false);
} else if (window.attachEvent) { // IE
    window.attachEvent('onload', windowLoad);
}

function windowLoad(event) {
    //Set min-height to viewport height
    if (/*Page elements height*/ < $(window).height()) {
        $(".content").css('min-height', $(window).height() - /*Page elements height*/;
    }
}

The issue is that on even a reasonably fast connection there's a noticable jump where the footer is initially just below the content, and then jumps to the bottom of the page. Any ideas how to resolve this?

Upvotes: 1

Views: 404

Answers (1)

Guffa
Guffa

Reputation: 700800

As you are using jQuery already, you can use that to bind the events. That way you don't need different code for different browsers.

You can also use the ready event instead of the load event, which happens earlier in the page load process. The ready event is the cross-browser version on the DOMContentLoaded event, where jQuery emulates the event for browsers that doesn't support it (i.e. IE).

$(document).ready(function(){
  //Set min-height to viewport height
  if (/*Page elements height*/ < $(window).height()) {
    $(".content").css('min-height', $(window).height() - /*Page elements height*/;
  }
});

Upvotes: 1

Related Questions