views:

63

answers:

1

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?

    <html>
    <head>
        <title>Overlay Tests</title>
        <style>
            #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; }
        </style>
    </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>
        <script src="../includes/javascript/jquery/jquery-1.4.2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(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);
                });
            });
        </script>
    </body>
    </html>
+1  A: 

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.pos();
bottomTop = rowPos.top;
bottomLeft = rowPos.left;

//
$divOverlay.css({
    position: 'absolute',
    top: bottomTop,
    left: bottomLeft,
    width: bottomWidth,
    height: bottomHeight
});
jhorback
His overly already picked up "position: absolute" from his stylesheet. However you're right about using "pos()".
Pointy
That appears to do the trick... with one change:var rowPos = $divBottom.pos();should bevar rowPos = $divBottom.offset();.offset() is the top/left in the doc.
slolife