horizontal scroll, detecting scroll position relative to anchors

Question

Ok, I'm building a horizontal scroll website for a photographer. We have some really nice wireframes done and I'm looking to create a neat effect where it highlights the specific photo that is on the left of the screen at all times or more specifically set the transparency to 40% on all other photos.

So I know I can add anchors to each photo so I can use that to have a click to next option but what if the user uses the scroll bar manually, is there any way for me to detect the position relative to the each photo. Bare in mind to make this even more awkward even though each photo is the same hight they can have different widths.

I'm thinking if there was a way to get the position of each anchor tag then I could detect the current position against it and use some maths to figure out which one is in focus.

So can someone tell me if this is possible and if so how? Any other ideas to make it work are welcome of course.

Answer 1

I fiddled a bit around with a script for this, and came up with a script where the items opacity is dertermined, from how far from the left side they are. so the closer the item is the more visible it becomes.

You can see the demo here: http://jsfiddle.net/XAa3Y/57/

Hope it helps.

Answer 2

You could modify (or better, improve) waypoints with horizontal scrolling support. It doesn't seem too hard as much as I could see.

Answer 3

you'll have to synthesize two figures.

a - you can find the position of the scroll using

 oDiv.scrollLeft

b - once pictures are loaded - you can sum the sizes of the pictures (or if you set it mannually - you don't even have to wait for them to load.

oImg.style.width

Assuming you give the same spacing between the pictures - the math becomes obvious.

It's a little JavaScript, that's all :)

Answer 4

How about something like this: http://jsfiddle.net/coltrane/Mj6ce/

In that example, I've used jQuery -- just because it helps a lot with cross-browser compatibility -- but you could easily re-build it without jQuery if that's what you need.

The basic idea is this:

1. The scroller div provides the scrolling (via overflow-x: auto;), and it has a single immediate child div that holds all the other content items.
2. The jQuery function offset() is used to compare the left edge of the scroller to the left edge of the content div (using document coordinates). This tells us how much the scroller is scrolled.
3. We can then loop through all the items in order, and examine each item's position within the content div (using jQuery's position() function). Comparing an item's position to the current scroll value (from step 2) allows us to determine whether to highlight the item or not.
4. Finally, we use the scroll event, to trigger an update every time the scroll changes. Our update function simply applies steps 2 & 3 described above. I used jQuery's .scroll() function to bind the scroll event.