Table scroll with scroll position according to date

Question

Table scroll with scroll position according to date

Navigation

#1 by (2 votes)

0

I have table with a list of birthdays. I use a div that leaves it scroll with fixed horizontal size. I would like the scrolling of the table to be at the current date position. As in this picture below:

Assuming today was the 20th.

Idida Jsfiddle .

javascript

asked by anonymous 27.04.2017 / 15:35

1 answer

CSS attribute does not work Problem in return of PHP function [closed]

score 2 · Accepted Answer

I suggest doing this using jquery , following an alternative solution, I get the current day and use .animate() to scroll to its selector , -140 is just to center the date in the view.

If you want to the current day, just comment the var day = 17; and uncomment the var day = d.getDate(); . Hope it helps.

$(document).ready(function() {
  var d = new Date();
  //var day = d.getDate();
  var day = 17;
  // Handler for .ready() called.
  $('#table-scroll').animate({
    scrollTop: $('td:contains("' + day + '")').offset().top - 140
  }, 'slow');
});

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: 300px;
  overflow: auto;
  margin-top: 20px;
}

#table-wrapper table {
  width: 100%;
  border: 1px solid #e1e1e1;
  background-color: #fefefe;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="table-wrapper">
  <div id="table-scroll">
    <table>
      <tr>
        <td>1</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>7</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>8</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>10</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>11</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>12</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>13</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>14</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>15</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>16</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>17</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>18</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>19</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>20</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>21</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>22</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>23</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>24</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>25</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>26</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>27</td>
        <td>Fulano</td>
      </tr>
      <tr>
        <td>28</td>
        <td>Fulano</td>
      </tr>
    </table>
  </div>
</div>