Getting index value of cropped Div : Jquery

Question

Ok, so I load a ul with many li's into a div that has overflow:hidden. Click the next btn and it slides the next set of thumbs into view.

All the sliding is working fine but I'm trying to figure how to say "if the last li element is being seen, the next btn is not going to work.

Since all are loaded at runtime and only cropped out of view via the div with overflow:hidden, how will I be able to locate the last li element?

This is all based on the fact that the number of LI elements can change so it all needs to be dynamic so that no matter how many LI's there are, the generic scripting works.

$('.next_btn').click(function() {
var baseElement = $($('.cs_vidThumbList', $(this).parent().parent())
);
var currLoc = $(baseElement).css('left');
  if (currLoc!=0) {
   $(baseElement).animate({
   left:'-=625',},
   'slow')
  }
});

With each click, I slide the ul (which is what the 'baseElement' is above) by-625 as there are to be at least 5 thumbnails showing until we're at the end and each li has a total width of 125.

So I need a way to check to see if the last LI is actually on-screen. I was wondering if I could somehow check the left property of an li with an id of "last" but still I can't think of how Jquery will know if that particular LI is in view since the whole UL is loaded (meaning... it's technically visible, just cropped from view)

Answer 1

You could (although I'm sure there's a better way) count the number of li elements in the ul itself, and then work out where the last possible 'set' of images will appear.

You should run this calculation before the click event.

var listLength = $("ul li").length;

Divide this by the number in each set, which I think you said was 5, and round it up the nearest whole number

var setTotal = listLength / 5;
setTotal = Math.ceil(setTotal); // round it up to a whole number

Then multiply that result by -625 to get the total number of possible movements

var maxMovement = setTotal * -625;

Then you'll know that when currLoc in your code is equal or more than maxMovement you'll know you're looking at the last set of images.