Community Forums › Forums › Archived Forums › General Discussion › Sticky Footer in Parallax theme:
Tagged: javascript, jquery, Sticky Footer
- This topic has 6 replies, 3 voices, and was last updated 9 years, 8 months ago by Sridhar Katakam.
-
AuthorPosts
-
August 1, 2014 at 5:48 pm #116618jgkMember
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/August 16, 2014 at 11:27 pm #119318TomParticipantYour 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 ]August 18, 2014 at 9:52 am #119546jgkMemberHi 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
August 18, 2014 at 12:08 pm #119568TomParticipantHi 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 ]August 18, 2014 at 1:26 pm #119578jgkMemberHi 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 bottomif($(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.
August 18, 2014 at 2:24 pm #119582TomParticipantThanks for that, Jay.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]August 18, 2014 at 6:42 pm #119641Sridhar KatakamParticipantInspired 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/
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.