Search code examples
javascripthtmliframeframeset

How to emulate frozen columns in html: scroll left table on mouse wheel in right table

Windows desktop application need to present screen containing two tables. If right table is scrolled using mouse wheel, left table should scroll automatically to same position. It behaves like frozen columns in spreadsheet application. I tried to use two frames in frameset for this.

I tried to create 3 html files below and open main.htm in IE. On right table scroll left table is not scrolled no error message in IE. In Chrome and Firefox error message that cross site scipting is disabled happens.

I turned XSS fileter of in IE settings but problem persists. It looks like javascript 

onscroll="if (navigator.userAgent.indexOf('Gecko/') != -1)
  window.parent.frame1.document.body.offsetTop=document.body.offsetTop;
else 
  window.parent.frame1.document.body.scrollTop=document.body.scrollTop;">

in iframe2.htm is blocked.

This code worked many years ago. How to make it working in modern desktop Windows operatino system? Is there some security settings which can turned off or can this code refactored into sigle html file which uses two divs to simulate tables or other way ? In real application left table is wide, horizontal scrollbar should be present in it.

main.htm:

<head></head>
<frameset cols="415px,*" frameborder=off>
<frame id=frame1 src="frame1.htm">
<frame id=frame2 src="frame2.htm">
</frameset>

frame1.htm:

<HTML>
<BODY style="overflow-y:hidden;overflow-x:scroll;margin: 0 0 0 0" 
onload="parent.document.body.cols=(document.getElementById('me').offsetWidth) + 'px,*';">

<table id="me">

<tr><td>row1</td></tr>
<tr><td>row2</td></tr>
<tr><td>row3</td></tr>
....
<tr><td>rown</td></tr>
</table></body></html>

frame2.htm:

<HTML>
<body nowrap leftmargin=0 topmargin=0 
onscroll="if (navigator.userAgent.indexOf('Gecko/') != -1)
  window.parent.frame1.document.body.offsetTop=document.body.offsetTop;
else 
  window.parent.frame1.document.body.scrollTop=document.body.scrollTop;">

<table>
<tr><td>rightrow1</td></tr>
<tr><td>rightrow2</td></tr>
...
<tr><td>rightrown</td></tr>

</table></body></html>
Solution

  • Using frames will only complicate this. If possible, put it all on one page.

    1. Put each table in a div.
    2. Position the div's side by side.
    3. Give them the same height.
    4. Make them overflow: auto so they scroll.

    Then use some Javascript+jQuery to synchronize the scroll positions. Something like this:

    $(".left, .right").on("scroll", function() {
   $(".left, .right").scrollTop($(this).scrollTop());
});

    Note: This only handles vertical scrolling. You can use scrollLeft() to sync horizontal scrolling too if needed.

    I set all this up in a jsfiddle for you:

    http://jsfiddle.net/gwcoffey/9EfUy/