CODEWITHSUNDEEP
jqueryhtml
yPhil
yPhil

Reputation: 8357

JQuery: scroll element into viewport

I want to do the opposite of "Scroll to" : That is, instead of scrolling to a div, I want the div to scroll to me. "Me" being one of the following rows (twitter bootstrap row) :

+-------------+-----------+   +-------------+-----------+ 
+-------------+           |   +-------------+           |
+---click-----+   div     |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+-----------+   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+-----------+
+-------------+           |   +-------------+           |
+-------------+           |   +---click-----+    div    |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+-----------+   +-------------+-----------+

See, when I click on one of the lower left rows, the viewport scrolls to the content div. I want the opposite : I want this div (a twitter bootstrap col-nn created on the fly, than can semantically "slide" inside its own tall container) to scroll into place.

So the row will have to, on click, somehow detect that the div is out of sight. This seems possible ; but what about the moving div part?

<div class="row">
  <div class="col col-lg-12 col-sm-12">
    <div class="col-md-8">
      <table class="table">
        <thead>
          <tr>
            <th>Row title</th>
          </tr>
        </thead>
        <tbody>

          <tr class="my_row">
            <td>row</td>
          </tr>

          <tr class="my_row">
            <td>row</td>
          </tr>

          <tr class="my_row">
            <td>row</td>
          </tr>

          <tr class="my_row">
            <td>row</td>
          </tr>

          <tr class="my_row">
            <td>row</td>
          </tr>
<!-- a lot of other rows -->        
        </tbody>
      </table>
    </div> <!-- col-md-8 -->

    <div id="details" class="col-md-4 details">
      <div>THIS IS THE DIV</div>
    </div> <!-- col-md-4 -->

  </div> <!-- col-sm-12 -->
</div>

Upvotes: 0

Views: 3600

Answers (1)

FarligOpptreden
FarligOpptreden

Reputation: 5043

I constructed this jsFiddle to illustrate how you might achieve something like what you stated, that is if I understood correctly what you wanted. I used a CSS3 transition to facilitate the actual animation, which gets triggered because of the 0ms timeout in changing the "top" property of the DIV. In the sample I provided, I aligned the top of the DIV to the top of the row that was clicked. Obviously, you can change it to float in the center if you wish (by doing some mathemagics).

Hope it points you in the right direction!

HTML

As supplied in your question...

CSS

#details {
    transition: top 0.2s ease-in-out;
}

JavaScript

$(document).ready(function () {
    $("#details").css("top", $(".my_row:first").offset().top);
    $(".my_row").click(function () {
        var row = $(this);
        setTimeout(function () {
            $("#details").css("top", row.offset().top);
        }, 0);
    });
});

Upvotes: 4

Related Questions