[Pro] foot wrapper at the window bottom

Here is another example using a variation on Walter’s method

http://deltadesign.co/FW7Test/sticky-footer.html

This uses jQuery to give the empty (push) Div (that Walter suggested) a height equivalent to the height of the footer.

To get this to work with a FW constructed page does mean more work/markup.

You have to use the Page Div extended action to add the class ‘wrapper’ to the Page Div

You have to insert an empty Div after all your page content and give it the class of ‘push’ - same width as your page elements.

You have to copy the footer html code from a standard published page (making sure it has the class of ‘footer’) and insert it using Page>Html Markup in the before slot and then delete the actual footer Div from the FW page.

You have to include jQuery in your page and also the javascript markup to put it all together.

<script>
	$(document).ready(function(){
		$(window).resize(function(){
			var footerHeight = $('.footer').outerHeight();
			var stickFooterPush = $('.push').height(footerHeight);
		
			$('.wrapper').css({'marginBottom':'-' + footerHeight + 'px'});
		});		
		$(window).resize();
	});
</script>

Not sure how this would all work if you have any WebYep stuff in the Footer - probably wouldn’t! But I don’t think you have any in there.

D


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

Hi Dave,
first of all thank you for your patience.

First, I added the the jquery.tools.min with the extended javascript action in the before section. Then I filled in the class name “wrapper” (without quotes) in the Page Div extended action. Now I created a new class in the style palette / extended (width: 100%) and gave it the name “push”. This class I applied to an empty inflow html element (DIV) I’ve just created inflow. Then the copy of the footer in the markup-section.

Of course it didn’t work and looks like this: http://www.grayfix.at/planc_test/englisch/VERSUCHE/div_test.html

For testing purposes I removed the WebYep stuff.

Please be so kind and help me to get this done (?) …

Greetings

Ray


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

Your problem is - and I didn’t go into all the details of this - that because you have taken the footer element off the FW page all the style information isn’t published to the page.

So you need to add the styles back in or the footer element will have no width etc.

It is not jquery.tools you should be adding but jquery itself ie

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

And this has to be loaded BEFORE the script in my previous post ie

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script>
    $(document).ready(function(){
        $(window).resize(function(){..................etc,

D


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

BTW - I did say there was no EASY solution - Walter’s is probably as easy as it gets.

D


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

Hi Dave,

I am working on it. BTW how much will it cost when I ask you to do this thing for me? If it’s impossible, sorry for that direct question …


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

BTW how much will it cost when I ask you to do this thing for me?

As I rule I don’t offer a paid service to fellow FW users.

D


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

sorry for that


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

You realise that you are spending far more time over this than is justified.

When all you need to do on any page that is short on content (of which I suspect there wont be many) is add that empty div (as Walter suggested) and just give it a min-height to take up some of that space to push the footer down.

D


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

You are soooooo right and when it’s depending on me, I had done it immediately. But if the site owner, my colleague, criticize that the footer is not this way it was before on his static site (www.plancfilm.com), I think I’ll have to make it the complicated way anyhow …

But to come further I make it Walter’s way for now …


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

the site owner, my colleague, criticize that the footer is not this way it was before on his static site

But it is just faked there! Not a sticky footer.

D


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

Yeah, but the content is without the use of web yep or any other CMS as far as I know. So I think the designer could work without such difficulties – just “static” …


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

– just “static” …

Absolutely!

D


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

Yes, but a front-end developer, well versed in the power of the Force (I mean, CSS) could make it work any way, regardless of the content length.

I don’t mean to rub this in, you have explained clearly what your pain point is here (time to learn not available). But when you get a moment, try to remember this and invest some time in learning the basics of CSS, and continue to invest in this learning process. It will pay off handsomely over time, I guarantee.

Walter

On Jan 10, 2016, at 8:38 AM, purity email@hidden wrote:

Yeah, but the content is without the use of web yep or any other CMS as far as I know. So I think the designer could work without such difficulties – just “static” …


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


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

Hi Wald,

I will try. The point is, I’m no professional web designer – as you see – but rather working in a publishing company where I have nothing to do with web. Every now and then I try to make a site for a colleague/acquaintance who runs a business in my spare free time (for the current site my christmas vacation).

But as I said, I’ll try when this is done and the daily routine is coming back after holidays …

Thanks and greets

Ray


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

… I’ll try when this is done and the daily routine is coming back after holidays …

Before you do, a quick question for my own understanding if allowed?

Which height do you plan for your “fixed footer” element?

Cheers

Thomas


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

H Thomas,

the footer itself has something around 278px. I’m afk (but not afiP :wink:). I think it’ll stay with it’s current height.

Greets

Ray


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

… and on a mobile screen where content usually grows in height?

Cheers

Thomas


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

uh, I will check it in the morning and post it immediately if thats okay. machine down and tv on … :zzz:

Greets and a nice evening

Ray


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

Hello Thomas,

here are the requested dimensions. Generally the footer-wrapper ist flexible

heights in freeway: standard: 278px | Tablet 768: 481px | Smartphone: 826px

heights in firefox: standard: 252px | Tablet 768: 399px | Smartphone: 699px

heights in safari: 252px | Teblet 768: 386px | Smartphone: 668px

May I ask you what are those measurements for?

Greets and have a smooth beginning of the week …

Ray


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

May I ask you what are those measurements for?

A height (or width)?

Well - I don’t want to stir up trouble, but it’s the space the footer will take in a viewport.

And here we are:

The height of the footer on small devices is 800px while your viewport has only 480px available? Would you agree, that this is weird?

You guys usually telling us, not having time for working things out. But preferably ask for features and stuff in endless rows of discussion. Even stuff which are sure to fail - from the very first beginning. I read those things, heartily disagree and go on my own way (my wish and attitude for 2016), cause it sucks to discuss “design” with this audience.

So if I’d go on with supporting as used in the past, my first comment on this could have been read as the follow:

If a page doesn’t have enough content, the page is redundant. Rather than finding a “designerish” stupid workaround for this simple matter of fact, remove it or find more content.

This decision takes me three seconds to do!

####To all following this list:

WebDesign is about authoring - not making things pretty. And it’s about UX (user experience). A fixed footer is in the “TOP 3” of breaking both. Even more, a footer (or aside) has semantic meanings these days. Furthermore a users are (as long as the “story” is exciting enough) well aware deciding themselves what content is important or not.

So start concentrate on content! Static content, without “excellent” dynamic features! Because without content you can’t build a page - literally!

Cheers

Thomas


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