Tuesday, March 13th, 2007
Auto scrolling page navigation with $$
Tobie Langel likes a fistful of dollars and uses them to explain how to use auto scrolling page navigation with the new $$ operator in Prototype 1.5.1 RC.
The article takes the initial:
HTML:
-
-
<a href="#about" onclick="new Effect.ScrollTo('about',{offset:-140}); return false">About</a>
-
and gets it down to the unobtrusive:
HTML:
-
-
<a href="#about">About</a>
-
and the nice new support for CSS 3:
JAVASCRIPT:
-
-
Event.observe(window, 'load', function() {
-
$$('a[href^=#]:not([href=#])').each(function(element) {
-
element.observe('click', function(event) {
-
new Effect.ScrollTo(this.hash.substr(1));
-
Event.stop(event);
-
}.bindAsEventListener(element))
-
})
-
})
-
Check out the auto-scrolling demo to see it in action.
3.9 rating from 59 votes
Sweet ! It seems to be easy to port it to mootools or other frameworks.
i think we all ready to add ppk events in prototype.js (like it’s already done by http://www.danwebb.net/lowpro/ ) to RIGHT handle events in Safari (to handle Event.stop)…
becouse this example again don’t work in Safari yeah…
i mean http://projects.danwebb.net/wiki/LowPro
Vital: which version of Safari are you using ?
This is working for me both in Safari 2.0.4 and in WebKit.
What the hell are you talking about Vital, it works fine in Safari.
Great article on the power of Prototype’s revamped $$.
@ Boris Popoff : this functionality is already available in mootools : the plug-in SmoothScroll
ok, i get it, so much developers has latest version of Safari and don’t think about a bit old version…
anyway article is great! ;)
Vital, could you let us know which version of Safari you are running ?
2.0.1, 2.0.3 of course it work in latest 2.0.4
nevermind
MooTools already has this. It’s known as SmoothScroll.
for mootools, SmoothScroll takes document.links, is a lot faster then $$:
How to use …
new SmoothScroll();
Thats easy ;) It also works on Safari. The shown example here is also a bad pattern because it does not set the url fragment correct. Page scrolls but url fragment does not change as expected.
Ok guys, we get it mootools has something similar, but the author wasn’t trying to replace mootools with this, simply showing the power of $$(), Prototype 1.5.1rc2 has tons of awesome features, why dwell on a lacking novelty like smoothScroll. Also please read the previous posts, the herd of mooTools users sound like a broken record.
Is there some real benefit from this? I’d like to point out that the actual functionality has been around since, what, like 1993? So we’re doing what here, slowing the process down? Why?
And what’s next? Simulated page loading?
@ CrackWilding: As I’ve mentioned in my post, on a UI perspective, this is IMHO better, as it clearly shows the user if he is taken further down the page or back up.
Nitpicking: As you said in http://ajaxian.com/archives/prototype-151-release-candidate-released, the $$ operator is not new in 1.5.1, it just got a lot faster, and it now fully supports CCS3, so now it an be more easily used.