JavaScript Examples Bible - UserWorks Technologies

Chapter 1 ✦ Generic HTML Element Objects (Chapter 15)
Example
The following IE script statements utilize all four “offset” dimensional properties
to size and position a DIV element so that it completely covers a SPAN element
located within a P element. This can be for a fill-in-the-blank quiz that provides text
entry fields elsewhere on the page. As the user gets an answer correct, the blocking
DIV element is hidden to reveal the correct answer.
document.all.blocker.style.pixelLeft = document.all.span2.offsetLeft
document.all.blocker.style.pixelTop = document.all.span2.offsetTop
document.all.blockImg.height = document.all.span2.offsetHeight
document.all.blockImg.width = document.all.span2.offsetWidth
Because the offsetParent property for the SPAN element is the BODY element,
the positioned DIV element can use the same positioning context (it’s the default
context, anyway) for setting the pixelLeft and pixelTop style properties.
(Remember that positioning properties belong to an element’s style object.) The
offsetHeight and offsetWidth properties can read the dimensions of the SPAN
element (the example has no borders, margins, or padding to worry about) and
assign them to the dimensions of the image contained by the blocker DIV element.
This example is also a bit hazardous in some implementations. If the text of span2
wraps to a new line, the new offsetHeight value has enough pixels to accommodate
both lines. But the blockImg and blocker DIV elements are block-level elements that
render as a simple rectangle. In other words, the blocker element doesn’t turn into
two separate strips to cover the pieces of span2 that spread across two lines.
offsetParent
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓ ✓ ✓ ✓
Example
You can use the offsetParent property to help you locate the position of a
nested element on the page. Listing 15-12 demonstrates how a script can “walk” up
the hierarchy of offsetParent objects in IE for Windows to assemble the location of
a nested element on a page. The goal of the exercise in Listing 15-12 is to position an
image at the upper-left corner of the second table cell. The entire table is centered
on the page.
The onLoad event handler invokes the setImagePosition() function. The
function first sets a Boolean flag that determines whether the calculations should
be based on the client or offset sets of properties. IE4/Windows and IE5/Mac rely
on client properties, while IE5+/Windows works with the offset properties. The
discrepancies even out, however, with the while loop. This loop traverses the
offsetParent hierarchy starting with the offsetParent of the cell out to, but not
including, the document.body object. The body object is not included because that
is the positioning context for the image. In IE5, the while loop executes only once
33
elementObject.offsetParent