I'm using a simple jQuery plugin to sticking footer to the bottom of page, It works fine except when I put a table in the page:
But when I resize the page, it gets fixed and footer sticks to the bottom. What's wrongwith it? Is it a CSS related problem or jQuery problem?
You can view the page without table here and page with table here.
It's the jQuery script for sticking footer the bottom of page:
$(document).ready(function () {
positionFooter();
$(window)
.scroll(positionFooter)
.resize(positionFooter);
function positionFooter() {
var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
if (docHeight < $(window).height()) {
var diff = $(window).height() - docHeight;
if (!$("#sticky-footer-push").length > 0) {
$("#footer").before('<div id="sticky-footer-push"></div>');
}
$("#sticky-footer-push").height(diff);
}
}
});
$(window).load(function () {
$("#footer").stickyFooter();
});
// sticky footer plugin
(function ($) {
var footer;
$.fn.extend({
stickyFooter: function (options) {
footer = this;
positionFooter();
$(window)
.scroll(positionFooter)
.resize(positionFooter);
function positionFooter() {
var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
if (docHeight < $(window).height()) {
var diff = $(window).height() - docHeight;
if (!$("#sticky-footer-push").length > 0) {
$(footer).before('<div id="sticky-footer-push"></div>');
}
$("#sticky-footer-push").height(diff);
}
}
}
});
})(jQuery);