Testing Nested Layer Coordinate Systems (W3C) : Layer : HTML JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » HTML » Layer »

 

Testing Nested Layer Coordinate Systems (W3C)



/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>Nested Layer Coordinates (W3C)</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// offsets within page
function getGrossOffsetLeft(elem) {
    var offset = 0
    while (elem.offsetParent) {
        // correct for IE/Mac discrepancy between offset and style coordinates,
        // but not if the parent is HTML element (NN6)
        offset += (elem.offsetParent.tagName != "HTML"
            parseInt(elem.style.left- parseInt(elem.offsetLeft0
        elem = elem.offsetParent
        offset += elem.offsetLeft
    }
    return offset
}
function getGrossOffsetTop(elem) {
    var offset = 0
    while (elem.offsetParent) {
        // correct for IE/Mac discrepancy between offset and style coordinates,
        // but not if the parent is HTML element (NN6)
        offset += (elem.offsetParent.tagName != "HTML"
            parseInt(elem.style.top- parseInt(elem.offsetTop0
        elem = elem.offsetParent
        offset += elem.offsetTop
    }
    return offset
}
// offsets within element's positioning context
function getNetOffsetLeft(offset, elem) {
    while (elem = getParentLayer(elem)) {
        // correct for IE/Mac discrepancy between offset and style coordinates,
        // but not if the parent is HTML element (NN6)
        offset -= (elem.offsetParent.tagName != "HTML"
            parseInt(elem.style.left- parseInt(elem.offsetLeft0
        offset -= elem.offsetLeft
    }
    return offset
}
function getNetOffsetTop(offset, elem) {
    while (elem = getParentLayer(elem)) {
        // correct for IE/Mac discrepancy between offset and style coordinates,
        // but not if the parent is HTML element (NN6)
        offset -= (elem.offsetParent.tagName != "HTML"
            parseInt(elem.style.top- parseInt(elem.offsetTop0
        offset -= elem.offsetTop
    }
    return offset
}
// find positioning context parent element
function getParentLayer(elem) {
    if (elem.parentNode) {
        while (elem.parentNode != document.body) {
            elem = elem.parentNode
            while (elem.nodeType != 1) {
                elem = elem.parentNode
            }
            if (elem.style.position == "absolute" || elem.style.position == "relative") {
                return elem
            }

elem = elem.parentNode
        }
        return null
    else if (elem.offsetParent && elem.offsetParent.tagName != "HTML") {
        return elem.offsetParent
    else {
        return null
    }
}
// functions that respond to changes in text boxes
function setOuterPage(field) {
    var val = parseInt(field.value)
    var elem = document.getElementById("outerDisplay")
    switch (field.name) {
        case "pageX" :
            elem.style.left = ((elem.offsetParent? getNetOffsetLeft(val, elem: val"px"
            break
        case "pageY" :
            elem.style.top = ((elem.offsetParent? getNetOffsetTop(val, elem: val"px"
            break
    }
    showValues()
}
function setOuterLayer(field) {
    var val = parseInt(field.value)
    switch (field.name) {
        case "left" :
            document.getElementById("outerDisplay").style.left = val + "px"
            break
        case "top" :
            document.getElementById("outerDisplay").style.top = val + "px"
            break
    }
    showValues()
}
function setInnerPage(field) {
    var val = parseInt(field.value)
    var elem = document.getElementById("innerDisplay")
    switch (field.name) {
        case "pageX" :
            elem.style.left = ((elem.offsetParent? getNetOffsetLeft(val, elem: val"px"
            break
        case "pageY" :
            elem.style.top = ((elem.offsetParent? getNetOffsetTop(val, elem: val"px"
            break
    }
    showValues()
}
function setInnerLayer(field) {
    var val = parseInt(field.value)
    switch (field.name) {
        case "left" :
            document.getElementById("innerDisplay").style.left = val + "px"
            break
        case "top" :
            document.getElementById("innerDisplay").style.top = val + "px"
            break
    }
    showValues()
}
function showValues() {
    var form = document.forms[0]
    var outer = document.getElementById("outerDisplay")
    var inner = document.getElementById("innerDisplay")
    form.elements[0].value = outer.offsetLeft + 
    ((outer.offsetParent? getGrossOffsetLeft(outer0)
    form.elements[1].value = outer.offsetTop + 
    ((outer.offsetParent? getGrossOffsetTop(outer0)
    form.elements[2].value = parseInt(outer.style.left)
    form.elements[3].value = parseInt(outer.style.top)
    form.elements[4].value = inner.offsetLeft + 
    ((inner.offsetParent? getGrossOffsetLeft(inner0)
    form.elements[5].value = inner.offsetTop + 
    ((inner.offsetParent? getGrossOffsetTop(inner0)
    form.elements[6].value = parseInt(inner.style.left)
    form.elements[7].value = parseInt(inner.style.top)
}
</SCRIPT>
</HEAD>
<BODY onLoad="showValues()">
<H1>Nested Layer Coordinates (W3C)</H1>
<HR>
Enter new page and layer coordinates for the <FONT COLOR="coral">outer
 layer</FONT> and <FONT COLOR="aquamarine">inner layer</FONT> objects.<P>
<DIV STYLE="position:absolute; top:130">
<FORM>
<TABLE>
<TR>
    <TD ALIGN="right" BGCOLOR="coral">Page X:</TD>
    <TD BGCOLOR="coral"><INPUT TYPE="text" NAME="pageX" SIZE=
        onChange="setOuterPage(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right" BGCOLOR="coral">Page Y:</TD>
    <TD BGCOLOR="coral"><INPUT TYPE="text" NAME="pageY" SIZE=
        onChange="setOuterPage(this)"></TD>
</TR>

<TR>
    <TD ALIGN="right" BGCOLOR="coral">Container X:</TD>
    <TD BGCOLOR="coral"><INPUT TYPE="text" NAME="left" SIZE=
        onChange="setOuterLayer(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right" BGCOLOR="coral">Container Y:</TD>
    <TD BGCOLOR="coral"><INPUT TYPE="text" NAME="top" SIZE=
        onChange="setOuterLayer(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right" BGCOLOR="aquamarine">Page X:</TD>
    <TD BGCOLOR="aquamarine"><INPUT TYPE="text" NAME="pageX" SIZE=
        onChange="setInnerPage(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right" BGCOLOR="aquamarine">Page Y:</TD>
    <TD BGCOLOR="aquamarine"><INPUT TYPE="text" NAME="pageY" SIZE=
        onChange="setInnerPage(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right" BGCOLOR="aquamarine">Container X:</TD>
    <TD BGCOLOR="aquamarine"><INPUT TYPE="text" NAME="left" SIZE=
        onChange="setInnerLayer(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right" BGCOLOR="aquamarine">Container Y:</TD>
    <TD BGCOLOR="aquamarine"><INPUT TYPE="text" NAME="top" SIZE=
        onChange="setInnerLayer(this)"></TD>
</TR>
</TABLE>
</FORM>
</DIV>
<DIV ID="outerDisplay" STYLE="position:absolute; top:130; left:200; width:370;
 height:190; background-color:coral">
<DIV ID="innerDisplay" STYLE="position:absolute; top:5; left:5; width:360;
 height:180; background-color:aquamarine" >
<H2>ARTICLE I</H2>
<P>
Congress shall make no law respecting an establishment of religion, or prohibiting 
the free exercise thereof; or abridging the freedom of speech, or of the press; or 
the right of the people peaceably to assemble, and to petition the government for 
a redress of grievances.
</P>
</DIV>
</DIV>
</BODY>
</HTML>


           
       



-

Leave a Comment / Note


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

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo HTML
» Layer