Sticky Footer in Parallax theme:

[jgk]

Hi, I'm trying to make the footer stick to the bottom of the browser window when the content is small on the page. the div class is "foot" and everything within should stick to the bottom. I'm having trouble getting it working but I've tried multiple methods including css and jquery.

I've included the javascript here:

http://squibbs.studioissa.com/wp-content/themes/squibbs-pd/js/jquery.footerstick.js

But it isn't working yet. Any help would be greatly appreciated! Thanks!

http://squibbs.studioissa.com/recipes/food/

[Tom]

Your 404 page shows that you've got this fixed, but maybe not on your recipes page (it loaded strangely).

Do you still need some help?

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[jgk]

Hi Tom, Thanks so much. I thought it was fixed. What browser are you using that it loaded strangely on?

It's working for me now on chrome for mac.

Thank you!

Jay

[Tom]

Hi Jay,

The initial load of the recipes page displayed 3 images across, pushing the 4th one down and naturally pushing the footer below that (ie. OK). Reloading the page placed the images 4-across with the footer *almost* pushed to the bottom, leaving a thin ribbon of the background color below the footer.

I'm using Chrome Version 36.0.1985.143 m, Windows 7.

Overall it looks good. For future readers would you care to share your method for achieving this?

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[jgk]

Hi Tom,

Thanks for letting me know. I haven't been able to replicate your issue in browserstack. Hopefully it's one of your plugins in chrome causing the issue. Thanks for the heads up.

We asked our developer to fix it after posting in the forums a few times. I believe the following jquery is solving the problem:

(function stickyFooter($){

function stickToBottom () {

var $footer = $('.foot');

// If the body is smaller than the window
// stick the footer to the bottom

if($(window).height()>$('body').height()) {

$footer.css({
'position':'fixed',
'bottom': 0,
'width': '100%'
});

} else {
$footer.removeAttr('style');
}
}

// On DOM Ready on pages without Envira Gallery
if ($('.pd-dynamic-footer').length === 0) {
stickToBottom();
// On Resize
$(window).resize(stickToBottom);
}
})(jQuery);

I add the class "pd-dynamic-footer" to the body of the offending pages.

[Tom]

Thanks for that, Jay.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Sridhar Katakam]

Inspired by the problem discussed in this topic, I went around googling and came up with http://sridharkatakam.com/push-footer-way-theres-little-content-genesis/

---

Genesis Tutorials | Follow me on Twitter

[Author]

Posts