CODEWITHSUNDEEP
jqueryscroll
john adams
john adams

Reputation: 13

need help Implementing circular vertical scroller in jquery

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

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 ?

Upvotes: 1

Views: 748

Answers (1)

Viktor S.
Viktor S.

Reputation: 12815

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

Upvotes: 2

Related Questions