DHTML Methods

---

Retrieves a collection of rectangles that describe the layout of the contents of an object or range within the client. Each rectangle describes a single line.

 [  collRect =  ] object.getClientRects ( ) 

collRect. The return value is the Text Rectangle collection, each rectangle having four integer properties ( top, left, right, and bottom ). Each property represents a coordinate of the rectangle, in pixels.

The example below demonstrates the use of the getClientRects and getBoundingRect methods to highlight text lines in an object.

<script language="JavaScript">
window.onload=init;
var rcts;
var theCount=0;
var bIsMore=false;
var theClock="";

// Display the length of the clientRects collection 
// when the page loads.
function init ( ) {
lineCount.innerText=theObj.getClientRects ( ).length}

function hiLite ( obj ) {
rcts = obj.getClientRects ( );
rctLength= rcts.length;
if ( theCount > rctLength-1 ) {
  theBack.style.display="none";
  theCount = 0}

// set the rendering properties for the red DIV
cdRight = rcts [ theCount ] .right +
   theBody.scrollLeft;
cdLeft = rcts [ theCount ] .left +
   theBody.scrollLeft;
cdTop = rcts [ theCount ] .top +
   theBody.scrollTop;
cdBottom = rcts [ theCount ] .bottom +
   theBody.scrollTop;
theHiLite.style.top = cdTop;
theHiLite.style.width = ( cdRight-cdLeft ) - 5;
theHiLite.style.display "inline';

// now, set the rendering properties for the gray DIV
bndRight = obj.getBoundingClientRect ( ).right +
   theBody.scrollLeft;
bndLeft = obj.getBoundingClientRect ( ).left +
   theBody.scrollLeft;
bndTop = obj.getBoundingClientRect ( ).top +
   theBody.scrollTop;
theBack.style.top = bndTop;
theBack.style.width = ( bndRight-bndLeft ) - 5;
theBack.style.height = cdTop - bndTop;
if ( theCount>0 ) {
  theBack.style.display "inline';}
theCount++;
}

// Simulate clicking on the paragraph for the 
// length of the clientRects collection.
function doClick ( ) {
if ( bIsMore==false ) {
  bIsMore=true;
  theButton.value="Stop Clicking";
  theClock=window.setInterval ( "simClick ( )", 250 );}
else{
  theButton.value="Simulate Click";
  window.clearInterval ( theClock );
  bIsMore=false;}
}

function simClick ( ) {
if ( theCount==theObj.getClientRects ( ).length ) {
  theObj.click ( );
  theButton.value="Simulate Click";
  bIsMore=false;
  window.clearInterval ( theClock );}
else{
  theObj.click ( );}
}
</script>

<h5 align="center">Gettysburg Address</h5>
<div id="theObj" onclick="hiLite ( this )">
  Four score and seven years ago . . . </div>

<div style="position:absolute; left:20; top:400;
   z-index:-1; background-color:'red';
   display:'none'" id="theHiLite"></div>
<div style="position:absolute; left:20; top:400;
   z-index:-1; background-color:'gray';
   display:'none'" id="theBack"></div>

 Show me 

The next example shows how the Text Rectangle collection and getBoundingClientRect method can be harnessed to determine position within an element. In each line the left-justified text does not extend to the right margin of the box that contains the text. Using the collection, it is possible to determine the coordinates of the rectangle that surrounds only the content in each line. By reading these rectangles and then comparing the coordinates against the rectangle around the ball image, the sample instructs the ball to move over the text only, and not to the end of the line.

<script language="JavaScript">
document.parentWindow.status = "";
var timid = -1;
var timtheObj = -1;
var nLine;
var nPosInLine;
var oRcts;
var nDivLen;
var nEraser;

function LoadDone ( ) {
oTextRange = document.body.createTextRange ( );
oRcts = oTextRange.getClientRects ( );

// Get bounding rect of the range
nLine = 0;
oBndRct = obj.getBoundingClientRect ( );
nDivLen = oBndRct.right - oBndRct.left + 1;
MoveTo ( );}

function MoveTo ( ) {
if ( nLine >= oRcts.length ) {
  nLine = 0;}
obj.style.top = oRcts [ nLine ] .top;
nPosInLine = oRcts [ nLine ] .left;
nEraser = 0;
timtheObj = setInterval ( "MoveToInLine ( )", 5 );}

function MoveToInLine ( ) {
if ( nPosInLine >= oRcts [ nLine ] .right - nDivLen ) {
  clearInterval ( timtheObj );
  timtheObj = -1;
  obj.style.left = oRcts [ nLine ] .right - nDivLen;
  nLine++;
  timid = setTimeout ( "MoveTo ( )", 5 );
  return;}
if ( nEraser == 0 ) {
  nEraser = 1;
  im.src = "imgs/dot.gif";}
else {
  nEraser = 0;
  im.src = "imgs/dot.gif";}
obj.style.left = nPosInLine;
nPosInLine += 3;}

function End ( ) {
if ( timid != -1 )
  clearInterval ( timid );
  timid = -1;
  if ( timtheObj != -1 )
    clearInterval ( timtheObj );
  timtheObj = -1;
}
</script>

 Show me 

Note that the timers are reset and the loaded functions are fired for each resize.

<body . . . onresize="End ( );LoadDone ( ) " . . . >

getBoundingClientRect, TextRectangle Collection, TextRectangle Object