Add to div margin if less than total height

Question

I'm trying to build a slider that will move several divs up and down on click. When I get to the end of the divs I want the slider to stop. I'm really stuck on this checking if we're at the last div though.

I have the divs positioned absolutely, the slide-container's height is calculated by adding all of these together and then I will use margins to move the slide-container up and down.

How can I compare in my if statement, the margin-top + the next div height will be less than the total height (i.e. to prevent infinite adding in one direction)?

if($('#slide-container').css({'marginTop': +=59} < $('#slide-container').height()) {
    // Go back to 0
}

Where 59 is the height of the moving divs, so we add a margin of this on each click. This if statement is supposed to check if we're at the last one though.

Thanks,

Answer 1

I think I found a working solution. You'll need to import jQuery UI to run it. And you'll have to write a previous click function. But here is the next function:

http://jsfiddle.net/88wHu/2/

Here the code:

$(document).ready(function(){
    var hideoptions = {  "direction" : "up",  "mode" : "hide"};
    var showoptions = {"direction" : "down","mode" : "show"};
    $('.webinar').not(':first-child').hide();
    $('.webinar:first-child').addClass('active-slide');
    $('span.next-arw').click(function(e){
        if($('.active-slide').next().length>0){
            console.log($('.active-slide').next());
            var current=$('.active-slide');
            var current_next=current.next();
            current_next.addClass('active-slide');
            current.removeClass('active-slide');

            current.effect( "slide", hideoptions, 400);            
            current_next.effect( "slide", showoptions, 400);          

        }
    });


});

Hope that was a help :)