JavaScript Bible, Gold Edition part 197. This book will bring programmers and non-technical professionals, including casual programmers and scripters, painlessly up to speed on all aspects of mastering JavaScript. Key topics include programming fundamentals, JavaScript language elements and how to use them effectively, and how to easily and efficiently add powerful new functionality to HTML documents and Java applets. | CD-452 Part VI Appendixes An important part of the listing is the way the action of sizing and showing the positioned element is broken out as a separate function setHiliter from the one that is the onClick event handler function handleClick . This is done so that the onResize event handler can trigger a script that gets the current rectangle for the last element clicked and the positioned element can be sized and moved to maintain the highlight of the same text. As an experiment try removing the onResize event handler from the BODY tag and watch what happens to the highlighted rectangle after you resize the browser window the rectangle that represents the TextRectangle remains unchanged and loses track of the abstract TextRectangle associated with the actual element object. Listing 19-12 Using the TextRectangle Object Properties 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 if 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 -rectLeftCorrection - - visible function hideHiliter hidden lastElem null Appendix F Examples from Parts III and IV CD-453 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 .
