How to overlay a div (or any element) over a table row (tr)?
JavascriptJqueryHtmlCssOverlayJavascript Problem Overview
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>
Javascript Solutions
Solution 1 - Javascript
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 });
Solution 2 - Javascript
Make:
div style="position:absolute"
td style="position:relative;display:block"
and you don't need jquery.
Solution 3 - Javascript
<!--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>
Solution 4 - Javascript
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!
Solution 5 - Javascript
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;
}
Solution 6 - Javascript
This should do:
var bottomTop = $divBottom.offset().top;
var bottomLeft = $divBottom.offset().left;