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?
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 });