Getting the footer to stick to the bottom of the browser window

Freelancealot commented 9 years ago

Hi, I'm trying to get the footer to stick to the bottom of the browser window instead of appearing halfway up the page when there is only a little content, eg the Front page. I have tried various methods without success. The final method was adding the following javascript to the footer.php just before the <body> tag.

(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);

This does stick the footer to the bottom, but there is an initial jump when it moves to the bottom, and also there is a vertical scroll which seems to be the height of the top bar (which is fixed).

I also tried http://ryanfait.com/sticky-footer/ method but that also did not work. The footer just seems to fix to the bottom of the .content_container div.

Do you have any suggestions on how to achieve a footer that stays at the bottom of the window? I do not want a 'sticky' footer where the content scrolls under the footer.

Thanks for your help.

Cheers, Tracy

tsquez commented 9 years ago

I actually added a sticky footer for a client not sure if it's the same code.

I'll check when I get home as I am away right now. But if the code I provide doesn't work I apologize but I don't have any alternatives for you.

The only thing I can suggest is maybe trying something like WordPress Stack Exchange

On Jan 7, 2015 3:14 PM, "Freelancealot" notifications@github.com wrote:

Hi, I'm trying to get the footer to stick to the bottom of the browser window instead of appearing halfway up the page when there is only a little content, eg the Front page. I have tried various methods without success. The final method was adding the following javascript to the footer.php just before the tag.

(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);

This does stick the footer to the bottom, but there is an initial jump when it moves to the bottom, and also there is a vertical scroll which seems to be the height of the top bar (which is fixed).

I also tried http://ryanfait.com/sticky-footer/ method but that also did not work. The footer just seems to fix to the bottom of the .content_container div.

Do you have any suggestions on how to achieve a footer that stays at the bottom of the window? I do not want a 'sticky' footer where the content scrolls under the footer.

Thanks for your help.

Cheers, Tracy

— Reply to this email directly or view it on GitHub https://github.com/tsquez/wp-forge/issues/28.

Freelancealot commented 9 years ago

Hi,

Just wondering if you're back and had a chance to find that code.

The footer issue is a big one and considering it's a common layout choice it should be much easier to achieve.

Really need to get this fixed asap.

Also, is there a way to get the child theme css in the header after the customised content css, because really the css file should be called before the javascript files. But if I do that the customised css within WP overrides the css I do in the child theme. Any suggestions?

Cheers, Tracy

tsquez commented 9 years ago

Hi Tracy,

Yes I am back and have been back just haven't had the time to help until now. The code I was referring to is the same code you are using however there is no "jump" like you describe. This is how I implemented mine.

I created a file and called it sticky-footer.js and the contents of sticky-footer.js look like this:

// Sticky Footer
    jQuery(window).bind("load", function () {
        var footer = jQuery("#sticky-footer");
        var pos = footer.position();
        var height = jQuery(window).height();
        height = height - pos.top;
        height = height - footer.height();
        if (height > 0) {
            footer.css({
                'margin-top': height + 'px'
            });
        }
    });

then opened up the functions.php file of my child theme and added the following:

wp_enqueue_script( 'sticky-footer-js', get_stylesheet_directory_uri() . '/js/sticky-footer.js', array('jquery'), '', false );

The I opened up footer.php and added <div id="sticky-footer"> around the footer container, so now it looks like this:

    <div id="sticky-footer">
        <footer id="footer" class="row" role="contentinfo">
            <?php get_template_part( 'content', 'footer' ); ?>
            <div class="medium-12 large-12 columns">
                <?php get_template_part( 'menu', 'social' ); ?>
            </div><!-- social-menu -->        
        </footer><!-- .row -->
    </div><!-- #sticky-footer -->

So far it seems to be doing what its supposed to be doing and there is no "jump" like you stated.

In regards to your question about the child theme css, you need to do a search for code priorities. This should give you everything you need to get the css where you want it. Besides I do not see why you are using customized style sheets when all you need is the child theme style sheet

Freelancealot commented 9 years ago

Hi,

Thanks for the code. I will try the wrapper around the footer.

FYI. I just did some other stuff and now the jump is ONLY appearing on the Front page. I cannot find anything on there that is causing the jump. I have tried without the icon menu in case that was doing it, but still the jump. I've tried all sorts of things to stop the jump on the Front page but nothing seems to work. So I will try your code to see if that helps.

"In regards to your question about the child theme css, you need to do a search for code priorities. This should give you everything you need to get the css where you want it. Besides I do not see why you are using customized style sheets when all you need is the child theme style sheet"

I don't really understand what you mean about a 'search for code priorities', this is all getting a bit beyond my knowledge of Wordpress. Is there anyway you could tell me how to do that?

Yes exactly, I do not need to use the customiser, but how do I disable it? Even when I put everything to default in the customiser, it still puts CSS on the header section below the javascript. I want to stop it doing this so that it just uses the child theme style sheet. How do I do that?

Cheers, Tracy

tsquez commented 9 years ago

Tracy,

Also, is there a way to get the child theme css in the header after the customised content css, because really the css file should be called before the javascript files. But if I do that the customised css within WP overrides the css I do in the child theme. Any suggestions?

The child theme style was loaded in the the header before the javascript files. You stated that you had modified the css to appear "after" the customizer css (this was in your previous issue about the site loading slowly). Here is the link to that issue: https://github.com/tsquez/wp-forge/issues/27 and you stated that in your second comment.

This is the what the page source looks like when you are using WP-Forge and WP-Starter together:

styles

So if you undo what you did to move the css to after the customizer, it should go back to its original position.

The child theme stylesheet can overwrite the customizer styles by simply adding !important to the element. This is why I removed !important from WP-Forge itself so users could add those declarations themselves if needed.

And I apologize, I didn't mean code priority, I meant script priority. This means that when you enqueue a script in functions.php you can give that script priority, meaning the order in which it is processed. A really good example of this is in WP-Starter's functions.php file.

You will see that I have a function called wpstarter_scripts_styles on or around line 53 and the end of that function looks like this:

add_action( 'wp_enqueue_scripts', 'wpstarter_scripts_styles', 100 );

the 100 sets the process priority to the last in line basically. If you give a script a priority of 0 then that script has the highest priority.

As I stated above, if you undo what you did to move the style sheet to after the customizer css you wont need to worry about setting a priority.

Freelancealot commented 9 years ago

Thanks, that helps me a lot and makes sense.

I've been doing so much trouble-shooting with the footer I've forgotten exactly what I did with the stylesheet! I think I just manually added the call to the child stylesheet in the header.php. So if I just remove that completely, will it be back to how it was? Or do I need to enqueue it in child theme functions.php?

Thank you so much for your patience.

Cheers, Tracy

tsquez commented 9 years ago

I could take a look but when I try to view the demo site it gets redirected to the login screen. Anyway you could make an admin account for me and send me the details? You can email them to me tsquez at gmail dot com

Freelancealot commented 9 years ago

Hi Thomas,

I reloaded a saved version of the le-phare-blue child theme and the site is now back up.

I've removed the call to the child theme css in the header, and added !important to the the child theme css, which as you say, has overridden the customiser CSS. So brilliant, I'm back up and running on that front.

I have now implemented all the parts of your sticky footer solution. But still getting the jump on the Front page---it's so strange.

Also, still getting the strange behaviour in the HTML editor when trying to type a post or page. Like the page is trying to scroll up all the time as I type. I thought it may be something to do with the Foundation Shortcodes plugin so I deactivated it, but it made no difference. Any ideas?

Cheers, Tracy

From: Thomas Vasquez notifications@github.com Reply-To: tsquez/wp-forge <reply+009e4fa57c915a8163812966e82699c0a3d2117895271f2292cf0000000110c794459 2a169ce03333ba5@reply.github.com> Date: Fri, 09 Jan 2015 05:06:13 -0800 To: tsquez/wp-forge wp-forge@noreply.github.com Cc: Tracy Shorrock info@freelancealot.co.uk Subject: Re: [wp-forge] Getting the footer to stick to the bottom of the browser window (#28)

Hi Tracy,

Yes I am back and have been back just haven't had the time to help until now. The code I was referring to is the same code you are using however there is no "jump" like you describe. This is how I implemented mine.

I created a file and called it sticky-footer.js and the contents of sticky-footer.js look like this: // Sticky Footer jQuery(window).bind("load", function () { var footer = jQuery("#sticky-footer"); var pos = footer.position(); var height = jQuery(window).height(); height = height - pos.top; height = height - footer.height(); if (height > 0) { footer.css({ 'margin-top': height + 'px' }); } });
then opened up the functions.php file of my child theme and added the following: wp_enqueue_script( 'sticky-footer-js', get_stylesheet_directory_uri() . '/js/sticky-footer.js', array('jquery'), '', false );
The I opened up footer.php and added
around the footer container, so now it looks like this:

So far it seems to be doing what its supposed to be doing and there is no "jump" like you stated.

In regards to your question about the child theme css, you need to do a search for code priorities. This should give you everything you need to get the css where you want it. Besides I do not see why you are using customized style sheets when all you need is the child theme style sheet

‹ Reply to this email directly or view it on GitHub https://github.com/tsquez/wp-forge/issues/28#issuecomment-69331729 .

tsquez commented 9 years ago

Closing this issue as it has moved to email

Freelancealot commented 9 years ago

Hi,

The Menu I have is far too long to work on mobile devices so I need to get the drop downs to close up and only reveal on click, i.e. Implement the off-canvas multilevel menu as per the instructions on Foundation's page http://foundation.zurb.com/docs/components/offcanvas.html

Also wondering if it's possible to implement this https://scotch.io/tutorials/off-canvas-menus-with-css3-transitions-and-trans forms So there would actually only be one item on the menu, titled 'Menu' on all screens then the off-canvas appears on slick with the multilevel menu.

I have no experience with 'walkers'; I did have a look at the WP-Forge functions.php file and though it might be possible to change 'flyout' to 'submenu' but that just caused an errors.

Any ideas?

Cheers, Tracy

tsquez commented 9 years ago

Hi Tracy,

I need to see what you are talking about. I do not have the details of the site you sent me previously. Can you send those to me again please.

I'm sure the multilevel can be added I would just have to look into it and see how to accomplish it and I don't know how long it would take me.

And if I am understanding you correctly about the off-canvas menu, you want it to appear even on desktop view?

Freelancealot commented 9 years ago

Hi Thomas,

The menu does work on mobile devices, you just need to scroll, but I figure if I can get the multilevel menu working that would minimise the scrolling on mobile phones.

The second idea was to have the whole menu on the off canvas to release space on the top bar for social media icons, search or whatever on large screen.

If I knew what to change on the nav walker I'd do it myself, but I just couldn't figure it out.

The site is at (removed)

It still seems really slow to load the initial page sometimes, so would be interested to hear if you have the same issue.

I don't want the logins to go on the Forum, so can I send those via email separately? Let me know what address to use.

Cheers, Tracy

tsquez commented 9 years ago

No need to send the login info, I had the link bookmarked and you had created a login for me previously.

Like I said, I believe it can be done, however I will have to look into modifying the walker. I didn't create it, so Ill have to tear it apart to fully understand it and then and only then will I be able to figure out what to do.

This of course is if I have the time for it. I am currently rebuilding the theme customizer of WP-Forge and I am still waiting for the theme to be reviewed (even though it was assigned a reviewer three weeks ago. I still haven't heard anything),

Unfortunately this is not a priority for me sorry. I will look into it and see what I can do but I cannot promise a time frame or a guarantee that I will get it done in a timely manner.

The site looks nice by the way, you have done a lot of work on it. It loads fine for me.

Freelancealot commented 9 years ago

Hey Thomas,

Thanks for getting back to me.

Completely understand it's not a priority. If you do get it working, that would be great and perhaps you could put in the next version of WP-Forge as an option. I hope you hear soon from the theme reviewers.

Good to hear it loads fine for you. And also thanks for the compliment, I hope I have done WP-Forge proud :)

I have not updated to the latest version of WP-Forge as yet. As I have not edited any of the files, I just edit the ones in the Starter child theme, do you think it would be okay to update the WP-Forge theme?

I'm launching the site tomorrow, so if it would cause issues I will probably leave it for a couple of weeks for the site to settle in it's new home, then I can do the upgrade on the test server.

[BTW I may have changed the password on the FTP account I set up for you as I had a security issue a few weeks back with another site and I just went through and changed all the passwords on that hosting account.]

Cheers, Tracy

tsquez commented 9 years ago

Not a problem at all and yes I am thinking about adding this as a feature to WP-Forge, very good idea, thank you for the inspiration :wink:

No need to update WP-Forge, I would wait for the official release on WordPress.org and also because Foundation is currently in the midst of a major overhaul (Foundation 6) and will be released shortly (hopefully) So I think you should be good to go with your site launch.

And no worries about the FTP pass, if I need it I will just ask yah for it. Good luck with the new site tomorrow. Please let me know how it goes.

Freelancealot commented 9 years ago

Hi Thomas,

Have been playing around with this piece of script Š needless to say, I haven't yet got it working :D but I thought it may be useful for you when you get round to looking at solutions.

I sense I'm close, and yet very far away from a solution.

Cheers, Tracy

baringji commented 9 years ago

I don't know if the footer was fixed already but have you tried doing something like this?

#sticky-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Also you typekit fonts loads slow. You might add caching or try other way of loading it.

Edit: change absolute to fixed.

tsquez commented 9 years ago

Awesome suggestions Jofil :wink:

via my phone On Feb 15, 2015 6:29 AM, "Jofil Inoc Baring" notifications@github.com wrote:

I don't know if the footer was fixed already but have you tried doing something like this?

sticky-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Also you typekit fonts loads slow. You might add caching or try other way of loading it.

— Reply to this email directly or view it on GitHub https://github.com/tsquez/wp-forge/issues/28#issuecomment-74417431.

Freelancealot commented 9 years ago

Hi,

Wouldn't absolute positioning mean that it was 'fixed' to the bottom of the screen and so the main content would flow under the footer? That's not want I wanted. I just wanted the footer to be at the bottom of the browser window when the rest of the page's content is short---ie, to stop the footer displaying half-way up the page when there's little to no content. I'll give it a go tho'.

I used the javascript method, but I don't think it's the best way to do it, a CSS approach would be better.

I have been having a loading issue with getting to the site so thanks for the head's up. I will check the typekit fonts---as far as I'm aware I'm using Adobe Edge Fonts, which should load quick. I'll see what other 'typekit' fonts are being loaded.

I don't know if the footer was fixed already but have you tried doing something like this?

sticky-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Also you typekit fonts loads slow. You might add caching or try other way of loading it.

Cheers, Tracy

tsquez commented 9 years ago

going to close this issue

ThemeAwesome / WP-Forge

Getting the footer to stick to the bottom of the browser window #28

sticky-footer {

sticky-footer {