[Pro] Add Sticky footer JS

Freeway
1

Hello all,

once again a question about a sticky footer …
What do I have to do to integrate the following js into my freeway page.
I added the two script links bevor /body (the footer js with the correct path) and called the footer “footer”. I fiddled around a bit, but can’t get it to work. Do I have to add some extra attributes or is something else missing …
A “little help” would be appreciated. Maybe somebody can guide me to the right direction …

That’s the script: GitHub - engageinteractive/sticky-footer: Very simple sticky footer jQuery plugin

Thanks in advance

Ray

http://www.grayfix.at/SF_test/

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

You have given your footer the Class of .footer - it should be just footer ie

Item > Extended Name = Class, Value = footer

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

3

Though after closer examination I am not sure that this script will work with your page construction - why did you pick this script in particular?

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

4

Hi Dave,

thanks for your answer. I corrected the values like you’ve said, but it also do not seem to work.

First I try to find a free-way to get the footer sticky (with the help of this forum), but didn’t get it done (www.plancfilm.com). Now if the site is online, I’m trying to optimize this extemporary solution and this script looked “easy” on the first sight …

greetz

ray

freewaytalk mailing list
email@hidden
Update your subscriptions at:

5

and this script looked “easy” on the first sight …

Yes but I think it requires a certain basic page construction method.

I will have a closer look at your page later and see if we can offer an alternative or fix.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

6

Hi Dave,

that would be great! Thank you in advance

greetz

ray

freewaytalk mailing list
email@hidden
Update your subscriptions at:

7

This uses a pure CSS solution

http://www.deltadesign.co/plan-c/plan-c.html

However I am not sure how easy this will be to retrofit to your FW page.

Can you copy this page from your FW doc (select it in the site sidebar, copy) and paste it into a new Blank FW doc.

Then Save > Archive and zip the archive and email/dropbox it to me.

You will get my email at my People page

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

8

Hello Dave,

looks perfect, thanks a lot!
Here’s the link to the freeway doc: Dropbox - Error - Simplify your life

I’m just not sure what you mean with your “people page”. Can you plz send me the link?

Thanks in advance

Ray

freewaytalk mailing list
email@hidden
Update your subscriptions at:

9

I’m just not sure what you mean with your “people page”.

If you are viewing FWT online there is a Tab down the left that links to People - my entry has my contact details.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

10

Here’s the link to the freeway doc

That was fine as far as it goes but because you Did Not Save > Archive none of your graphic files were included.

I’ll see what I can do with it.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

11

Oh sorry, replaced the file with the archive: Dropbox - Error - Simplify your life

freewaytalk mailing list
email@hidden
Update your subscriptions at:

12

OK - try this - another JS solution.

Add this via Page > HTML Markup replacing anything you have already in the Before end Body section

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(window).bind("load", function () {
    var footer = $("#footer");
    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>

freewaytalk mailing list
email@hidden
Update your subscriptions at:

13

Hi Dave,

have to go to work. Will try it in the evening.
Thanks a lot for now :wink:

Gretes

Ray

freewaytalk mailing list
email@hidden
Update your subscriptions at:

14

Hello Dave,

I replaced the script as you said and first the footer sticks at the bottom, but if the window will be resized in height, the footer won’t follow … unfortunately

greetz

ray

freewaytalk mailing list
email@hidden
Update your subscriptions at:

15

Remember that the window will open at a certain size and the footer will stick.

It is not normal to resize the window once it is open but if you refresh it will stick again.

So the script will work for devices of any size - try it on iPad/iPhone etc

Meanwhile I am looking into the CSS only version and implementing it on your page.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

16

Yes, you’re right. I’ll also take a look at iPad and Phone. Thank you for the help!
A CSS version would be fine too – if you’ve one by the hand

As everytime best support on this forum!

greets and a nice evening

ray

freewaytalk mailing list
email@hidden
Update your subscriptions at:

17

one short question: the element’s extended value “footer” isn’t needed for your script, is it?

freewaytalk mailing list
email@hidden
Update your subscriptions at:

18

Here is another version that will rerun the script on browser resize - may be performance issues on resize.

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function () {
    updateFooter();
    $(window).resize(function() {
        updateFooter();
    });
});
function updateFooter() {
    var footer = $("#footer");
    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 element’s extended value “footer” isn’t needed for your script, is it?

No - because this script uses the footer’s ID of footer and not the class.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

19

Hi Dave,

awesome, it works on desktop and with iPhone (Paddy get tested tomorrow). Great stuff! What difference would be between this and the CSS solution?
Thank you so much!

Greetz

Ray

freewaytalk mailing list
email@hidden
Update your subscriptions at:

20

Have a look - there are some issues (with the CSS version) and the AutoClearfix (FW7) action so I have disabled it.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at: