Question

I’m trying to make a row of thumbnails scroll automatically within their DIV depending on where the mouse is. I found an example of what I’m after here, but can’t extract/edit the JavaScript to make it work properly. Here is my failed attempt. 🙁

I need the parent DIV to fill the full width of the page (i.e.100%). Eventually, if I get this right, I would like to add more than one auto scrolling thumbnail DIV on a page.

Sorry if the code is bad, my knowledge of JavaScript is abysmal.

Answer 1

You were pretty close, although you had a mismash of javascript and perl variables, etc.

Some notes:

• $ is used as an alias for jQuery. So, $() is the same as jQuery(). It is not a variable identifier like in perl.

• $div should be $('div'), but it is not very useful if you are immediately going to call children() or find(). Instead do $('div.album')

• Instead of calculating the width using 63 * number_of_elements, use jQuery to get their actual widths using .outerWidth(true). The true means it includes margins.

Here is a working example based off your code:

http://jsfiddle.net/jtbowden/BAjQB/

I added variables leftBuffer and rightBuffer which constrain the scrolling so that you don’t have to be on the very edge pixel to scroll all the way left/right.