How To Do This In FW?

Hi Guys,

Does anyone have any suggestions as to how I can make a website like this in Freeway Pro? (The moving sideways thing I mean).

http://www.hazardmedia.co.nz

Look forward to your answers.
Amanda


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

If all you want is to have the web page scroll horizontally then make your page size wider than a browser can display. The browser will automatically generate a horizontal scroll bar.


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

Thanks for your response. Will I also be able to build buttons that give the effect of a new page appearing/loading sideways (as with this site) or will it just be that a scroll bar will become visible giving the option to scroll sideways?


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

I think that these are just Anchor links - just working horizontally rather than vertically.

David


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

I don’t think it are just anchor links because there is an animated transition. But I totally agree this should be possible with anchor links but then you don’t get the slide-effect.


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

Smooth scroll would give you a smoother transition

D


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

Try this:

  1. Make your wide layout as a set of HTML boxes, and make note of the names of the boxes.

  2. Put your scroll to next buttons in between those boxes.

  3. Apply Protaculous to the page, and set the library picker to scriptaculous-packed.

  4. On each scroll button, add a link to the next box’s ID, using the External tab of the hyperlink dialog. It should look like #item6 or similar.

  5. In the same dialog, press Extended, then New. In the Name field, enter onclick and in the Value field, enter the following code (be sure to update each one with the correct id for the next item):

new Effect.ScrollTo('item6');

See if that works. I can’t test this week, because I’m at the beach!

Walter


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

Actually, I’m pretty sure you don’t want the new operator there, just 'Effect.ScrollTo etc.

Walter


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

Last thing: at the end of the code you enter in the value field, put

return false;

That stops the default behavior of the link, which would be to jump directly to the referenced item.

Walter


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

This page http://www.deltadzine.net/test/sidescroll.html is built using the Moo Tools action suite from Weaver http://www.coastalrugs.com/Actions/mootoolssuite.html and specifically the moo:Smooth Scroll action

Create your very wide page with your HTML boxes and the next buttons. Give each box a meaningful name - I have used box1, box2 etc.

Click on your next button and Edit>Hyperlink. Choose external and type in #box1 (or #box2 etc)

Do all the buttons with the appropriate box link.

Apply the action as a Page action Page>Page Actions>moo:Smooth Scrolling to Anchors

Done!

NB moo tools and the standard FW scriptaculous/protaculous based actions should NOT be used on the same page because of conflicts. So if that is a concern then try Walter’s method.

Note that this page uses the CSS3 gradient background action on the HTML boxes so might not be so pretty in a browser without that support.

David


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

Thanks guys, I’ll try this out.


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