[Pro] Smooth Scroll

JW-queeste · November 19, 2012, 1:07pm

The SmoothScroll-effect is made with moo:Smooth Scrolling to Anchors.
When i rebuild the effect with SmoothScroll (Scriptaculous/Prototype) it only scrolls vertically.
Is there a way of expanding the Action SmoothScroll so that is also can scroll horizontally?

JW

http://db0nline.home.xs4all.nl/SmoothScroll/Moo/

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

waltd · November 19, 2012, 2:09pm

The Scriptaculous Effect.ScrollTo doesn’t seem to support horizontal scrolling, because the normal browser behavior of anchors (which it hijacks) does not seem to consider horizontal offset in an absolutely positioned layout. I was able to get the page to jump (not slide) to horizontal offsets with the following script, added to the page through Protaculous.

document.on('click', 'a', function(evt,elm){
  var target = $$('#' + elm.href.split('#').last()).first();
  if( !!target ){
    offsets = target.cumulativeOffset();
    window.scrollTo(offsets['left'],offsets['top']);
  }
});

If I can think of a way to make that transition animate, I’ll post it later on.

Walter

On Nov 19, 2012, at 8:07 AM, JohanW wrote:

The SmoothScroll-effect is made with moo:Smooth Scrolling to Anchors.
When i rebuild the effect with SmoothScroll (Scriptaculous/Prototype) it only scrolls vertically.
Is there a way of expanding the Action SmoothScroll so that is also can scroll horizontally?

JW

http://db0nline.home.xs4all.nl/SmoothScroll/Moo/

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

waltd · November 19, 2012, 3:11pm

Okay, here’s the recipe:

Remove SmoothScroll from this page.
Apply the Protaculous Action (latest version). Use the Library picker in the Actions palette to select scriptaculous-packed.
In the top Function Body editor, paste in the following code.

document.on('click', 'a[href]', function(evt, elm){
  var target = $$('#' + elm.href.split('#').last()).first();
  if( !! target ){
    var offsets = target.cumulativeOffset();
    var win = document.viewport.getScrollOffsets();
    new Effect.Tween(
      null, 
      win[0], 
      offsets[0], 
      {}, 
      function(p){ scrollTo(p.round(), win.top);}
    );
  }
});

This will wire all anchors on this page to scroll sideways. It will ignore vertical scrolling altogether.

Walter

On Nov 19, 2012, at 9:09 AM, Walter Lee Davis wrote:

The Scriptaculous Effect.ScrollTo doesn’t seem to support horizontal scrolling, because the normal browser behavior of anchors (which it hijacks) does not seem to consider horizontal offset in an absolutely positioned layout. I was able to get the page to jump (not slide) to horizontal offsets with the following script, added to the page through Protaculous.
document.on('click', 'a', function(evt,elm){
 var target = $$('#' + elm.href.split('#').last()).first();
 if( !!target ){
   offsets = target.cumulativeOffset();
   window.scrollTo(offsets['left'],offsets['top']);
 }
});
If I can think of a way to make that transition animate, I’ll post it later on.

Walter

On Nov 19, 2012, at 8:07 AM, JohanW wrote:

The SmoothScroll-effect is made with moo:Smooth Scrolling to Anchors.
When i rebuild the effect with SmoothScroll (Scriptaculous/Prototype) it only scrolls vertically.
Is there a way of expanding the Action SmoothScroll so that is also can scroll horizontally?

JW

http://db0nline.home.xs4all.nl/SmoothScroll/Moo/

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

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

JW-queeste · November 19, 2012, 4:21pm

The site now snaps to the anchors.
So Smooth Scrolling doesn’t work anymore?

http://db0nline.home.xs4all.nl/SmoothScroll/Proto/

JW

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

waltd · November 19, 2012, 4:33pm

Aah. You’re using a really old version of Freeway, which doesn’t include the Prototype 1.7 library. You can’t use the script I posted. Here’s one refactored for your version of Prototype:

document.observe('click', function(evt){
  var elm = evt.findElement('a[href]');
  if(!! elm){
    var target = $$('#' + elm.href.split('#').last()).first();
    if( !! target ){
      var offsets = target.cumulativeOffset();
      var win = document.viewport.getScrollOffsets();
      new Effect.Tween(
        null, 
        win[0], 
        offsets[0], 
        {}, 
        function(p){ scrollTo(p.round(), win.top);}
      );
    }
  }
});

See if that works.

Walter

On Nov 19, 2012, at 11:21 AM, JohanW wrote:

The site now snaps to the anchors.
So Smooth Scrolling doesn’t work anymore?

http://db0nline.home.xs4all.nl/SmoothScroll/Proto/

JW

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

JW-queeste · November 20, 2012, 11:28am

Yep, I’m still working on a Quick Silver G4.
The hardware stays longer than the software.
I replaced the lines of code.
The horizontal anchors (1 and 2) now sroll smooth.
When anchors 3 and 4 are called, 1 and 2 are still visible.

JW

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

waltd · November 20, 2012, 1:25pm

That depends on how much available screen is to the right of these last anchors. You may need to place an empty HTML box way off to the right to guarantee that you have enough page size to allow scrolling in the largest of browser windows. You cannot anchor right past the end of the page. Try dragging the page any further right with the scroll bar – you’ll find you cannot, unless the browser window is resized down to less than the distance between the furthest right element and the right edge of the page.

Walter

On Nov 20, 2012, at 6:28 AM, JohanW wrote:

Yep, I’m still working on a Quick Silver G4.
The hardware stays longer than the software.
I replaced the lines of code.
The horizontal anchors (1 and 2) now sroll smooth.
When anchors 3 and 4 are called, 1 and 2 are still visible.

JW

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

JW-queeste · November 20, 2012, 3:26pm

About the scrolling-behaviour: The horizontal items seem to limit the vertical ones.
After i placed the HTML box the horizontal positions are improverd.
When i manually scoll from item 1 to item 3 it is possible to get item 3 and 4 automaticly scrolling through the navigation-menu.
But then the scrolling through the navigation-menu to the upper items doesn’t work automaticly.

Strange that it all works well with the MooTools.

JW

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

waltd · November 20, 2012, 3:49pm

Moo is probably set to change both horizontal and vertical positions at once. This variant on SmoothScroll has been hand-hacked to only scroll sideways. (The Scriptaculous Effect.ScrollTo is designed to only scroll vertically.) If you’re sure you want both x and y to animate, I can add that.

Walter

On Nov 20, 2012, at 10:26 AM, JohanW wrote:

About the scrolling-behaviour: The horizontal items seem to limit the vertical ones.
After i placed the HTML box the horizontal positions are improverd.
When i manually scoll from item 1 to item 3 it is possible to get item 3 and 4 automaticly scrolling through the navigation-menu.
But then the scrolling through the navigation-menu to the upper items doesn’t work automaticly.

Strange that it all works well with the MooTools.

JW

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

JW-queeste · November 20, 2012, 4:18pm

That would be perfect. Is it going to be a complete new version of the Action with fields where you can choose what behaviour you want?

JW

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

waltd · November 20, 2012, 4:32pm

Here’s a script that should move both x and y for you.

document.observe('click', function(evt){
  var elm = evt.findElement('a[href]');
  if(!! elm){
    var target = $$('#' + elm.href.split('#').last()).first();
    if( !! target ){
      var offsets = target.cumulativeOffset();
      var win = document.viewport.getScrollOffsets();
      var x = win[0], y = win[1];
      new Effect.Tween(
        null, 
        win[0], 
        offsets[0], 
        {}, 
        function(p){ x = p.round(); scrollTo(p.round(), win[0]);}
      );
      new Effect.Tween(
        null, 
        win[1], 
        offsets[1], 
        {}, 
        function(p){ y = p.round(); scrollTo(x, p.round());}
      );
    }
  }
});

Walter

On Nov 20, 2012, at 10:49 AM, Walter Lee Davis wrote:

If you’re sure you want both x and y to animate, I can add that.

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

waltd · November 20, 2012, 4:33pm

No, it’s still just a Protaculous script you paste in long-hand. What behavior are you talking about here? (Choose X, Y or both? That sort of thing?)

Walter

On Nov 20, 2012, at 11:18 AM, JohanW wrote:

That would be perfect. Is it going to be a complete new version of the Action with fields where you can choose what behaviour you want?

JW

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

JW-queeste · November 21, 2012, 8:57am

Thanks, it works, you are a genius.
Now there are 6 items to choose from.
It’s going to be a single portfoliosite with different items to visit.This is just the navigation-idea. I hope it’s not going to be to heavy to load.

About the behaviour, i indeed meant choosing X, Y or both (when not needed, it saves some code i think).

JW

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