/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
Nested Layer Coordinates (W3C)
// 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)
}
Nested Layer Coordinates (W3C)
Enter new page and layer coordinates for the outer
layer and inner layer objects.
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.