Using the offsetParent Property : Table : HTML JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » HTML » Table »

 

Using the offsetParent Property





/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>offsetParent Property</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function setImagePosition(){
    var cElement = document.all.myCell
    // Set flag for whether calculations should use
    // client- or offset- property measures. Use
    // client- for IE5/Mac and IE4/Windows; otherwise
    // use offset- properties. An ugly, but necessary
    // workaround.
    var useClient = (cElement.offsetTop == 0
        ((cElement.offsetParent.tagName == "TR"false truefalse
    if (useClient) {
        var x = cElement.clientLeft
        var y = cElement.clientTop
    else {
        var x = cElement.offsetLeft
        var y = cElement.offsetTop
    }
    var pElement = document.all.myCell.offsetParent
    while (pElement != document.body) {
        if (useClient) {
            x += pElement.clientLeft
            y += pElement.clientTop
        else {
            x += pElement.offsetLeft
            y += pElement.offsetTop
        }
        pElement = pElement.offsetParent
    }
    document.all.myDIV.style.pixelLeft = x
    document.all.myDIV.style.pixelTop = y
    document.all.myDIV.style.visibility = "visible"
}
</SCRIPT>
</HEAD>
<BODY onload="setImagePosition()">
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
<H1>The offsetParent Property</H1>
<HR>
<P>After the document loads, the script positions a small image in the upper
 left corner of the second table cell.</P>
<TABLE BORDER=ALIGN="center">
<TR>
    <TD>This is the first cell</TD>
    <TD ID="myCell">This is the second cell.</TD>
</TR>
</TABLE>
<DIV ID="myDIV" STYLE="position:absolute; visibility:hidden; height:12; width:12">
<IMG SRC="http://www.navioo.com/style/logo.png" HEIGHT=12 WIDTH=12></DIV>
</BODY>
</HTML>

           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo HTML
» Table