Side Scrolling

[tikimann]

I'm trying to make a way point on one element that scrolls left to right, and make that make another div fade away.
It seems like the direction listener only applies to up and down?

Here is what I've got:

$('#panel1').waypoint();
$('#scroll_box').bind('waypoint.reached', function(event, direction) {
    $('#scroll_box').fadeOut('slow', 0);

I want it to fade scroll_box once it hits panel1. Am I doing this terribly wrong?

[imakewebthings]

To answer your first question, yes waypoints currently only work with regards to up/down scrolling. I'll leave this ticket open as a feature request to track progress or give any updates when/if I add bidirectional scrolling.

As for your code, you've made #panel1 the waypoint but tried to bind the listener to #scroll_box. Also, I don't believe 0 is a valid argument for the second parameter of fadeOut. It should be a function used as a callback, a string that indicates one of jQuery's easing functions (only 'linear' and 'swing' by default), or not specified. And lastly, while it isn't a bug with your code, you might also want your other element to fade back in when you scroll back? All said, you want something more like this:

$('#panel1').waypoint(function() {
   $('#scroll_box')[direction === 'up' ? 'fadeIn' : 'fadeOut']('slow');
});

[tikimann]

Cool thanks for the help! I'm definitely new to getting Jquery up and going and sort of guessed after reading the documentation.

[o-l-e]

Horizontal would be great!

[calvinlloyd]

any updates on horizontal scrolling and user-defined viewport (width/height)?

[imakewebthings]

No updates yet on horizontal scrolling. Pretty low on my overall list of things to do. Has "user defined viewport" been brought up before?

[calvinlloyd]

nope, I just threw that in there :)

Sent from my iPhone

On Dec 19, 2011, at 6:43 PM, Caleb Troughtonreply@reply.github.com wrote:

No updates yet on horizontal scrolling. Pretty low on my overall list of things to do. Has "user defined viewport" been brought up before?

---

Reply to this email directly or view it on GitHub:
https://github.com/imakewebthings/jquery-waypoints/issues/14#issuecomment-3211736

[imakewebthings]

@uceceo Could you open a new ticket? I'm curious what you mean by this that isn't solved by the context option.

[calvinlloyd]

Yeap, you're right it does...thx

Sent from my iPhone

On Dec 19, 2011, at 7:44 PM, Caleb Troughtonreply@reply.github.com wrote:

@uceceo Could you open a new ticket? I'm curious what you mean by this that isn't solved by the context option.

---

Reply to this email directly or view it on GitHub:
https://github.com/imakewebthings/jquery-waypoints/issues/14#issuecomment-3212357

[prisme]

I needed to detect horizontal scrolling elements as well and ended up using the Appear plugin ...

[ova2]

+1 for horizontal scrolling

[darrencraig]

I'd like horizontal scrolling too. Would be lovely :)

[jedierikb]

@darrencraig https://github.com/imakewebthings/jquery-waypoints/tree/2.0

[imakewebthings]

@jedierikb I haven't done much in the way of document the changes in the 2.0 branch yet (except for the code comments). But just curious, you try using it yet?

[jedierikb]

@imakewebthings going to try today

[jedierikb]

@imakewebthings post comments here re: 2.0 or somewhere else?

[imakewebthings]

@jedierikb Email would be good. caleb@imakewebthings.com

[iabw]

I hacked basic support for horizontal scrolling into the current release branch in like 30 minutes. Is there enough of a delay on version 2.0 that I should spend another hour on it and submit a pull request?

[imakewebthings]

@iabw I would not accept a major feature addition pull request to the 1.0 master branch. The 2.0 branch's horizontal scrolling support is pretty solid. I need to finish the public site updates and will not "officially" ship that branch until solid public facing docs are done. I've been a bit busy getting married and honeymooning and such, but hope to get back to that this week. In the meantime you could read the code comments in the 2.0 branch to get a feel for the changes and how to use the horizontal option. Or stick with your own branch if it works well for you.

Thanks for the offer though, very much appreciated.

[iabw]

Congrats on the marriage!

[salawitza]

I've just download the latest 2.0 and tried the horizontal scrolling by replacing 'down' with 'left' and it doesn't seem to work, what am I doing wrong?

[imakewebthings]

@salawitza I need to see your code to know what you're doing wrong.

[salawitza]

I was just playing around, it worked on the default 'down' setting, but then switched to right and left and it didn't fire on the element but I think it was as simple as the example on your site with alerts to warn me when things were triggered:

someElements.waypoint(function(event, direction) {
   if (direction === 'left') {
      // do this on the way down
   }
   else {
      // do this on the way back up through the waypoint
   }
});

[imakewebthings]

@salawitza I wouldn't expect you or anyone else to know this until the public facing docs are done, but in the 2.0 branch there is no more event parameter. It's just someElements.waypoint(function(direction) { ... });. In your example, direction will always be undefined.

[imakewebthings]

Hey all, it only took 2 years but I'm going to close this. 2.0 is now released and includes support for horizontal waypoints.

There is a new option, horizontal. When this option is set to true the waypoint looks at left-to-right scrolling and the direction parameter passed to the callback function becomes right and left instead of up and down. All things "top" become "left", in that an offset of 0 means the function will fire when the left side of the element hits the left edge of the viewport.