Using the TextRectangle Object Properties

Using the TextRectangle Object Properties : Text HTML : HTML JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » HTML » Text HTML »

Using the TextRectangle Object Properties



/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

Publisher: John Wiley & Sons CopyRight 2001
ISBN: 0764533428
*/


<HTML>
<HEAD>
<TITLE>TextRectangle Object</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// preserve reference to last clicked elem so resize can re-use it
var lastElem
// TextRectangle left tends to be out of registration by a couple of pixels
var rectLeftCorrection = 2
// process mouse click
function handleClick() {
    var elem = event.srcElement
    if (elem.className && elem.className == "sample") {
        // set hiliter element only on a subset of elements
        lastElem = elem
        setHiliter()
    } else {
        // otherwise, hide the hiliter
        hideHiliter()
    }
}
function setHiliter() {
    if (lastElem) {
        var textRect = lastElem.getBoundingClientRect()
        hiliter.style.pixelTop = textRect.top + document.body.scrollTop
        hiliter.style.pixelLeft = textRect.left + document.body.scrollLeft - rectLeftCorrection
        hiliter.style.pixelHeight = textRect.bottom - textRect.top
        hiliter.style.pixelWidth = textRect.right - textRect.left
        hiliter.style.visibility = "visible"
    }
}
function hideHiliter() {
    hiliter.style.visibility = "hidden"
    lastElem = null
}
</SCRIPT>
</HEAD>
<BODY onClick="handleClick()" onResize="setHiliter()">
<H1>TextRectangle Object</H1>
<HR>
<P>Click on any of the four colored elements in the paragraph below and watch
 the highlight rectangle adjust itself to the element's TextRectangle object.
<P CLASS="sample">Lorem ipsum dolor sit amet, <SPAN CLASS="sample"
 STYLE="color:red">consectetaur adipisicing elit</SPAN>, sed do eiusmod tempor
 <SPAN CLASS="sample" STYLE="color:green">incididunt ut labore et dolore <SPAN
 CLASS="sample" STYLE="color:blue">magna aliqua</SPAN>. Ut enim adminim veniam,
 quis nostrud exercitation ullamco</SPAN> laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit involuptate velit esse cillum
 dolore eu fugiat nulla pariatur.</P>
<DIV ID="hiliter" STYLE="position:absolute; background-color:salmon; z-index:-1;
 visibility:hidden"></DIV>
</BODY>
</HTML>