[Pro] Smooth horizontal scrolling

I try to create a smooth horizontal scrolling effect in FW6 with SmoothScroll (and without Moo:Smooth Scrolling to Anchors). Info from earlier threads (like the Protaculous Action + code, 19 nov 2012) is not working, everything keeps on snapping to the anchors. Do I have to do something different in FW6?


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

Can you post a link to your page? By itself, the Action works perfectly in 6.1. But your mileage may vary, due to the addition of other Actions or hand-coded JavaScript. One JS error can kill all other effects on the same page, depending on how it’s all written.

Walter

On Sep 27, 2013, at 8:52 AM, Ruud wrote:

I try to create a smooth horizontal scrolling effect in FW6 with SmoothScroll (and without Moo:Smooth Scrolling to Anchors). Info from earlier threads (like the Protaculous Action + code, 19 nov 2012) is not working, everything keeps on snapping to the anchors. Do I have to do something different in FW6?


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


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

Oh wait, I didn’t read your subject or the first line, apparently. SmoothScroll only works vertically. So don’t even try to use it for the horizontal scrolling effect. If you have added it to the page, remove it. But please then post your attempt somewhere so we can see what else you might want to try.

Walter

On Sep 27, 2013, at 8:52 AM, Ruud wrote:

I try to create a smooth horizontal scrolling effect in FW6 with SmoothScroll (and without Moo:Smooth Scrolling to Anchors). Info from earlier threads (like the Protaculous Action + code, 19 nov 2012) is not working, everything keeps on snapping to the anchors. Do I have to do something different in FW6?


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


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

I’m at the start of this project, so it’s just a blank canvas at the moment. I like to create a simple very wide single page website with smooth horizontal scrolling to anchors, and try to work out which Action(s) will do the job!


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

So post a page somewhere public, and send us a link. I’d like to see what you’ve tried so far. I have written a number of these side-scroll pages over the years and posted recipes for doing this in Freeway. I’ll see if I can dig up something recent, but I need to see what you’ve tried so far, so I know where you’re starting (and can see in a debugger where you’re going wrong). The answer is probably something really tiny, really picky, and really not your fault.

Walter

On Sep 27, 2013, at 10:11 AM, Rudolph wrote:

I’m at the start of this project, so it’s just a blank canvas at the moment. I like to create a simple very wide single page website with smooth horizontal scrolling to anchors, and try to work out which Action(s) will do the job!


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


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

Ok, here’s a simple testpage:

http://www.schoolwegwijzer.nl/testpage01.html

and when you think it’s my fault just say so, no problem :wink:


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

Simple solution. Change your page’s DOCTYPE from HTML 4.01 Transitional to XHTML or HTML5. The issue here is that the anchors you have defined in Freeway are coded according to the HTML spec, but my script is expecting them to be ID-based, rather than Name-based. Name is the norm in HTML 4, but XHTML on up use the ID.

Walter

On Sep 27, 2013, at 10:49 AM, Rudolph wrote:

Ok, here’s a simple testpage:

http://www.schoolwegwijzer.nl/testpage01.html

and when you think it’s my fault just say so, no problem :wink:


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


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

Great, thank you very much!
One more question: When clicking the red link box, before scrolling there’s a flash of the blue anchor box. Do you know why this is happening?

http://www.schoolwegwijzer.nl/testpage01.html


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

Sure. It’s because the default anchor behavior is actually working first, then the smooth scroll takes over. To fix this, find this line in the Protaculous script:

if( !! target ){

Press Return and add another line after this one that reads:

evt.stop();

This will stop the default behavior.

Walter

On Sep 27, 2013, at 12:36 PM, Rudolph wrote:

Great, thank you very much!
One more question: When clicking the red link box, before scrolling there’s a flash of the blue anchor box. Do you know why this is happening?

http://www.schoolwegwijzer.nl/testpage01.html


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


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

Perfect, thanks!


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

In most browsers the testpage works fine, but Firefox 21.0 shows the 1st (blue) anchor at the right of the frame, but seems to stop scrolling back before showing the second (purple) anchor on the left (“beginning”) of the frame… Any ideas about this problem?

http://www.schoolwegwijzer.nl/testpage01.html


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

Because the way that you have added your anchor is ambiguous to the browser (not really your fault, just the way that Freeway codes Anchors created with the Anchor tool), the script is actually working perfectly as designed. If you inspect the page with Firefox’s HTML Inspector, or use Firebug, you will see that the anchor “Anchor03” is actually a 0 x 16px rectangle. The much larger purple image is hanging out of it. This is somewhat believable, because the image is positioned float:left and the a wrapped around it is an inline tag, without any layout of its own. Browsers are weird. HTML layout can be ambiguous, and browsers are allowed to make up their own response to something that doesn’t quite measure up in their eyes.

The way around this is to manually create your anchor as a link to #item1 (the red box in the corner of the page). Don’t bother creating the anchors themselves with Freeway’s Edit / Anchor command, just manually note the Name/ID of the element you want to link to within the page, then create an “external” URL to it, prefixed with the # octothorp character. So if you click on the red box, and you see item1 in the Inspector’s Name/ID field, then set up your link to point to #item1. That’s it, no step two, etc.

Note that if you do this on the right side of the screen, you may need to add a phantom element to the right of the thing you want to link to, because you will only be able to anchor over to the left-most edge of the element you name in your link.

Walter

On Sep 30, 2013, at 8:37 AM, Rudolph wrote:

In most browsers the testpage works fine, but Firefox 21.0 shows the 1st (blue) anchor at the right of the frame, but seems to stop scrolling back before showing the second (purple) anchor on the left (“beginning”) of the frame… Any ideas about this problem?

http://www.schoolwegwijzer.nl/testpage01.html


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


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

Great, now we have 2 yellow phantom items to control the position where the scroll stops. The scroll to the left seems to have a sophisticated ease-out effect, while the scroll to the right travels at a linear speed. Do you know how to control the scroll behaviour?


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

Great, now we have 2 yellow phantom items to control the position where the scroll stops

I am sure that Walter was suggesting empty graphic containers that are invisible.

D


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

The scroll behavior should be identical – the default is a sinusoidal curve function, and unless you actually define a transition, that’s the one that gets used. You can try out all of the built-in functions here:

http://madrobby.github.io/scriptaculous/effect-transitions/

Walter

On Sep 30, 2013, at 12:52 PM, Rudolph wrote:

Do you know how to control the scroll behaviour?


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

Thanks!
And of course our little yellow phantom items will be invisible in the future, we just want them to be visible for now to understand the basis structure. We are relatively new to this kind of work and are very grateful for your support!


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