CODEWITHSUNDEEP
javascriptjqueryhtml
user987055
user987055

Reputation: 1149

How do I move a tr tag back to the viewport

I have many tr in the visible area where it generates a scrollbar, tr each has its own id, how do I know if it is in the visible area of the scrollbar, and if not how do I place it in the visible area using Jquery ?

<tr align="center" id="100"><td><a> info </a></td></tr>
<tr align="center" id="101"><td><a> info </a></td></tr>
<tr align="center" id="102"><td><a> info </a></td></tr>
<tr align="center" id="103"><td><a> info </a></td></tr>
<tr align="center" id="104"><td><a> info </a></td></tr>
<tr align="center" id="105"><td><a> info </a></td></tr>
<tr align="center" id="106"><td><a> info </a></td></tr>
<tr align="center" id="107"><td><a> info </a></td></tr>

Upvotes: 0

Views: 125

Answers (2)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94359

http://jsfiddle.net/DerekL/b5Bwx/

A quick and easy way:

$("div").on("scroll", function(){
   var y = $("#target").offset().top;
    if(y < this.offsetHeight && y > -$("target").height(){
        $("span").append("Visible");
    }
});

Or this: http://jsfiddle.net/DerekL/Lxsmt/

Upvotes: 1

nullability
nullability

Reputation: 10675

To determine whether they are in the viewport or not, you will need to use a function to calculate that. Something like this would work (no jQuery required):

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
        );
}

Then, you can scroll to them from a link like <a href="#101">Go To Row 1</a>.

Upvotes: 0

Related Questions