CODEWITHSUNDEEP
javascriptjqueryscrollhtml-table
jkw4703
jkw4703

Reputation: 362

Slide HTML Table rows up and repeate

I found some cool code while working on a project. Its jquery that effects a html table. It basically makes the tbody scroll up so the row that was at the top goes to the bottom and the rest of the rows shift up. This is what I mean:

<tr><td>1a</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1b</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1c</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1d</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>

becomes:

<tr><td>1b</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1c</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1d</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1a</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>

Row 1a moves to the bottom. This is the jquery code I am using:

<script type="text/javascript">
$.fn.infiniteScrollUp=function(){
    var self=this,kids=self.children()
    kids.slice(20).hide()
    setInterval(function(){
        kids.filter(':hidden').eq(0).fadeIn()
        kids.eq(0).fadeOut(function(){
            $(this).appendTo(self)
            kids=self.children()
        })
    },5000)
    return this
}
$(function(){
    $('tbody').infiniteScrollUp()
})
</script>

This works fine. No problems. How ever when I tried to make it so it just slides up, just like a reel of some sort, it either 1) stops adding it to the bottom, 2) stops removing them from the top, or 3) nothing. How can I change this effect to slide up?

Here is the jsfiddle example.

Upvotes: 1

Views: 2185

Answers (2)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

Sliding tr elements up/down is tricky. They don't behave like block elements.

This is the best I can manage :

$.fn.infiniteScrollUp = function() {
    var self = this;
    var kids = self.children();
    kids.children('td, th').wrapInner('<div class="dummy"/>')
    setInterval(function() {
        var first = kids.eq(0),
            clone = first.clone().appendTo(self);
        first.find(".dummy").slideUp(1000, function() {
            kids = kids.not(first).add(clone);
            first.remove();
        });
    }, 2000);
    return this;
};

Updated fiddle

Upvotes: 1

dev
dev

Reputation: 4009

I'm not sure about the plugin you have added above but here is another quick way around it that works as you have described, a little bit simpler in my opinion. There may be better ways around it. 

function moveRows(){
   firstTR = $('tbody tr').first();
    firstTR.animate({opacity:0},
      function(){$('tbody').append(firstTR);});
    firstTR.animate({opacity:1});
}

setInterval(function(){
    moveRows();
},1000);

And here is a Fiddle example.

Upvotes: 0

Related Questions