search

imakewebthings / waypoints

Waypoints is a library that makes it easy to execute a function whenever you scroll to an element.
http://imakewebthings.com/waypoints/
10.38k stars 1.34k forks source link

'bottom-in-view' not working/failing silently #322

Closed trevorochocki closed 10 years ago

trevorochocki commented 10 years ago

I am attempting to use the 'bottom-in-view' shortcut with Waypoints 2.0.5, but have so far been unsuccessful. Using the following test code...

$('.play-when-in-view').waypoint(function (direction) {
    console.log('Scroll direction: ' + direction);
}, {
    offset: 'bottom-in-view'
});

...results in nothing being output to the console log and zero script errors. If I change 'bottom-in-view' to '66%' or any other value, then everything seems to work fine (i.e. the scroll direction is output to the console log). Any ideas as to why 'bottom-in-view' might not be working?

imakewebthings commented 10 years ago

Could you share a page where this is not working?

trevorochocki commented 10 years ago

Sure. I'll make the change public for now since it fails gracefully: http://www.naturalpoint.com/optitrack/products/prime-41/indepth.html#outdoorCapture

Basically, I am trying to play a little video clip when the bottom of the video's parent element comes into view. It works when I set the offset to a percentage but the 'bottom-in-view' shortcut does not.

imakewebthings commented 10 years ago

https://www.drupal.org/node/1916750

I believe the version of jQuery UI you are using redefines jQuery's outerHeight function, which the bottom-in-view alias uses.

Edit: You can see this in the console using any selector. If you run $('.play-when-in-view').outerHeight() you'll see it returns the jQuery object, instead of the height like it's supposed to.

trevorochocki commented 10 years ago

Yep, that appears to be the case. I updated to the latest jQuery UI and now my issue is resolved. Thanks again for such a swift response and my compliments to you on creating/maintaining a mighty fine jQuery plugin.