Smooth scroll

Freeway
1

I have anchors on my page which work fine. But as soon as I apply the ‘Smooth Scroll’ action to the page, the don’t work at all - they don’t even go to the anchor. As soon as the action is removed from the page, then the anchors work again.

Has anyone else had the SS action working? Demo?

Or know what issue is causing my attempt to break?

Thanks.

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

2

Can you post a link? Have you updated SS to the very latest version (assuming you’re running the latest Freeway)?

Walter

On Mar 8, 2012, at 12:48 PM, BigG wrote:

I have anchors on my page which work fine. But as soon as I apply the ‘Smooth Scroll’ action to the page, the don’t work at all - they don’t even go to the anchor. As soon as the action is removed from the page, then the anchors work again.

Has anyone else had the SS action working? Demo?

Or know what issue is causing my attempt to break?

Thanks.

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

3

Hi Walter

The link is here: http://www.austinwellsdesign.co.uk/rla-staging/tps-test/

Thanks

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

4

Mean’t top say the faint white square boxes are the buttons - it’s a concept at the mo’

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

5

It’s working perfectly here, not seeing any JavaScript errors. I click on any of the white squares and the page lazily drifts up to show the colored box above it. Perhaps you have a cache issue there and you’re getting a different or broken version of the Prototype/Scriptaculous libraries from Google?

Note that SmoothScroll ONLY works vertically. That’s a deliberate design decision on my part.

Walter

On Mar 8, 2012, at 1:02 PM, BigG wrote:

Mean’t top say the faint white square boxes are the buttons - it’s a concept at the mo’

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

6

Ah ok I wanted it to work horizontally which is why it probably is t working.

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

7

Okay, ready to go down the rabbit-hole?

Apply Protaculous to the page, and choose Scriptaculous-packed from the Library picker.

Click on the top Function Body button and paste in the following blob of code:

Element.addMethods({
	sideScroll: function(elm, tgt){
		var elm = $(elm);
		var left = $(tgt).positionedOffset()['left'];
		elm.morph('margin-left: -' + left + 'px;', 
			{duration: 0.5});
	}
});
$('PageDiv').setStyle('overflow-x:hidden')
$$('a').invoke('observe','click',function(evt){
	evt.stop();
	var tgt = this.href.split('#').last();
	$('PageDiv').sideScroll(tgt);
});

Now make sure that you have anchors to each of the elements you want to scroll sideways to, and also make sure that your anchor links are on a layer that has been set to Position: Fixed in Window using the Inspector.

What this does is manipulate the left-margin of the PageDiv (the outermost box that Freeway draws on any page) to move the content of the page left and right. It also overrides the horizontal scrollbar so you don’t see this trickery going on while the page moves. If the page is loaded with JavaScript off, then the page will be really wide, and the anchor links will still work, although they will simply jump to place, not scroll smoothly. Because it disables the scrollbar, it’s important that you provide an anchor that is all the way to the left of the page so the visitor can get “back”.

Walter

On Mar 8, 2012, at 2:41 PM, BigG wrote:

Ah ok I wanted it to work horizontally which is why it probably is t working.

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

8

Forgot one line of code (replace the previous with this):

Element.addMethods({
	sideScroll: function(elm, tgt){
		var elm = $(elm);
		var left = $(tgt).positionedOffset()['left'];
		elm.morph('margin-left: -' + left + 'px;', 
			{duration: 0.5});
	}
});
$('PageDiv').setStyle('overflow-x:hidden')
$$('a').invoke('observe','click',function(evt){
	evt.stop();
	var tgt = this.href.split('#').last();
	if($(tgt))
		$('PageDiv').sideScroll(tgt);
});

Walter

On Mar 8, 2012, at 3:56 PM, Walter Lee Davis wrote:

Click on the top Function Body button and paste in the following blob of code:

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

9

Doesn’t work for me - odd as before it didn’t either. The scroll bar disappears but the buttons don’t work until I remove the protaculous action.

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

10

Can you please post the broken version and send a link?

Walter

On Mar 9, 2012, at 11:08 AM, BigG wrote:

Doesn’t work for me - odd as before it didn’t either. The scroll bar disappears but the buttons don’t work until I remove the protaculous action.

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