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.offsetLeft) : 0
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.offsetTop) : 0
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.offsetLeft) : 0
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.offsetTop) : 0
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(outer) : 0)
form.elements[1].value = outer.offsetTop +
((outer.offsetParent) ? getGrossOffsetTop(outer) : 0)
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(inner) : 0)
form.elements[5].value = inner.offsetTop +
((inner.offsetParent) ? getGrossOffsetTop(inner) : 0)
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=3
onChange="setOuterPage(this)"></TD>
</TR>
<TR>
<TD ALIGN="right" BGCOLOR="coral">Page Y:</TD>
<TD BGCOLOR="coral"><INPUT TYPE="text" NAME="pageY" SIZE=3
onChange="setOuterPage(this)"></TD>
</TR>
<TR>
<TD ALIGN="right" BGCOLOR="coral">Container X:</TD>
<TD BGCOLOR="coral"><INPUT TYPE="text" NAME="left" SIZE=3
onChange="setOuterLayer(this)"></TD>
</TR>
<TR>
<TD ALIGN="right" BGCOLOR="coral">Container Y:</TD>
<TD BGCOLOR="coral"><INPUT TYPE="text" NAME="top" SIZE=3
onChange="setOuterLayer(this)"></TD>
</TR>
<TR>
<TD ALIGN="right" BGCOLOR="aquamarine">Page X:</TD>
<TD BGCOLOR="aquamarine"><INPUT TYPE="text" NAME="pageX" SIZE=3
onChange="setInnerPage(this)"></TD>
</TR>
<TR>
<TD ALIGN="right" BGCOLOR="aquamarine">Page Y:</TD>
<TD BGCOLOR="aquamarine"><INPUT TYPE="text" NAME="pageY" SIZE=3
onChange="setInnerPage(this)"></TD>
</TR>
<TR>
<TD ALIGN="right" BGCOLOR="aquamarine">Container X:</TD>
<TD BGCOLOR="aquamarine"><INPUT TYPE="text" NAME="left" SIZE=3
onChange="setInnerLayer(this)"></TD>
</TR>
<TR>
<TD ALIGN="right" BGCOLOR="aquamarine">Container Y:</TD>
<TD BGCOLOR="aquamarine"><INPUT TYPE="text" NAME="top" SIZE=3
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>
Related examples in the same category