Menu icon Foundation
wp-forge & stickyFooter.js not working

Hi,

Really hope a Zurbian can help me here.

I've installed wp-forge on a new installation of Wordpress 4.1 and I'm having real difficulty getting the footer to stick to the bottom of the window. I don't need a 'fixed' effect, I just need to stop the footer being in the middle of the page when there's scant content.

I have perused the Net, including this forum and tried several of the fixes, including http://ryanfait.com/sticky-footer/, but nothing seems to get the job done.

I finally came across stickyFooter.js, but that didn't work either.

The final suggestion I've tried is from Charles Smith --> http://foundation.zurb.com/forum/posts/629-sticky-footer. But this has not worked either. I've tried putting in wpstarter-functions.js, and putting it manually in WP footer.php (which is the state it's now in), all to no avail.

It seems to be sticking to the .content_container div instead.

This is the footer code from wp-forge Starter footer.php:

   <div class="footer_container">
        <footer id="footer" class="footer_wrap row" role="contentinfo">
            <?php get_template_part( 'content', 'footer' ); ?>
        	<?php get_template_part( 'menu', 'social' ); ?>   
    	</footer><!-- .row -->
    </div><!-- end #footer_container -->

<?php if( get_theme_mod( 'wpforge_mobile_display' ) == 'yes') { ?>    
	  <a class="exit-off-canvas"></a>
	</div><!-- .inner-wrap -->
</div><!-- #off-canvas-wrap -->
<?php } // end if ?>

    <div id="backtotop">Top</div><!-- #backtotop -->
<?php wp_footer(); ?>
<script>
$(window).bind("load", function () {
    var footer = $(".footer_container");
    var pos = footer.position();
    var height = $(window).height();
    height = height - pos.top;
    height = height - footer.height();
    if (height > 0) {
        footer.css({
            'margin-top': height + 'px'
        });
    }
});
</script>
            

         

The development site is at http://client.bizharbour.net/ — and I really need to get it hidden from public view as my client has a site up and running with the same content.

Unlike Dr. Calvin, I haven't found a way to trick the code into revealing itself :) So any help would be much appreciated.

Cheers,
Tracy

Foundation 5wordpresswp-forgefooter

Hi,

Really hope a Zurbian can help me here.

I've installed wp-forge on a new installation of Wordpress 4.1 and I'm having real difficulty getting the footer to stick to the bottom of the window. I don't need a 'fixed' effect, I just need to stop the footer being in the middle of the page when there's scant content.

I have perused the Net, including this forum and tried several of the fixes, including http://ryanfait.com/sticky-footer/, but nothing seems to get the job done.

I finally came across stickyFooter.js, but that didn't work either.

The final suggestion I've tried is from Charles Smith --> http://foundation.zurb.com/forum/posts/629-sticky-footer. But this has not worked either. I've tried putting in wpstarter-functions.js, and putting it manually in WP footer.php (which is the state it's now in), all to no avail.

It seems to be sticking to the .content_container div instead.

This is the footer code from wp-forge Starter footer.php:

   <div class="footer_container">
        <footer id="footer" class="footer_wrap row" role="contentinfo">
            <?php get_template_part( 'content', 'footer' ); ?>
        	<?php get_template_part( 'menu', 'social' ); ?>   
    	</footer><!-- .row -->
    </div><!-- end #footer_container -->

<?php if( get_theme_mod( 'wpforge_mobile_display' ) == 'yes') { ?>    
	  <a class="exit-off-canvas"></a>
	</div><!-- .inner-wrap -->
</div><!-- #off-canvas-wrap -->
<?php } // end if ?>

    <div id="backtotop">Top</div><!-- #backtotop -->
<?php wp_footer(); ?>
<script>
$(window).bind("load", function () {
    var footer = $(".footer_container");
    var pos = footer.position();
    var height = $(window).height();
    height = height - pos.top;
    height = height - footer.height();
    if (height > 0) {
        footer.css({
            'margin-top': height + 'px'
        });
    }
});
</script>
            

         

The development site is at http://client.bizharbour.net/ — and I really need to get it hidden from public view as my client has a site up and running with the same content.

Unlike Dr. Calvin, I haven't found a way to trick the code into revealing itself :) So any help would be much appreciated.

Cheers,
Tracy

Tracy Shorrock almost 5 years ago

Hi,

I have achieved a footer that sticks to the bottom of the window. However, there is a small vertical scroll which shouldn't be there because the main content is way up the page. The footer itself seems to be 160px, but I don't know where it's getting this height from; I've checked the wp-forge css file and my child theme css and there's no reference to 160px.

There also seems to be a jump when you initially load the page; the footer starts in it's usual position, stuck to the bottom of the .content_container and then quickly jumps to the bottom of the screen but with the vertical scroll.

I discovered the problem w/ the code snippet from Charles Smith's solution was something to do with Wordpress using jQuery in noConflict mode by default (ref: http://stackoverflow.com/questions/7975093/typeerror-undefined-is-not-a-function-evaluating-document).

Below is what now appears in footer.php.
```
(function($) {
$(window).bind("load", function() {
var footer = $(".footer_container");
var pos = footer.position();
var height = $(window).height();
height = height - pos.top;
height = height - footer.height();
if (height > 0) {
footer.css({
'margin-top': height + 'px'
});
}
});
})(jQuery);

Can anyone suggest a better solution. If not, maybe someone could point to where the 160px footer is coming from and how to fix the jump.

Cheers,

Tracy