ThemeShaper Forums » Thematic

[closed]

Sticky Footer

(39 posts)
  • Started 5 years ago by bucks14
  • Latest reply from bhomatude
  • This topic is resolved

Tags:

  1. What's the best way to implement a sticky footer in Thematic? Something with similar functionality to this: http://ryanfait.com/sticky-footer/
    Basically, I want to ensure that extremely short pages don't have unstyled whitespace at the bottom of them.

    Posted 5 years ago #
  2. Hey .. let me do a couple of tests first.

    Cheers,

    Chris

    Posted 5 years ago #
  3. Thanks Chris, much appreciated.

    Posted 5 years ago #
  4. Hey ..

    this sticky footer thing is a real mess .. all CSS solutions that I found need a more or less changed markup .. the jQuery things I found do not work properly .. one of these scripts was looking pretty good except of switching the footer to position: absolute.

    So I started to work on another jQuery solution I found today .. and now ..

    I need a volunteer 'cause I'm not able to test it on my netbook (screen height to low) with IE, Safari, Chrome .. would need to wait 'til Monday (Office)

    I you want to help please do the following:

    Rename and move the entire folder "thematic-sample-child-theme" to the root level of wp-content/themes and activate this new theme.

    Add only the Search widget to the Primary Aside and only an empty text widget to the Secondary Aside.

    Create a Page with the title "Test" and only one word in the content.

    Watch this page in your browser .. you should see the footer floating around somewhere close to the middle of your screen.

    Now add the following code to your style.css:

    body, html, #wrapper {
    	height: 100%;
    }
    #main {
    	height: auto;
    }

    and add the following code to the child theme's functions.php:

    function sticky() {
    ?>
    <script type="text/javascript">
    
        jQuery.noConflict();
    
        jQuery(document).ready(function($){
            matchHeight();
    	function matchHeight() {
    		var mainHeight = $("#wrapper").outerHeight() - $("#header").outerHeight() - $("#footer").outerHeight() - parseInt($("#footer").css("margin-top")) - 1 - parseInt($("#main").css("padding-top"))- parseInt($("#main").css("padding-bottom"));
    		var mainReal = $("#main").outerHeight(true);
    
    		if ((mainHeight + 1 + parseInt($("#main").css("padding-top")) + parseInt($("#main").css("padding-bottom"))) > mainReal) {
    			$('#main').height(mainHeight);
    		}
    	}
    	$(window).resize(matchHeight);
    });
    
    </script>
    
    <?php
    }
    add_action('wp_head', 'sticky');

    Now go back to your browser .. re-open the page "Test" and see what happens ..

    Please test it on all major browsers FireFox, IE7, IE8, Safari and Chrome and provide some feedback .. or wait 'til I'm back in my office on Monday ;-)

    Thanks!

    Cheers,

    Chris

    Posted 5 years ago #
  5. I love it when a plan comes together! .. the jQuery thing is working with "thematic-sample-child-theme" .. after testing FireFox, IE7, IE8, Safari and Chrome I thought I should give IE6 a try .. and even there it works ..

    Now comes the interesting part .. I'll test a couple of child themes with this script.

    Cheers,

    Chris

    Posted 5 years ago #
  6. I know this is a bit old now, but this did not work for me in either FF or IE. I had disallow comments and set the display on the header div to none to get the page to be short enough to trigger the problem though. So, I am hoping then that w/ a header image, a post, comments, and a bulky footer I will pretty much never run into this problem?

    Posted 5 years ago #
  7. saz
    Member

    Hi,
    I got this to work.
    It was really easy (not necessarily best way tho).
    I had to copy footer.php into my child theme directory in order to manually remove the footer div from wrapper div.

    Then add the push div via the functions.php

    function add_push_div() {
    echo '<div class="push"></div>';

    }
    add_filter('thematic_belowfooter', 'add_push_div');

    and similarily, rebuild the <div id="footer"> using the using thematic_after() hook.

    Chris,

    I know that hacking footer.php is not the best way...
    I don't know how to remove <div id="footer"> from the footer.php

    any ideas?

    EDIT: tested on IE 6,7,8 FF3 Safari4 (all on winxp) The footer behaviour is jumpy on IE8 (running as 7), although it is jumpy on the original stickyfooter site too.

    Posted 5 years ago #
  8. Finally this <censored> ........ </censored> German Telco fixed his network and my DSL line is again up and running!

    My code is different from the one on cssstickyfooter.com :)

    .. found it somewhere and changed it for Thematic. I don't like the idea to 'break' or change the markup for getting this sticky footer thing to work.

    .. btw.: I never checked what happens if you set parts of your page to display:none.

    Chris

    Posted 5 years ago #
  9. saz
    Member

    Yes in theory you could set the original footer to display:none; then when you build the new footer with different id/classname display that on the page instead.... But this means repeat code in the document source... hmmm

    Posted 5 years ago #
  10. .. no .. I meant what helgatheviking did to her blog to simulate a short page.

    Posted 5 years ago #
  11. saz
    Member

    Ah sorry yes,
    I did this

    #primary, #content {display:none;}

    in order to simulate a short page.

    S

    Posted 5 years ago #
  12. This worked beautifully for me on FF 3.5.3 (Chris's jQuery and CSS code above that is), it was plug and play all the way! I love the fact that you don't have to modify the markup at all either. I checked it in IE7/8, Safari 3/4 and Firefox 2/3 and it looks good. Thanks for the code!

    - Jonah

    Posted 4 years ago #
  13. kw
    Member

    I'm still having trouble with this. When I add Chris' code into functions.php and add the css bit, the whole page stretches out. The footer is stuck to the bottom, but even long pages have a large gap in between the bottom of the body and the footer. Any ideas?

    Posted 4 years ago #
  14. Hi,

    could you please drop a link?!

    Chris

    Posted 4 years ago #
  15. kw
    Member

    I set it up again and realized it is only happening on the front page of the Thematic Feature Theme, so there must be some conflict there. Unfortunately, the website isn't "live" or installed on its final destination server while I work on it, can I email you the link or post it and you delete it?

    Posted 4 years ago #
  16. Will try it on my local machine.

    Posted 4 years ago #
  17. Got it .. Ian introduced a new div id on the same level like #main. So this needs to be implemented into the script.

    This is the working one:

    function sticky() {
    ?>
    <script type="text/javascript">
    
        jQuery.noConflict();
    
        jQuery(document).ready(function($){
            matchHeight();
    	function matchHeight() {
    		var mainHeight = $("#wrapper").outerHeight() - $("#header").outerHeight() - $("#leader").outerHeight() - $("#footer").outerHeight() - parseInt($("#footer").css("margin-top")) - 1 - parseInt($("#main").css("padding-top"))- parseInt($("#main").css("padding-bottom"));
    		var mainReal = $("#main").outerHeight(true);
    
    		if ((mainHeight + 1 + parseInt($("#main").css("padding-top")) + parseInt($("#main").css("padding-bottom"))) > mainReal) {
    			$('#main').height(mainHeight);
    		}
    	}
    	$(window).resize(matchHeight);
    });
    
    </script>
    
    <?php
    }
    add_action('wp_head', 'sticky');

    Chris

    Posted 4 years ago #
  18. kw
    Member

    Thanks so much, Chris! The footer spacing is working great now, but I had to take out my css that was shifting the #content up because it shifted the footer up from the bottom page the same amount.

    Anyone have any idea how I can move up the content area without moving the footer up with it?

    Posted 4 years ago #
  19. I tried chris's solution above but it didn't work properly for me. It left a space bellow the footer that stayed at the bottom of the window even when scrolling up and down.

    I have made "sticky footers" before but it requires an empty div between the footer and the content (the "clearfooter" method). No such div exists in thematic though and I am unsure of how to go about adding it. Maybe in a future thematic release, an empty div could be added for this purpose? It doesnt seem like it would be a hard thing to do and it would make things a lot easier. Unless there is some new (clean) method of making sticky footers in thematic that I have not heard of yet.

    Posted 4 years ago #
  20. This does not work in IE (quirks mode) I could probably build a quirks mode solution if I figure out how to child theme conditional comments.

    Standards compliant Thematic + StickyFooter

    HTML{
    	height:100%;
    }
    BODY{
    	height:100%
    }
    
    #wrapper{
    	min-height:100%;
    	position:relative;
    }
    
    #main{
    	padding-bottom:86px;
    }
    
    #footer {
    	position:absolute;
    	width:100%;
    	bottom:0;;
    }

    this should work with a fixed width theme also if it's constraining the width of #main:

    #wrapper{
    	width:1024px;
    	margin:0 auto;
    }
    Posted 4 years ago #
  21. marura
    Member

    The ancient :-) Chris's code works great for my child theme of Thematic.
    THANK YOU!

    Posted 4 years ago #
  22. Well...where is the #wrapper??? has it been replaced by #container?

    Thanks

    Posted 3 years ago #
  23. Sorry my bad, I found it ;)

    Posted 3 years ago #
  24. resurrecting this post to 1. say that i was a dummy and that chris's code (first one) does do something.

    and

    2. it isn't quite right however as it sticks the footer to just below the viewport. any thoughts on how to stick the footer to the bottom of the viewport?

    Posted 3 years ago #
  25. Did we ever come up with a solution to this? I'd be mighty MIGHTY curious! Does the answer still lie in adding a function?

    http://josephfrederick.com/photography

    ...Someone suggested adding an empty div between the footer div and the footer content, which I actually have (though I doubt there is a solution there).

    Posted 3 years ago #
  26. anybody want to help me test this? It appears to be working for me in Chrome, FF, IE9 and via IE's dev tools looks like it works back to IE7. there is no accompanying CSS.

    // KIA Sticky Footer
    function kia_sticky() { ?>
    <script type="text/javascript">
    
        jQuery.noConflict();
    
        jQuery(document).ready(function($){
            matchHeight();
    	function matchHeight() {
    
    		//available height of window - #header and #footer
    		var mainHeight = $(document).height() - $("#header").outerHeight() - $("#leader").outerHeight() - $("#footer").outerHeight() - parseInt($("#footer").css("margin-top")) - 1 - parseInt($("#main").css("padding-top"))- parseInt($("#main").css("padding-bottom"));
    
    		//adjust for logged in viewers
    		if($("#wpadminbar").length){
    			mainHeight = mainHeight - parseInt($("#wpadminbar").outerHeight());
    		}
    
    		//height of actual #main content
    		var mainReal = $("#main").outerHeight(true);
    
    		//height of actual $main content + padding
    		var mainPadded = (mainReal + 1 + parseInt($("#main").css("padding-top")) + parseInt($("#main").css("padding-bottom")));
    
    		//if #main is smaller than the available window space, beef up it's height
    		if ( mainPadded < mainHeight) {
    			$('#main').css('min-height',mainHeight);
    		}
    	}
    	$(window).resize(matchHeight);
    });
    
    </script>
    
    <?php
    }
    add_action('wp_head', 'kia_sticky');
    // End KIA Sticky Footer
    Posted 3 years ago #
  27. sergiovieira
    Member

    //available height of window - #header and #footer
    var mainHeight = $(document).height() - $("#header").outerHeight() - $("#leader")

    Where you have #leader do you mean #header?

    Is this supposed to work only when the page is shorter or also when the page is longer and you want to always see the footer?

    Posted 3 years ago #
  28. //available height of window - #header and #footer
    	var mainHeight = $(document).height() - $("#header").outerHeight() - $("#leader").outerHeight() - $("#footer").outerHeight() - parseInt($("#footer").css("margin-top")) - 1 - parseInt($("#main").css("padding-top"))- parseInt($("#main").css("padding-bottom"));

    note that #header is already accounted for. #leader is from one of the thematic child themes (power blog maybe?) if you aren't using that it could probably be deleted. this

    isn't supposed to absolutely stick the footer to the bottom of the screen, it is supposed to push the footer down when the content is too short, so you don't get unstyled space below the #footer. so you should only see an effect on a short page. i'm testing it w/ the full-width template (no sidebar) and 1 line of text in the content.

    Posted 3 years ago #
  29. sergiovieira
    Member

    This works for me:

    I removed all the reference to #leader which I believe was a bug:

    #header").outerHeight()*removed this* - jQuery("#leader").outerHeight() *removed this*- jQuery("#footer")

    changed the $ to jQuery

    // KIA Sticky Footer
    function kia_sticky() { ?>
    <script type="text/javascript">

    jQuery.noConflict();

    jQuery(document).ready(function(){
    matchHeight();
    function matchHeight() {

    //available height of window - #header and #footer
    var mainHeight = jQuery(document).height() - jQuery("#header").outerHeight() - jQuery("#footer").outerHeight() - parseInt(jQuery("#footer").css("margin-top")) - 1 - parseInt(jQuery("#main").css("padding-top"))- parseInt(jQuery("#main").css("padding-bottom"));

    //adjust for logged in viewers
    if(jQuery("#wpadminbar").length){
    mainHeight = mainHeight - parseInt(jQuery("#wpadminbar").outerHeight());
    }

    //height of actual #main content
    var mainReal = jQuery("#main").outerHeight(true);

    //height of actual $main content + padding
    var mainPadded = (mainReal + 1 + parseInt(jQuery("#main").css("padding-top")) + parseInt(jQuery("#main").css("padding-bottom")));

    //if #main is smaller than the available window space, beef up it's height
    if ( mainPadded < mainHeight) {
    jQuery('#main').css('min-height',mainHeight);
    }
    }
    jQuery(window).resize(matchHeight);
    });

    </script>

    <?php
    }
    add_action('wp_head', 'kia_sticky');
    // End KIA Sticky Footer

    Posted 3 years ago #
  30. sergiovieira
    Member

    @helgatheviking I think I missed your reply there, now it makes sense. :)

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.