Question

I have a list of items grouped in a table, let’s say 30 and what i want to do is the following:

• scrolling automatically and vertically from bottom to top ,without buttons clicks or mouse events

And here’s the code i used:

        function scrolling(){
            $('#scrollup table').animate(
            { 
                top: '-=10'
            },
            1000,
            'linear',
            function(){

                      if($('#scrollup table  tr:last').offset().top<0){
                     $('#scrollup table  tr:first').remove();   
                    $('#scrollup table  tr:last').after('<tr>'+$('#scrollup table  tr:first').html()+'</tr>');
                }
            }
        );
        }
        $(document).ready(function(){
            setInterval('scrolling()',200)
        });

Can you tell me what I missed or where is the problem ?

Answer 1

Check out this code:

  function scrolling(){
        var table = $('#scrollup table');
        table.animate(
        { 
            top: '-=5'
        },
        200,
        'linear',
        function(){                
            if($('#scrollup table tr:first').height() <= -parseFloat(table.css("top"))){
                 $('#scrollup table').css("top", 0);
                 $('#scrollup table  tr:last').after($('#scrollup table tr:first').detach());
            }
        }
    );
    }
    $(document).ready(function(){
        setInterval('scrolling()',200)
    });​

It works fine (demo), but will be good only if all rows have equal height. I’m trying to find better solution which will work for diff height rows. Basically, problem with your code is that you always move table up (with .animate), but remove first line and add it to the end of table (so table height does not grow up)

Upd
Code is updated to work with diff height lines. Demo