JavaScript Examples Bible - UserWorks Technologies

Chapter 1 ✦ Generic HTML Element Objects (Chapter 15)
Two controls enable you to set the position of an underlying highlight rectangle
to any line of your choice. A checkbox enables you to set whether the highlight
rectangle should be only as wide as the line or the full width of the bounding rectangle
for the entire SPAN element.
All the code is located in the hilite() function. The SELECT and checkbox elements
invoke this function. Early in the function, the getClientRects() method is
invoked for the main element to capture a snapshot of all TextRectangles for the
entire element. This array comes in handy when the script needs to get the coordinates
of a rectangle for a single line, as chosen in the SELECT element.
Whenever the user chooses a number from the SELECT list and the value is less
than the total number of TextRectangle objects in clientRects, the function
begins calculating the size and location of the underlying yellow highlighter. When
the Full Width checkbox is checked, the left and right coordinates are obtained
from the getBoundingClientRect() method because the entire SPAN element’s
rectangle is the space you’re interested in; otherwise, you pull the left and right
properties from the chosen rectangle in the clientRects array.
Next comes the assignment of location and dimension values to the hiliter
object’s style property. The top and bottom are always pegged to whatever line is
selected, so the clientRects array is polled for the chosen entry’s top and bottom
properties. The previously calculated left value is assigned to the hiliter object’s
pixelLeft property, while the width is calculated by subtracting the left from the
right coordinates. Notice that the top and left coordinates also take into account
any vertical or horizontal scrolling of the entire body of the document. If you resize
the window to a smaller size, line wrapping throws off the original line count.
However, an invocation of hilite() from the onResize event handler applies the
currently chosen line number to whatever content falls in that line after resizing.
Listing 15-27: Using getBoundingClientRect()
getClientRects() and getBoundClientRect() Methods
function hilite() {
var hTop, hLeft, hRight, hBottom, hWidth
var select = document.forms[0].choice
var n = parseInt(select.options[select.selectedIndex].value) - 1
var clientRects = document.all.main.getClientRects()
var mainElem = document.all.main
if (n >= 0 && n < clientRects.length) {
if (document.forms[0].fullWidth.checked) {
hLeft = mainElem.getBoundingClientRect().left
hRight = mainElem.getBoundingClientRect().right
} else {
hLeft = clientRects[n].left
hRight = clientRects[n].right
}
document.all.hiliter.style.pixelTop = clientRects[n].top +
Continued
71
elementObject.getBoundingClientRect()