[Pro] I need to learn two new tricks

I’m new to the Freeway and need some help. Could anyone help me to learn how to do 2 of the effects on the example website that is attached?

  1. Where it looks like scrolling down to different web pages, but it one continues page. I would like to make one of pages with a lot of information on it do the same thing.

  2. How do you make the menu static (where it remains at the top the entire time even when scrolling)

Thanks for any help.

Website example: https://dl.dropboxusercontent.com/u/795566/freewaystyle/demos/Monarch/index.html

https://dl.dropboxusercontent.com/u/795566/freewaystyle/demos/Monarch/index.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

SINGLE PAGE DESIGN

You’re referring to a one-page design. That’s easy, you just link to the div’s containing the chapter you want to navigate to (link to the id-name with # as prefix, like #footer). You might want to apply the Smooth Scroll action to the page in order to scroll smoothly to the linked div.
This one was done in Freeway: http://www.tekoopvakantiehuisouddorp.nl

STATIC MENU

This in fact is easy, but how to achieve this depends on your approach. When working with layers, you just select your menu-div, go to the Inspector, and next to the checkbox ‘layer’ select ‘Fixed in window’ from the pop-up:

When you’re working inline, you will need to apply some extended styles to the div, so then you select the div, hit Cmd+Alt+X (Extended window pops up), select the

tab, and insert ‘position’ in the Name field, and ‘fixed’ in the Value field (both without the quotes):

In addition you might want to add an z-index of 999 as well in order to make sure the menu is on top :


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thx for this Richard very helpful

only one glitch with FW7 responsive.
as the page scrolls up there is a 1/4 inch gap at the top of page and the content can be seen, so my question is
is the an additional code for header to stay at the top of page?

thx


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Richard. Very helpful information. I’ll work on them this evening.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

as the page scrolls up there is a 1/4 inch gap at the top of page and the content can be seen

It is likely that you have a style attribute on your fixed item that is causing this ie margin-top?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

thx Dave
and of course there was a top padding on header thx
Its always something
x
C


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Actually it was an empty Paragraph Tag that gets the default margin of 1em top as a browser default.

You have to be very careful when building an inline construction to avoid any empty Ps sneaking in.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Dave… did I miss something here… I did take that empty p out but still there is a gap and the top of albums are cut off


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

sorry I meant that the header is flush to top now but the top of the hero wrapper below that is cut off
thx all
Carla


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes - but you have to allow for the height of the fixed header.

Try making the padding-top of the hero-wrapper1 the same as the height of the fixed header.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

good idea Dave… i had not thought of that logical solution
x
C


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

of course perfect that was the solution. thx for that Dave!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You should also read this article about web page line length re Carlos’ Bio

http://baymard.com/blog/line-length-readability

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oh yes if you are talking about the BIO page… its a temp one… its way to wide and too long. He is editing it…

is that what you meant? If so I already told him it was too much
thx and you are correct as always


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

But hey
the fact that Im actually doing responsive from scratch is a feat in itself considering ha!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options