Automatic scrolling loop for table when content is too big (sub teacher screen)-CodePudding

I've got a screen that displays substitute teacher information for students in two tables for the current day and the next schoolday. On days with lots of absent teachers, there are too many table rows to fit the screen and I would like the table to scroll/loop through the content automatically (to the bottom, and then start with the top again).

I've found code that scrolls up and down, but not for a continuous loop with a table. I've also learned that to loop I need to create a "clone" of the table's content/body, but I haven't gotten much further than that.

Here's the HTML:

   <table id="main">
     <tr>
       <td width="50%">
         <table >
          <tr>
            <td colspan="5" >TODAY</td>
          </tr>
          <tr>
            <td width="100%" colspan="5" style="margin: 0; padding: 0;"></td>
          </tr>
          <tr>
            <td width="60" >Class</td>
            <td width="20" >Period</td>
            <td width="40" >Teacher</td>
            <td width="40" >Substitute</td>
            <td width="40" >Info</td>
          </tr>
          <tr >
            <td>5RS</td><td>2</td><td>RSWI</td><td>LLOR</td><td>Room A41</td>
          </tr>
          <tr >
            <td>7MC</td><td>5</td><td>TPOR</td><td>NFIE</td><td>Chem, Room S11</td>
          </tr>
          <!-- This list will often go on and on, usually 40  items -->
        </table>
       </td>
       <td><!-- The same again for TOMORROW -->
       </td>
     </tr>
   </table>

Auto-scrolling/looping should only be done

if (table_height > window.innerHeight)

(I could get rid of "TODAY" and "TOMORROW" as separate rows in the table by just writing that text aove the table if table-head and tbody are necessary for a solution.)

Any help is much appreciated!

CodePudding user response：

I've found a solution and I'm posting it here, in case someone has the same problem:

I modified the script provided by a user and trincot in this question to suit my needs. I splitted the tables in half, and put the inner and outer div around the content of each table, calling them inner1/outer1 and inner2/outer2.

I adjusted the script so that it would scroll both tables independently. The speed is dependend on the table height, and set in outer1_scroll. If you want the exact same speed for both tables, remove the " 5000" (which I added to make the table scroll a little faster when there is a lot of content). The last line ensures that scrolling is only activated if necessary, that is if the table doesn't fit into the window.

var outer1_height = parseInt($(".outer1").height());
var outer1_scroll = outer1_height*20 5000;

function autoScrollDown(){
    $(".inner1").css({top:-$(".outer1").outerHeight()}) 
               .animate({top:0},30000,"linear", autoScrollDown); 
}
function autoScrollUp(){
    $(".inner1").css({top:0}) // jump back
               .animate({top:-$(".outer1").outerHeight()},outer1_scroll,"linear", autoScrollUp); 
}
$('.outer1').css({maxHeight: $('.inner1').height()});
$('.inner1').html($('.inner1').html()   $('.inner1').html());


if (outer1_height >  window.innerHeight) {
    autoScrollUp();
}