rtoken rtoken - 4 months ago 8
jQuery Question

Linked Horizontal Scrolling With Two Divs

I have two tables, one is a table with just the table headers, the other table contains all the table data. Both tables are inside their own separate divs. I'm trying to make it so that scrolling horizontally on the table data div will trigger an event in JavaScript that will scroll the table header div at the same rate. I know I could get rid of the divs and just have one table with sticky headers, but I want to try to do it this way. Here's a simplified version of code that I thought would work:

HTML:

<div id = "div1">
<table id = "stickyheaders" class = "table table-condensed table-striped small">
<thead><tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
<th>header6</th>
<th>header7</th>
<th>header8</th>
<th>header9</th>
<th>header10</th>
</tr></thead>
</table>
</div>

<div id = "div2">
<table id = "tablebody" class = "table table-condensed table-striped small">
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
<td>data7</td>
<td>data8</td>
<td>data9</td>
<td>data10</td>
</tr>
</tbody>
</table>
</div>


JavaScript:

$(document).ready(function() {
$('#div2').on('scroll', function () {
$('#').scrollLeft($(this).scrollLeft());
});
} )();


And here's the fiddle

Am I missing something stupid here? Thanks in advance for your help. I know this is similar to another question asked here, but that one doesn't have an answer and didn't really help me out.

Answer

You are missing the core scrolling stuff. Replace the $('#') with the right id and remove the () at the end. And yea, add jQuery:

$(document).ready(function() {
  $('#div2').on('scroll', function() {
    $('#div1').scrollLeft($(this).scrollLeft());
  });
});
#div1 {
  width: 50%;
  height: 40px;
  padding: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  overflow-y: auto;
  overflow-x: auto;
  label {
    display: block;
  }
  tr:after {
    content: ' ';
    display: block;
    visibility: auto;
    clear: both;
  }
}
#div2 {
  width: 50%;
  height: 50px;
  padding: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  overflow-y: auto;
  overflow-x: auto;
  label {
    display: block;
  }
  tr:after {
    content: ' ';
    display: block;
    visibility: auto;
    clear: both;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <table id="stickyheaders" class="table table-condensed table-striped small">
    <thead>
      <tr>
        <th>header1</th>
        <th>header2</th>
        <th>header3</th>
        <th>header4</th>
        <th>header5</th>
        <th>header6</th>
        <th>header7</th>
        <th>header8</th>
        <th>header9</th>
        <th>header10</th>
      </tr>
    </thead>
  </table>
</div>

<div id="div2">
  <table id="tablebody" class="table table-condensed table-striped small">
    <tbody>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
        <td>data6</td>
        <td>data7</td>
        <td>data8</td>
        <td>data9</td>
        <td>data10</td>
      </tr>
    </tbody>
  </table>
</div>

Scrolling on the bottom div will scroll the top one. Add jQuery to the jsFiddle.

Fiddle: https://jsfiddle.net/2xt1p8t7/

Comments