Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 798
slolife Avatar asked Jun 17 '10 19:06

slolife


People also ask

How do you overlay a div?

By using a div with style z-index:1; and position: absolute; you can overlay your div on any other div . z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index . Note that this property only works with positioned elements.

How do I overlay a div over CSS?

You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).

Can you wrap a TR in a div?

Bookmark this question. Show activity on this post. You should not be doing that... is not a valid HTMl markup... Rows can not be wraped by divs.

What is TR and TD in table?

The <td> tag defines the standard cells in the table which are displayed as normal-weight, left-aligned text. The <tr> tag defines the table rows. There must be at least one row in the table. The <th> tag defines the header cells in the table which are displayed as bold, center-aligned text.


1 Answers

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 }); 
like image 146
jhorback Avatar answered Sep 22 '22 04:09

jhorback