[Pro] foot wrapper at the window bottom

Hi all!

Is in an inflow page a way to make the foot wrapper stick at the bottom of the browser window when the content wrapper doesn’t need the whole height?


freewaytalk mailing list
email@hidden
Update your subscriptions at:

It is one way - there are many.

Tell us more about what you are trying to achieve.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi Dave,

I’m looking for a solution that keeps the foot wrapper on the bottom of the window.

For example on this page: www.grayfix.at/planc_test/german/filme.php the black stripe with the address etc. (that’s my foot wrapper) should be at the windows vertical end. When the content is longer than the window height than the footer should be on the page’s bottom as usual (like here: www.grayfix.at/planc_test/index.php). Better that way?

greets

ray


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I’m looking for a solution that keeps the foot wrapper on the bottom of the window.

Sure - I understand that but as I said there are many ways to tackle this problem.

With or without JavaScript?

What level of Browser support?

How important is it to you because of all the methods that are out there not all of them work in every Browser.

If you are looking for a one click action based solution then you won’t get one. The closest you will get to that is at Make A Footer

But it has its problems.

For me I would choose a JavaScript based solution unless Browser/Old IE was not Important when I would be inclined towards FlexBox.

D


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

Hello Dave,

thanks for your response.

Unfortunately I’m not into code writing, so if there’s not a ready JS I think I can’t write a script on my own.

My first thought was also the make footer action, but I think it only works with layers. As I positioned the three elements, the wrappers which contain the other items, with the textcursor into the page to make it inflow I think there are no layers(?)

If it’s possible the method should be fine with the common browsers …

Greets
Ray


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I’m not into code writing, so if there’s not a ready JS I think I can’t write a script on my own.

And you wouldn’t have to as this is a problem that has many ready made solutions out there.

Just Google for ‘Sticky Footer javascript’ and you will come up with half a million results - take out ‘javascript’ and there are 1/2 million more.

But depending on which method you decide on will likely depend on your page construction.

D


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

Hi Dave, that’s what I did. Unfortunately all of them seem to have a fixed height. My inflow foot wrapper ist flexible because of the responsivity.

Sorry for those silly questions, but I really have no clue with scripting or coding … speak only a little html … that’s why I use Freeway

greets


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Unfortunately all of them seem to have a fixed height.

There are many that cater for Responsive/flexible height designs - here is just one

If you want this feature bad enough then it is worth the effort.

Here is an example of mine (built in FW) that uses FlexBox - http://www.deltadesign.co/FW7Test/fb-pages/flex-footer-test.html

Unfortunately if you want more advanced features in a site then you have to ‘get out and push’ and if you don’t know how then it is worth learning as you will be able to re-use that knowledge.

D


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

Hi Dave,

thank you very much for this example!

It is not that I don’t want to learn, but in this case the time is missing.

I make this page for a colleague of mine for her business and it should be finished this weekend. Yesterday I uploaded it and filled it with content for presentation, since then all those troubles come up …


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hello,

now I made a style called “footer position” with the extended values position: absolute | bottom: 0 | width: 100% | clear: both and applied it to the container box.
Now the footer sticks on the browser windows bottom, but if the page is longer, the footer overlaps the content as on www.grayfix.at/planc_test/

By playing with the windows size and scrolling, the footer stays somewhere in the middle …


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Absolute position is relative to the viewport, not the page. If you need to reserve some space in the bottom of your flexible page, just insert an empty DIV in the page flow below all your other content. Make it the same height as your footer (or slightly taller) and the illusion will be complete. Remember that older Android devices will see a dog’s breakfast (as will MobileSafari 4 or lower, of which there are maybe 4 devices total still running). Desktop browsers will be very happy with this solution.

Walter

On Jan 9, 2016, at 10:33 AM, purity email@hidden wrote:

Hello,

now I made a style called “footer position” with the extended values position: absolute | bottom: 0 | width: 100% | clear: both and applied it to the container box.
Now the footer sticks on the browser windows bottom, but if the page is longer, the footer overlaps the content as on www.grayfix.at/planc_test/

By playing with the windows size and scrolling, the footer stays somewhere in the middle …


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


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

Hi Walter,
Did I get you right to make an empty div below the footer? On this sites are WY loop elements which will make the body height grow and when the browser window has to be scrolled the footer should be close to the end of the body. I hope i could suggest it right …

Greets

Ray


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi Dave,

if it doesn’t bother, can you please send me the freeway file of your sample that I can take a look at it?

Greets

Ray


freewaytalk mailing list
email@hidden
Update your subscriptions at:

My sample uses FlexBox and I dont think that you want to recode all your pages to use FlexBox which is NOT supported in older versions of IE!

My point was simply that there are MANY ways to approach this age old problem.

Walter has offered you one that will be far easier/quicker for you to implement.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi Dave, as it seems I don’t get Walter. I’m waiting for his response. In-between I will try to find a solution :cold_sweat:
Thank you for your help!!!


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I thought his instructions were fairly clear.

just insert an empty DIV in the page flow below all your other content. Make it the same height as your footer (or slightly taller) and the illusion will be complete.

D


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

Hello Dave,

so far you see that I’m really unexperienced. What I don’t understand or do not know how to do is to make an empty DIV. Should i insert a Markup element?

And then, should i place it in flow (with the blinking text cursor) UNDER the footer?

excuse this stupid questions …

greets

ray


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Insert html item in the same way that you have created the footer. Give it a height equivalent to the footer.

Easiest way to do this is to select the footer Div. Use the left arrow key (up,down,left right) to move the cursor before the ‘footer’ then Insert>Html Item. Width = 100%, height = same as actual footer.

Try it on a copy of one of your other pages.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi Dave, okay, get it, before the footer. The passage “below all other content” (for me the footer is content too) confused me. I’m not sure if this is the proper solution for me because the content will get longer – the small boxes are a web yep loop and after 6 or 8 boxes are made, the gap between footer and content would be too big. It should be like on the index page.

greetings

ray


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I’m not sure if this is the proper solution for me because the content will get longer – the small boxes are a web yep loop and after 6 or 8 boxes are made, the gap between footer and content would be too big.

Remember that if you do this in conjunction with the style that you have already tried

the extended values position: absolute | bottom: 0 | width: 100% | clear: both

Then the biggest the gap will be is the height of the footer.

D


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