How to add a class to the first and last visible element of a jQuery image scrollable

Question

I'm using the jQuery tools slider by flowplayer

I have set up a vertical scrollable, total 4 tiles, with 3 tiles being visible at a time. The wrapping element has a border radius and I now want to set the radius on the respective first and last tile in view.

This is what I have:

<div class="iTunesBanner" style="border-radius: .6em">
    <div class="outer_container">
        // other stuff
    </div>

    <div class="scroll_container">
        <div class="scrollable vertical">
            <div class="items">
                <div class="logo_container"></div>
                <div class="logo_container"></div>
                <div class="logo_container"></div>
                <div class="logo_container"></div>
            </div>
        </div>
    </div> 
</div><!-- banner -->

and init:

$(function() {
    if ( $('.items').children().length > 1 ) {
        $(".scrollable").scrollable({ vertical: true, circular: true }).autoscroll(7500);
        $('.logo_container:eq(2)').clone().insertAfter('.logo_container:eq(4)').addClass('clone2nd cloned');
        $('.logo_container:eq(3)').clone().insertAfter('.clone2nd').addClass('clone3rd cloned');
        $('.logo_container:eq(4)').clone().insertAfter('.clone3rd').addClass('clone4th cloned');
    }
});

So I'm basically making 4+3 elements, which then merry-go-round. I'm setting the height of logo_container to 1/3 of the scroll_container so I have 3 tiles visible at a time.

I now want to attach a class to the first and last visible tile to also give borders to these elements.

Is this possible without delving into the plugin?

Thanks for any hints. Totally lost here.

score 0 · Answer 1 · answered Jan 12 '12 at 11:35

0

Try this:

$(".logo_container:first-child").addClass("first");
$(".logo_container:last-child").addClass("last");

Make sure you put that after the 3 extra elements have been added.

answered Jan 12 '12 at 11:35

Rory McCrossan

331,213
40
305
339

mh. let's try. But I'm afraid it won't work, because once the first-child is out of view, the following tile will be the "first-visible-child". Let's see – frequent Jan 12 '12 at 11:56
Ah, so you need this to update the top-most visible element as the page scrolls? – Rory McCrossan Jan 12 '12 at 11:57
correct. It needs to update as it's scrolling. I just checked through the script. It seems that the whole _item_ element is being pulled up, so the only thing "happening" is it's css-top position changing. Hm. not helpful I'm afraid – frequent Jan 12 '12 at 12:06

score 0 · Answer 2 · answered Jan 12 '12 at 11:37

0

Something like

$('.logo_container:first, .logo_container:last').addClass('someclass');

maybe?

answered Jan 12 '12 at 11:37

Johan

35,120
54
178
293

How to add a class to the first and last visible element of a jQuery image scrollable

2 Answers2