jquery horizontal scroll event - Edit

Question

Hi there I have a horizontally scrolling gallery that i want to add dynamic captions to, the captions are static on the page and I would like them to toggle on and off when the user scrolls past each image.

heres a mock up of the page:

http://www.jonathantopf.com/imijstudio/

For a proof of concept i have a little red square in the above gallery that i would like to use to trigger an event when it enters the screen. Any ideas?

I had a go using waypoints but couldn't figure out how to set it to listen for horizontal scroll events. I'm very new to jquery as you might be able to tell so any help is greatly appreciated,

Heres what I tried so far:

$(document).ready(function() {

$("#blob").waypoint(function() {
    alert('waypoint reached.');
});


});

and here's the error:

Uncaught TypeError: Object function ( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context );
} has no method 'isWindow'

UPDATE: upgraded to latest version of jquery, that seemed to fix the consloe error. It works now but only when the square enters the frame vertically, i can t find how to set the orientation to horizontal.

Thanks

jon

Answer 1

Update your JQuery. isWindow was added in 1.4.3 (http://api.jquery.com/jQuery.isWindow/) and you're using 1.4.2.

Answer 2

Hey you just need to use the $(window).scroll and the value from scrollleft ive done a simple test for you here:

http://jsfiddle.net/vJUXy/

let me know if ive misunderstood? Alex