0

I have one visible item on the page with the rest of the items hidden within a div which has overflow:hidden. I would like it if my next and prev buttons pertain to just the one visible item on the page. The problem is I have no way of selecting just the visible item. I tried checking with myitem.is(':visible') but it doesn't work because all the items are visible - just not showing through the overflow:hidden.

I tried messing about with classes and serialScroll but it's hard to get your head around the onBefore/onAfter callbacks.

Any idea how I can choose the visible item using jQuery , serialScroll or Scrollto ?

Meggy
  • 1,491
  • 3
  • 28
  • 63

2 Answers2

1

One way to check this would be to compare the position of the element with the position the div is scrolled to:

function isVisible(element) {
    var offset = $(element).offset();
    return offset.left + $(element).width() > 0
        && offset.left < $(element).parent().width()
        && offset.top + $(element).height() > 0
        && offset.top < $(element).parent().height();
}

jsFiddle: http://jsfiddle.net/XtAT7/

Brilliand
  • 13,404
  • 6
  • 46
  • 58
0

In the end I had to learn my way around those scrollTo callbacks. Here's what I did; 

$('#scroller').scrollTo(activeprev, 800, {axis:'xy',onAfter: function(elem){
$('.views-row').removeAttr('id','active-row');  
elem.attr('id','active-row');
}}
);

The scrollTo plugin gives the elem option which can be used to mark the new node as active.

Meggy
  • 1,491
  • 3
  • 28
  • 63
  • `removeAttr` only accepts one parameter (the second parameter is ignored). I suggest changing your second line to: `$('#active-row').removeAttr('id');` – Brilliand Aug 11 '12 at 00:22