38 ms·

JQuery Waypoints - execute a function whenever you scroll to an element

196 points by moeffju 16y ago

shib71 16y ago
Nicely modular functionality. Would be even better if the events were implemented as actual jQuery events.
- moeffju 16y ago
  They are: Calling .waypoint with no parameters will register the elements as waypoints using the default options. The elements will fire the waypoint.reached event, but calling it in this way does not bind any handler to the event. You can bind to the event yourself, as with any other event, like so: someElements.bind('waypoint.reached', function(event, direction) { // make it rain }); Calling .waypoint with a function is just a shortcut for that.
sramam 16y ago
cool use of waypoint scrolling to mimic tab traversal on the homepage.
- tjarratt 16y ago
  I especially appreciated how, when going from the top of the page down to the bottom, the middle tab would show the down-state briefly, while the browser scrolls to the bottom.
skilesare 16y ago
This didn't work on my iPhone. I wish it had.
- Swizec 16y ago
  That's because you weren't scrolling. Mobile Safari parses websites as a big canvas and then pretends the screen is a window through which you're looking at the canvas. What you think of as scrolling, the browser thinks of as moving the canvas around (or the window depending on point of view). Because of that, no scroll events ever get fired. Even :fixed doesn't behave as expected.
joebananas 16y ago
Cool and all, but... It's stuff like scroll analytics that keep NoScript in my list of must-have addons. That kind of stuff is just super creepy in a working-for-the-feds-in-snow-crash kind of way.
chrisbroadfoot 16y ago
Is it just me or does this feel really slow?
- axod 16y ago
  Fits right in with jquery. Then in the next version they can announce it's 2000% faster.
  - tjarratt 16y ago
    First you make it work, then you make it perform well. What, you were expecting the first code they wrote to be perfect?
    - axod 16y ago
      Attaching code to scroll events will never be a good idea. Infinite scroll will never be a good idea.
      - roel_v 16y ago
        "Infinite scroll will never be a good idea." I very much disagree. It's an awesome way to capture the reader. I love it myself, not needed reloads, hunting for 'next' buttons, ... Yes you lose the relative position on the page indicator from the scroll bar, but it's irrelevant by the time you get to the bottom of the page anyway.
        Sharlin 16y ago
        You also lose all indication of the total content length, which is IMHO a bad thing in many contexts.
        wladimir 16y ago
        If the content is not truly infinite (#comments known?), just very large, you could solve the scrollbar issue by giving the page the right vertical size (or an estimation), but only populating the HTML if the user scrolls somewhere.
some1else 16y ago
Useful idea, although the implementation makes Safari stutter on a CoreDuo MacBook. I didn't check the internals, but I have a feeling that some value checks would benefit from caching. Either way, I wouldn't deploy this just yet. But I also wouldn't deploy a PNG background that's position: fixed, because I remember it crippling old versions of Firefox on Windows.. I guess it depends, but us users with slow computers avoid websites that point out the fact that we haven't upgraded for 4 years.. I think the web is most definitely the one place where you can't presume everyone is on par with Moore's law. You just can't increase performance requirements according to your workstation (at least not on the client-side). Remember any leet Flash websites from 2001 (besides 2advanced, err) where the stop-motion effect would reveal your CPU's inferiority to the developers machine? Exactly, me neither (there were a lot of them though). I hope the plugin takes off, but it won't happen until it performs. Making websites slow on old computers is much like making type too small for the visually impaired.
- imakewebthings 16y ago
  The elements and everything used during the scroll checks is in fact cached (which you'll be able to verify by looking at those internals you mention) and throttled per my comment below. As another commenter pointed out, the project page itself is full of drop shadows, text shadows, and css3 gradients, and opacity. Those are probably slowing you down way more than the plugin. Do you see the same performance problem from the relatively unstyled examples?

196 points by moeffju 16y ago

shib71 16y ago

Nicely modular functionality. Would be even better if the events were implemented as actual jQuery events.

moeffju 16y ago
They are: Calling .waypoint with no parameters will register the elements as waypoints using the default options. The elements will fire the waypoint.reached event, but calling it in this way does not bind any handler to the event. You can bind to the event yourself, as with any other event, like so: someElements.bind('waypoint.reached', function(event, direction) { // make it rain }); Calling .waypoint with a function is just a shortcut for that.

sramam 16y ago

cool use of waypoint scrolling to mimic tab traversal on the homepage.

tjarratt 16y ago
I especially appreciated how, when going from the top of the page down to the bottom, the middle tab would show the down-state briefly, while the browser scrolls to the bottom.

skilesare 16y ago

This didn't work on my iPhone. I wish it had.

Swizec 16y ago
That's because you weren't scrolling. Mobile Safari parses websites as a big canvas and then pretends the screen is a window through which you're looking at the canvas. What you think of as scrolling, the browser thinks of as moving the canvas around (or the window depending on point of view). Because of that, no scroll events ever get fired. Even :fixed doesn't behave as expected.

joebananas 16y ago

Cool and all, but... It's stuff like scroll analytics that keep NoScript in my list of must-have addons. That kind of stuff is just super creepy in a working-for-the-feds-in-snow-crash kind of way.

chrisbroadfoot 16y ago

Is it just me or does this feel really slow?

axod 16y ago
Fits right in with jquery. Then in the next version they can announce it's 2000% faster.
- tjarratt 16y ago
  First you make it work, then you make it perform well. What, you were expecting the first code they wrote to be perfect?
  - axod 16y ago
    Attaching code to scroll events will never be a good idea. Infinite scroll will never be a good idea.
    - roel_v 16y ago
      "Infinite scroll will never be a good idea." I very much disagree. It's an awesome way to capture the reader. I love it myself, not needed reloads, hunting for 'next' buttons, ... Yes you lose the relative position on the page indicator from the scroll bar, but it's irrelevant by the time you get to the bottom of the page anyway.
      - Sharlin 16y ago
        You also lose all indication of the total content length, which is IMHO a bad thing in many contexts.
        wladimir 16y ago
        If the content is not truly infinite (#comments known?), just very large, you could solve the scrollbar issue by giving the page the right vertical size (or an estimation), but only populating the HTML if the user scrolls somewhere.

some1else 16y ago

Useful idea, although the implementation makes Safari stutter on a CoreDuo MacBook. I didn't check the internals, but I have a feeling that some value checks would benefit from caching. Either way, I wouldn't deploy this just yet. But I also wouldn't deploy a PNG background that's position: fixed, because I remember it crippling old versions of Firefox on Windows.. I guess it depends, but us users with slow computers avoid websites that point out the fact that we haven't upgraded for 4 years.. I think the web is most definitely the one place where you can't presume everyone is on par with Moore's law. You just can't increase performance requirements according to your workstation (at least not on the client-side). Remember any leet Flash websites from 2001 (besides 2advanced, err) where the stop-motion effect would reveal your CPU's inferiority to the developers machine? Exactly, me neither (there were a lot of them though). I hope the plugin takes off, but it won't happen until it performs. Making websites slow on old computers is much like making type too small for the visually impaired.

imakewebthings 16y ago
The elements and everything used during the scroll checks is in fact cached (which you'll be able to verify by looking at those internals you mention) and throttled per my comment below. As another commenter pointed out, the project page itself is full of drop shadows, text shadows, and css3 gradients, and opacity. Those are probably slowing you down way more than the plugin. Do you see the same performance problem from the relatively unstyled examples?