898 Part III ✦ Document Objects Reference Listing 31-22 (continued) offsetY += document.body.scrollTop } } return false } } } function release(evt) { evt = (evt) ? evt : (window.event) ? window.event : “” var targElem = (evt.target) ? evt.target : evt.srcElement if (targElem.className == “draggable”) { while (targElem.id != “myLayer” && targElem.parentNode) { targElem = targElem.parentNode } if (engaged && targElem.id == “myLayer”) { engaged = false } } } </SCRIPT> </HEAD> <BODY> <H1>Resizing a Layer (W3C)</H1> <HR> <DIV ID=”myLayer” CLASS=”draggable” STYLE=”position:absolute; top:170; left:100; width:300; height:190; background-color:lightblue”> <SPAN>Here is some content inside the layer. See what happens to it as you resize the layer via the bottom-right 20-pixel handle.</SPAN> </DIV> <SCRIPT LANGUAGE=”JavaScript”> document.onmousedown = engage document.onmouseup = release document.onmousemove = resizeIt document.onmouseout = release </SCRIPT> </BODY> </HTML> This chapter only scratches the surface in the kinds of positioned element actions you can control via scripts. You may have seen examples of positioned ele- ment scripting at sites around the Web. For example, some pages have subject head- ers fly into place — even “bounce” around until they settle into position. Or elements can go in circles or spirals to get your attention (or distract you, as the case may be). The authors of those tricks apply formulas from other disciplines (such as games programming) to the style object properties of a positioned element. 899 Chapter 31 ✦ Positioned Objects Sometimes the effects are there just for the sake of looking (at first anyway) cool or because the page author knows how to script those effects. Your chief guide in implementing such features, however, should be whether the scripting genuinely adds value to the content offering. If you don’t improve the content by adding a fly- ing doo-dad or pulsating images, then leave them out. A greater challenge is finding meaningful ways to apply positioning techniques. Done the right way and for the right reason, they can significantly enhance the visitor’s enjoyment of your application. ✦✦✦ . 898 Part III ✦ Document Objects Reference Listing 31-22 (continued) offsetY += document.body.scrollTop } } return. the layer via the bottom-right 20-pixel handle.</SPAN> </DIV> <SCRIPT LANGUAGE= JavaScript > document.onmousedown = engage document.onmouseup = release document.onmousemove. rectangular space on the page and generally confines its activities to that rectangle. But in many cases, JavaScript can also interact with the content or the player, allowing your scripts to extend themselves