CODEWITHSUNDEEP
javascriptjqueryhtmlcssoverlay
slolife
slolife

Reputation: 19870

How to overlay a div (or any element) over a table row (tr)?

I'd like to overlay a div (or any element that'll work) over a table row (tr tag) that happens to have more than one column.

I have tried a few methods, which don't seem to work. I've posted my current code below.

I do get an overlay, but not directly over just the row. I tried setting the overlay top to $divBottom.css('top'), but that is always 'auto'.

So, am I on the right track, or is there a better way of doing it? Utilizing jQuery is fine as you can see.

If I am on the right track, how do I get the div placed correctly? Is the offsetTop an offset in the containing element, the table, and I need to do some math? Any other gotchas I'll run into with that?

$(document).ready(function() {
  $('#lnkDoIt').click(function() {
    var $divBottom = $('#rowBottom');
    var $divOverlay = $('#divOverlay');
    var bottomTop = $divBottom.attr('offsetTop');
    var bottomLeft = $divBottom.attr('offsetLeft');
    var bottomWidth = $divBottom.css('width');
    var bottomHeight = $divBottom.css('height');
    $divOverlay.css('top', bottomTop);
    $divOverlay.css('left', bottomLeft);
    $divOverlay.css('width', bottomWidth);
    $divOverlay.css('height', bottomHeight);

    $('#info').text('Top: ' + bottomTop + ' Left: ' + bottomLeft);
  });
});
#rowBottom { outline:red solid 2px }
#divBottom { margin:1em; font-size:xx-large; position:relative; }
#divOverlay { background-color:Silver; text-align:center;  position:absolute; z-index:10000; opacity:0.5; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>Overlay Tests</title>
  </head>
  <body>
    <p align="center"><a id="lnkDoIt" href="#">Do it!</a></p>
    <table width="100%" border="0" cellpadding="10" cellspacing="3" style="position:relative">
      <tr>
        <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></td>
      </tr>
      <tr id="rowBottom">
        <td><div id="divBottom"><p align="center">This is the bottom text</p></div></td>
      </tr>
      <tr>
        <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></td>
      </tr>
    </table>
    <div id="divOverlay" style=""><p>This is the overlay div.</p><p id="info"></p></div>
  </body>
</html>

Upvotes: 55

Views: 84420

Answers (6)

Asyraf Roszaki
Asyraf Roszaki

Reputation: 71

<!--only this the structure you need to make it visible-->


<!-- this is a wrapper -->
<div style="position: relative;"> 
   
    <div style="position: absolute;"> i'm on the top</div> <!-- here the things you want on top -->

 <!-- everything code you want to write -->
    <table></table>
</div>

Upvotes: 3

Leoj Etagram
Leoj Etagram

Reputation: 1

This should do:

var bottomTop = $divBottom.offset().top;
var bottomLeft = $divBottom.offset().left;

Upvotes: 0

mike
mike

Reputation: 2308

Getting the height and width of an object straightforward. The hard part for me was the Top and Left coordinates for absolute positioning.

This is the only script that has ever worked reliably for me:

function posY(ctl)
{
    var pos = ctl.offsetHeight;
    while(ctl != null){
        pos += ctl.offsetTop;

        ctl = ctl.offsetParent; 
    }

    return pos;
}
function posX(ctl)
{
    var pos = 0;
    while(ctl != null){
        pos += ctl.offsetLeft;

        ctl = ctl.offsetParent; 
    }

    return pos;

}

Upvotes: 0

Fazi
Fazi

Reputation: 3989

Also, make sure the the outer elements (in this case the table) overflow property is not set to hidden. With the hidden setting on overflow, no overlay will be displayed!

Upvotes: 0

user1647224
user1647224

Reputation:

Make:

div style="position:absolute"

td style="position:relative;display:block"

and you don't need jquery.

Upvotes: 15

jhorback
jhorback

Reputation: 833

You need to make the overlay div have an absolute position. Also use the position() jQuery method for top and left positions of the row - here are the missing pieces:

var rowPos = $divBottom.position();
bottomTop = rowPos.top;
bottomLeft = rowPos.left;

//
$divOverlay.css({
    position: 'absolute',
    top: bottomTop,
    left: bottomLeft,
    width: bottomWidth,
    height: bottomHeight
});

Upvotes: 36

Related Questions