Question

I have to display a table with many columns on a web page. The columns are basically days of the week therefore only 7 columns need to be displayed at once (out of four weeks in total).

I have set up a window with the overflow set to hidden which displays the first seven days and managed to get the table to scroll left seven days however the table won’t scroll further that this. If I scroll back then the table scrolls back too far and the table totally disappears to the right.

I am quite new to jQuery and realise that I should be using possibly the position() or offset() functions. I am sure this is a simple piece of code although my hours of googling have turned up nothing that covers this problem.

Does anyone know any decent tutorials out there to get me started ? Thanks

It is simply having a container div of 500px with overflow set to hidden continaing a seperare div of 2000px. When the user clicks on the previous or next buttons the inner div will scroll plus or minus 500px dependent on the position.

Answer 1

try this:

$('.next').click(function(event){
    if($('.table').css('left') != '-1500px') {
    $(this).prop('disabled', true)    
        $('.table').animate({left:'-=500px'}, 500, function() {
              $('.next').prop('disabled', false)    
        });
}
});


$('.prev').click(function(event){
    if($('.table').css('left') != '0px') {
    $(this).prop('disabled', true)   
        $('.table').animate({left:'+=500px'}, 500, function() {
              $('.prev').prop('disabled', false)    
        });
}
});

http://jsfiddle.net/ZSFFS/27/