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.

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.

• javascript
• html
• dom

• I can use jquery. One thing I just realized based on some answers below. I'm basically looking to indentify the first div(image) block that is fully visible and highlight it. so there might be 3 blocks fully visible as per the screen wireframe but I only want to highlight the first one. when the user scrolls right a bit the first block is no longer "fully visible" and so the second block is the first fully visible block and should be highlighted. – Derek Organ Commented Mar 11, 2011 at 20:32
• Not sure if you still need this, but I have a plugin that might help: github.com/Mottie/visualNav... check out the demo: mottie.github.com/visualNav/index2.html – Mottie Commented Apr 9, 2011 at 6:18
• I'm very much in development but this is what I have so far. deeorgan.orchestra.io – Derek Organ Commented Apr 10, 2011 at 2:16

6 Answers 6

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.

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

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 :)

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.

The task involves detecting Image position, scroller position, and knowing your images width. With jQuery you'll need to use scrollLeft(), position(), width(), and the scroll() event

Here's how you do it.

var $div = $('div'),
    divleft = $div.position().left;
$('div').scroll(function() {
    $('img').each(function() {
        img = $(this);
        imgleft = img.position().left;
        if (imgleft > divleft && imgleft + img.width() < divleft + $div.width()) {
            $(this).css({
                opacity: '1'
            })
        } else {
            $(this).css({
                opacity: '0.2'
            })
        }
    });
})

Check example at http://jsfiddle.net/Vy33z/4/

Try using jQuery's scroll event support.

http://api.jquery.com/scroll/

And have that check to see what image is on the screen - something similar to this:

Check if element is visible after scrolling