CD-592 Part VI ✦ Appendixes Listing 31-20 shows how to achieve the same action with IE5+ and NN6+ syntax. Listing 31-9: Relationships Among zIndex, above, and below <HTML> <HEAD> <TITLE>Layer zIndex</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function setZ(field) { switch (field.name) { case “top” : document.top.zIndex = parseInt(field.value) break case “mid” : document.middle.zIndex = parseInt(field.value) break case “bot” : document.bottom.zIndex = parseInt(field.value) } showValues() } function showValues() { document.layers[0].document.forms[0].bot.value = document.bottom.zIndex document.layers[1].document.forms[0].mid.value = document.middle.zIndex document.layers[2].document.forms[0].top.value = document.top.zIndex document.layers[0].document.forms[0].above.value = (document.bottom.above) ? document.bottom.above.name : “(none)” document.layers[1].document.forms[0].above.value = (document.middle.above) ? document.middle.above.name : “(none)” document.layers[2].document.forms[0].above.value = (document.top.above) ? document.top.above.name : “(none)” document.layers[0].document.forms[0].below.value = (document.bottom.below) ? document.bottom.below.name : “(none)” document.layers[1].document.forms[0].below.value = (document.middle.below) ? document.middle.below.name : “(none)” document.layers[2].document.forms[0].below.value = (document.top.below) ? document.top.below.name : “(none)” } </SCRIPT> </HEAD> <BODY onLoad=”showValues()”> <B>Setting the <TT>layer.zIndex</TT> Property of Sibling Layers</B> <HR> Enter new zIndex values to see the effect on three layers.<P> <LAYER TOP=90 WIDTH=240 BGCOLOR=”coral”> <FORM> Control Original Bottom Layer:<BR> document.layerObject.zIndex CD-593 Appendix F ✦ Examples from Parts III and IV <TABLE> <TR><TD ALIGN=”right”>Layer zIndex:</TD><TD><INPUT TYPE=”text” NAME=”bot” SIZE=3 onChange=”setZ(this)”></TD></TR> <TR><TD ALIGN=”right”>Layer above:</TD><TD><INPUT TYPE=”text” NAME=”above” SIZE=13></TD></TR> <TR><TD ALIGN=”right”>Layer below:</TD><TD><INPUT TYPE=”text” NAME=”below” SIZE=13></TD></TR> </TABLE> </FORM> </LAYER> <LAYER TOP=220 WIDTH=240 BGCOLOR=”aquamarine”> <FORM> Control Original Middle Layer:<BR> <TABLE> <TR><TD ALIGN=”right”>Layer zIndex:</TD><TD><INPUT TYPE=”text” NAME=”mid” SIZE=3 onChange=”setZ(this)”></TD></TR> <TR><TD ALIGN=”right”>Layer above:</TD><TD><INPUT TYPE=”text” NAME=”above” SIZE=13></TD></TR> <TR><TD ALIGN=”right”>Layer below:</TD><TD><INPUT TYPE=”text” NAME=”below” SIZE=13></TD></TR> </TABLE></FORM> </LAYER> <LAYER TOP=350 WIDTH=240 BGCOLOR=”yellow”> <FORM> Control Original Top Layer:<BR> <TABLE><TR><TD ALIGN=”right”>Layer zIndex:</TD><TD><INPUT TYPE=”text” NAME=”top” SIZE=3 onChange=”setZ(this)”></TD></TR> <TR><TD ALIGN=”right”>Layer above:</TD><TD><INPUT TYPE=”text” NAME=”above” SIZE=13></TD></TR> <TR><TD ALIGN=”right”>Layer below:</TD><TD><INPUT TYPE=”text” NAME=”below” SIZE=13></TD></TR> </TABLE> </FORM> </LAYER> <LAYER NAME=”bottom” BGCOLOR=”coral” TOP=90 LEFT=260 WIDTH=300 HEIGHT=190> <P><B>Original Bottom Layer</B></P> </LAYER> <LAYER NAME=”middle” BGCOLOR=”aquamarine” TOP=110 LEFT=280 WIDTH=300 HEIGHT=190> <P><B>Original Middle Layer</B></P> </LAYER> <LAYER NAME=”top” BGCOLOR=”yellow” TOP=130 LEFT=300 WIDTH=300 HEIGHT=190> <P><B>Original Top Layer</B></P> </LAYER> </LAYER> </BODY> </HTML> document.layerObject.zIndex CD-594 Part VI ✦ Appendixes Methods load(“URL”, newLayerWidth) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example Buttons in Listing 31-10 enable you to load short and long documents into a layer. The first two buttons don’t change the width (in fact, the second parameter to layerObject.load() is the layerObject.clip.left value). For the second two buttons, a narrower width than the original is specified. Click the Restore button frequently to return to a known state. Listing 31-10: Loading Documents into Layers <HTML> <HEAD> <TITLE>Layer Loading</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function loadDoc(URL,width) { if (!width) { width = document.myLayer.clip.width } document.myLayer.load(URL, width) } </SCRIPT> </HEAD> <BODY> <B>Loading New Documents</B> <HR> <LAYER TOP=90 WIDTH=240 BGCOLOR=”yellow”> <FORM> Loading new documents:<BR> <INPUT TYPE=”button” VALUE=”Small Doc/Existing Width” onClick=”loadDoc(‘article1.htm’)”><BR> <INPUT TYPE=”button” VALUE=”Large Doc/Existing Width” onClick=”loadDoc(‘bofright.htm’)”><P> <INPUT TYPE=”button” VALUE=”Small Doc/Narrower Width” onClick=”loadDoc(‘article1.htm’,200)”><BR> <INPUT TYPE=”button” VALUE=”Large Doc/Narrower Width” onClick=”loadDoc(‘bofright.htm’,200)”><P> <INPUT TYPE=”button” VALUE=”Restore” onClick=”location.reload()”></FORM> document.layerObject.load() CD-595 Appendix F ✦ Examples from Parts III and IV </LAYER> <LAYER NAME=”myLayer” BGCOLOR=”yellow” TOP=90 LEFT=300 WIDTH=300 HEIGHT=190> <P><B>Text loaded in original document.</B></P> </LAYER> </BODY> </HTML> moveAbove(layerObject) moveBelow(layerObject) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example You can see the layerObject.moveAbove() method at work in Listing 31-1. moveBy(deltaX,deltaY) moveTo(x,y) moveToAbsolute(x,y) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example Listing 31-11 shows a demonstration of the layerObject.moveTo() method. It is a simple script that enables you to click and drag a layer around the screen. The script employs the coordinate values of the mouseMove event; after compensating for the offset within the layer at which the click occurs, the script moves the layer to track the mouse action. I want to present this example for an additional reason: to explain an important user interface difference between Windows and Macintosh versions of NN4. In Windows versions, you can click and hold the mouse button down on an object and let the object receive all the mouseMove events as you drag the cursor around the screen. On the Macintosh, however, NN4 tries to compensate for the lack of a second mouse document.layerObject.moveBy() CD-596 Part VI ✦ Appendixes button by popping up a context-sensitive menu at the cursor position when the user holds the mouse button down for more than just a click. To prevent the pop-up menu from appearing, the engage() method invoked by the onMouseDown event handler ends with return false. Notice in the following listing how the layer captures a number of mouse events. Each one plays an important role in creating a mode that is essentially like a mouseStillDown event (which doesn’t exist in NN4’s event model). The mouseDown event sets a Boolean flag (engaged) indicating that the user clicked down in the layer. At the same time, the script records how far away from the layer’s top-left corner the mouseDown event occurred. This offset information is needed so that any setting of the layer’s location takes this offset into account (otherwise, the top-left corner of the layer would jump to the cursor position and be dragged from there). During the drag ( mouseDown events firing with each mouse movement), the dragIt() function checks whether the drag mode is engaged. If so, the layer is moved to the page location calculated by subtracting the original downstroke offset from the mouseMove event location on the page. When the user releases the mouse button, the mouseUp event turns off the drag mode Boolean value. Listing 31-21 shows a version of this example for IE5+ and NN6. Listing 31-11: Dragging a Layer <HTML> <HEAD> <TITLE>Layer Dragging</TITLE> <SCRIPT LANGUAGE=”JavaScript”> var engaged = false var offsetX = 0 var offsetY = 0 function dragIt(e) { if (engaged) { document.myLayer.moveTo(e.pageX - offsetX, e.pageY - offsetY) } } function engage(e) { engaged = true offsetX = e.pageX - document.myLayer.left offsetY = e.pageY - document.myLayer.top return false } function release() { engaged = false } </SCRIPT> </HEAD> <BODY> document.layerObject.moveBy() CD-597 Appendix F ✦ Examples from Parts III and IV <B>Dragging a Layer</B> <HR> <LAYER NAME=”myLayer” BGCOLOR=”lightgreen” TOP=90 LEFT=100 WIDTH=300 HEIGHT=190> <P><B>Drag me around the window.</B></P> </LAYER> <SCRIPT LANGUAGE=”JavaScript”> document.myLayer.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP | Event.MOUSEMOVE) document.myLayer.onMouseDown = engage document.myLayer.onMouseUp = release document.myLayer.onMouseMove = dragIt </SCRIPT> </BODY> </HTML> resizeBy(deltaX,deltaY) resizeTo(width,height) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example It is important to understand the ramifications of content flow when these two methods resize a layer. Listing 31-12a (and the companion document Listing 31-12b) shows you how to set the lower-right corner of a layer to be dragged by a user for resizing the layer (much like grabbing the resize corner of a document window). Three radio buttons enable you to choose whether and when the content should be redrawn to the layer — never, after resizing, or during resizing. Event capture is very much like that in Listing 31-11 for layer dragging. The primary difference is that drag mode is engaged only when the mouse event takes place in the region of the lower-right corner. A different kind of offset value is saved here because, for resizing, the script needs to know the mouse event offset from the right and bottom edges of the layer. Condition statements in the resizeIt() and release() functions verify whether a specific radio button is checked to determine when (or if) the content should be redrawn. I designed this page with the knowledge that its content might be redrawn. Therefore, I built the content of the layer as a separate HTML document that loads in the <LAYER> tag. document.layerObject.resizeBy() CD-598 Part VI ✦ Appendixes Redrawing the content requires reloading the document into the layer. I use the layerObject.load() method because I want to send the current layerObject.clip.width as a parameter for the width of the clip region to accommodate the content as it loads. An important point to know about reloading content into a layer is that all property settings for the layer’s event capture are erased when the document loads. Overcoming this behavior requires setting the layer’s onLoad event handler to set the layer’s event capture mechanism. If the layer event capturing is specified as part of the statements at the end of the document, the layer ignores some important events needed for the dynamic resizing after the document reloads the first time. As you experiment with the different ways to resize and redraw, you see that redrawing during resizing is a slow process because of the repetitive loading (from cache) needed each time. On slower client machines, it is easy for the cursor to outrun the layer region, causing the layer to not get mouseOver events at all. It may not be the best-looking solution, but I prefer to redraw after resizing the layer. Listing 31-22 shows a version designed for the IE5+ and NN6 object models. Because content automatically reflows in those browsers, you do not have to load the con- tent of the positioned element from an external document. Listing 31-12a: Resizing a Layer <HTML> <HEAD> <TITLE>Layer Resizing</TITLE> <SCRIPT LANGUAGE=”JavaScript”> var engaged = false var offsetX = 0 var offsetY = 0 function resizeIt(e) { if (engaged) { document.myLayer.resizeTo(e.pageX + offsetX, e.pageY + offsetY) if (document.forms[0].redraw[2].checked) { document.myLayer.load(“lst31-12b.htm”, document.myLayer.clip.width) } } } function engage(e) { if (e.pageX > (document.myLayer.clip.right - 10) && e.pageY > (document.myLayer.clip.bottom - 10)) { engaged = true offsetX = document.myLayer.clip.right - e.pageX offsetY = document.myLayer.clip.bottom - e.pageY } } document.layerObject.resizeBy() CD-599 Appendix F ✦ Examples from Parts III and IV function release() { if (engaged && document.forms[0].redraw[1].checked) { document.myLayer.load(“lst31-12b.htm”, document.myLayer.clip.width) } engaged = false } function grabEvents() { document.myLayer.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP | Event.MOUSEMOVE) } </SCRIPT> </HEAD> <BODY> <B>Resizing a Layer</B> <HR> <FORM> Redraw layer content:<BR> <INPUT TYPE=”radio” NAME=”redraw” CHECKED>Never <INPUT TYPE=”radio” NAME=”redraw”>After resize <INPUT TYPE=”radio” NAME=”redraw”>During resize </FORM> <LAYER NAME=”myLayer” SRC=”lst31-12b.htm” BGCOLOR=”lightblue” TOP=120 LEFT=100 WIDTH=300 HEIGHT=190 onLoad=”grabEvents()”> </LAYER> <SCRIPT LANGUAGE=”JavaScript”> document.myLayer.onMouseDown = engage document.myLayer.onMouseUp = release document.myLayer.onMouseMove = resizeIt </SCRIPT> </BODY> </HTML> Listing 31-12b: Content for the Resizable Layer <HTML> <BODY> <P><B>Resize me by dragging the lower-right corner.</B></P> <SCRIPT LANGUAGE=”JavaScript”> if (navigator.userAgent.indexOf(“Mac”) != -1) { document.write(“(Mac users: Ctrl-Click me first; then Click to stop dragging.)”) } </SCRIPT> </BODY> </HTML> document.layerObject.resizeBy() CD-600 Part VI ✦ Appendixes Chapter 34 Examples The following section contains examples from Chapter 34, “The String Object.” String Object Properties constructor NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓✓✓ Example Use The Evaluator (Chapter 13) to test the value of the constructor property. Enter the following statements into the top text box: a = new String(“abcd”) a.constructor == String a.constructor == Number Parsing methods string.charAt(index) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example Enter each of the following statements into the top text box of The Evaluator: a = “banana daiquiri” a.charAt(0) stringObject.charAt() CD-601 Appendix F ✦ Examples from Parts III and IV a.charAt(5) a.charAt(6) a.charAt(20) Results from each of the charAt() methods should be b, a (the third “a” in “banana”), a space character, and an empty string, respectively. string.charCodeAt([index]) String.fromCharCode(num1 [, num2 [, numn]]) Returns: Integer code number for a character; concatenated string value of code numbers supplied as parameters. NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓✓✓ Example Listing 34-2 provides examples of both methods on one page. Moreover, because one of the demonstrations relies on the automatic capture of selected text on the page, the scripts include code to accommodate the different handling of selection events and capture of the selected text in Navigator and Internet Explorer 4. After you load the page, select part of the body text anywhere on the page. If you start the selection with the lowercase letter “a,” the character code displays as 97. If you select no text, the result is NaN. Try entering numeric values in the three fields at the bottom of the page. Values below 32 are ASCII control characters that most fonts represent as hollow squares. But try all other values to see what you get. Notice that the script passes all three values as a group to the String.fromCharCode() method, and the result is a com- bined string. stringObject.charCodeAt() . CD-592 Part VI ✦ Appendixes Listing 31-20 shows how to achieve the same action with IE5+ and NN6+ syntax. Listing. and below <HTML> <HEAD> <TITLE>Layer zIndex</TITLE> <SCRIPT LANGUAGE= JavaScript > function setZ(field) { switch (field.name) { case “top” : document.top.zIndex =. Original Bottom Layer:<BR> document.layerObject.zIndex CD-593 Appendix F ✦ Examples from Parts III and IV <TABLE> <TR><TD ALIGN=”right”>Layer zIndex:</TD><TD><INPUT