Sync all tables with scrollbars

JavaScript
1

Hi,

There is a page where I have 5 tables. Each table has same number of columns (about 1000). What i want is that whenever ANY of the table is scrolled (horizontal), all the other tables must follow that.

Here, please note that when the page loads, the first table is scrolled to today’s date column and others follow this. However, when I manually scroll the table, I have to do that again for all the 5 tables. So this creates problem.

Can you people locate me some code OR guide me how I can do this ?

Thank you
ZH

2

The following script syncs the horizontal scrolling for two separate tables. You can extend the principle to as many tables as you want. The script works in all browsers by applying an onscroll handler to the div surrounding the table. The number of pixels displacement is shown below the bottom table.

A working program is shown here JSFiddle

<script type="text/javascript">
 var T1Obj=document.getElementById("T1");
 var T2Obj=document.getElementById("T2");
 var msgObj=document.getElementById("msg");
 if (typeof addEventListener !="undefined") 
  { T1Obj.addEventListener('scroll', getScroll);
    T2Obj.addEventListener('scroll', getScroll); }   
  else
   { T1Obj.attachEvent('onscroll', getScroll);
     T2Obj.attachEvent('onscroll', getScroll); }
 // --------  
 function getScroll(event)
  { if(event.type==="scroll")
     { var elem=(event.srcElement)? event.srcElement : event.target; 
       if(elem.id==="T1")
        { T2Obj.scrollLeft=elem.scrollLeft; }                      
       else if(elem.id==="T2")
        { T1Obj.scrollLeft=elem.scrollLeft; }  
      }  
     msgObj.innerHTML=elem.scrollLeft;
  } 
// ------  
</script>
2 Likes
3

Thank you master !

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.