CD-402 Part VI ✦ Appendixes Listing 19-2 (continued) </SELECT> <BR> Select a rule color (IE only): <SELECT NAME=”color” onChange=”setHRAttr(this)”> <OPTION></OPTION> <OPTION VALUE=”red”>Red</OPTION> <OPTION VALUE=”green”>Green</OPTION> <OPTION VALUE=”blue”>Blue</OPTION> <OPTION VALUE=”#FA8072”>Some Hex Triplet Value</OPTION> </SELECT> <BR> Select a rule shading: <SELECT NAME=”noShade” onChange=”setHRAttr(this)”> <OPTION></OPTION> <OPTION VALUE=true>No Shading</OPTION> <OPTION VALUE=false>Shading</OPTION> </SELECT> <BR> Select a rule height: <SELECT NAME=”size” onChange=”setHRAttr(this)”> <OPTION></OPTION> <OPTION VALUE=2>2 (Default)</OPTION> <OPTION VALUE=4>4 Pixels</OPTION> <OPTION VALUE=10>10 Pixels</OPTION> </SELECT> <BR> Select a rule width: <SELECT NAME=”width” onChange=”setHRAttr(this)”> <OPTION></OPTION> <OPTION VALUE=”100%”>100% (Default)</OPTION> <OPTION VALUE=”80%”>80%</OPTION> <OPTION VALUE=300>300 Pixels </OPTION> </SELECT> </BODY> </HTML> color NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ HR.color CD-403 Appendix F ✦ Examples from Parts III and IV Example See Listing 19-2 earlier in this chapter for an example of values that can be used to set the color property of an HR element object. noShade NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example See Listing 19-2 earlier in this chapter for an example of values that can be used to set the noShade property of an HR element object. Because of the buggy behavior associated with setting this property, adjusting the property in the example has unexpected (and usually undesirable) consequences. size NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example See Listing 19-2 earlier in this chapter for an example of values that can be used to set the size property of an HR element object. width NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example See Listing 19-2 earlier in this chapter for an example of values that can be used to set the width property of an HR element object. HR.width CD-404 Part VI ✦ Appendixes MARQUEE Element Object Properties behavior NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Listing 19-3 contains a page that demonstrates the changes to several MARQUEE element object properties: behavior, bgColor, direction, scrollAmount, and scrollDelay. This page and scripts are intended only for IE4+. See the description of Listing 19-1 for details on the attribute setting script. Listing 19-3: Controlling MARQUEE Object Properties <HTML> <HEAD> <TITLE>MARQUEE Object Properties</TITLE> <SCRIPT LANGUAGE=”JavaScript”> // one function does all! function setMARQUEEAttr(select) { if (document.all && document.all.myMARQUEE) { var choice = select.options[select.selectedIndex].value if (choice) { document.all.myMARQUEE.setAttribute(select.name, choice) } } } </SCRIPT> </HEAD> <BODY> <H1>MARQUEE Object Properties</H1> <BR> <HR> <MARQUEE ID=”myMARQUEE” WIDTH=400 HEIGHT=24>This is the MARQUEE element object you will be controlling.</MARQUEE> <FORM> MARQUEE.behavior CD-405 Appendix F ✦ Examples from Parts III and IV <INPUT TYPE=”button” VALUE=”Start Marquee” onClick=”document.all.myMARQUEE.start()”> <INPUT TYPE=”button” VALUE=”Stop Marquee” onClick=”document.all.myMARQUEE.stop()”> <BR> Select a behavior: <SELECT NAME=”behavior” onChange=”setMARQUEEAttr(this)”> <OPTION></OPTION> <OPTION VALUE=”alternate”>Alternate</OPTION> <OPTION VALUE=”scroll”>Scroll</OPTION> <OPTION VALUE=”slide”>Slide</OPTION> </SELECT> <BR> Select a background color: <SELECT NAME=”bgColor” onChange=”setMARQUEEAttr(this)”> <OPTION></OPTION> <OPTION VALUE=”red”>Red</OPTION> <OPTION VALUE=”green”>Green</OPTION> <OPTION VALUE=”blue”>Blue</OPTION> <OPTION VALUE=”#FA8072”>Some Hex Triplet Value</OPTION> </SELECT> <BR> Select a scrolling direction: <SELECT NAME=”direction” onChange=”setMARQUEEAttr(this)”> <OPTION></OPTION> <OPTION VALUE=”left”>Left</OPTION> <OPTION VALUE=”right”>Right</OPTION> <OPTION VALUE=”up”>Up</OPTION> <OPTION VALUE=”down”>Down</OPTION> </SELECT> <BR> Select a scroll amount: <SELECT NAME=”scrollAmount” onChange=”setMARQUEEAttr(this)”> <OPTION></OPTION> <OPTION VALUE=4>4</OPTION> <OPTION VALUE=6>6 (Default)</OPTION> <OPTION VALUE=10>10</OPTION> </SELECT> <BR> Select a scroll delay: <SELECT NAME=”scrollDelay” onChange=”setMARQUEEAttr(this)”> <OPTION></OPTION> <OPTION VALUE=50>Short</OPTION> <OPTION VALUE=85>Normal</OPTION> <OPTION VALUE=125>Long</OPTION> </SELECT> </BODY> </HTML> MARQUEE.behavior CD-406 Part VI ✦ Appendixes bgColor NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example See Listing 19-3 earlier in this chapter for an example of how to apply values to the bgColor property. direction NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example See Listing 19-3 earlier in this chapter for an example of how to apply values to the direction property. scrollAmount scrollDelay NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example See Listing 19-3 earlier in this chapter for an example of how to apply values to the scrollAmount and scrollDelay properties. MARQUEE.scrollAmount CD-407 Appendix F ✦ Examples from Parts III and IV Methods start() stop() NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example See Listing 19-3 earlier in this chapter for examples of both the start() and stop() methods, which are invoked in event handlers of separate controlling but- tons on the page. Notice, too, that when you have the behavior set to slide, stop- ping and restarting the MARQUEE does not cause the scroll action to start from a blank region. Range Object Properties collapsed NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example Use The Evaluator (Chapter 13) to experiment with the collapsed property. Reload the page and assign a new range to the a global variable by typing the fol- lowing statement into the top text box: a = document.createRange() Next, set the range to encompass a node: a.selectNode(document.body) Range.collapsed CD-408 Part VI ✦ Appendixes Enter a.collapsed into the top text box . The expression returns false because the end points of the range are not the same. commonAncestorContainer NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example Use The Evaluator (Chapter 13) to experiment with the commonAncestorContainer property. Reload the page and assign a new range to the a global variable by typing the following statement into the top text box: a = document.createRange() Now set the start point to the beginning of the contents of the myEM element and set the end point to the end of the surrounding myP element: a.setStartBefore(document.getElementById(“myEM”).firstChild) a.setEndAfter(document.getElementById(“myP”).lastChild) Verify that the text range is set to encompass content from the myEM node (the word “all”) and end of myP nodes: a.toString() Verify, too, that the two end point containers are different nodes: a.startContainer.tagName a.endContainer.tagName Finally, see what node contains both of these two end points: a.commonAncestorContainer.id The result is the myP element, which both the myP and myEM nodes have in common. Range.commonAncestorContainer CD-409 Appendix F ✦ Examples from Parts III and IV endContainer startContainer NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example Use The Evaluator (Chapter 13) to experiment with the endContainer and startContainer properties. Reload the page and assign a new range to the a global variable by typing the following statement into the top text box: a = document.createRange() Now set the range to encompass the myEM element: a.selectNode(document.getElementById(“myEM”) Inspect the containers for both the start and end points of the selection: a.startContainer.id a.endContainer.id The range encompasses the entire myEM element, so the start and end points are outside of the element. Therefore, the container of both start and end points is the myP element that also surrounds the myEM element. endOffset startOffset NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example Use The Evaluator (Chapter 13) to experiment with the endOffset and startOffset properties, following similar paths you just saw in the description. Range.endOffset CD-410 Part VI ✦ Appendixes Reload the page and assign a new range to the a global variable by typing the fol- lowing statement into the top text box: a = document.createRange() Now set the range to encompass the myEM element and then move the start point outward to a character within the myP element’s text node: a.selectNode(document.getElementById(“myEM”)) a.setStart(document.getElementById(“myP”).firstChild, 7) Inspect the node types of the containers for both the start and end points of the selection: a.startContainer.nodeType a.endContainer.nodeType The startContainer node type is 3 (text node), while the endContainer node type is 1 (element). Now inspect the offsets for both the start and end points of the selection: a.startOffset a.endOffset Methods cloneContents() cloneRange() NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example When Netscape outfits the NN6 browser with the cloneContents() method, use The Evaluator (Chapter 13) to see the method in action. Begin by creating a new range object that contains the text of the myP paragraph element. a = document.createRange() a.selectNode(document.getElementById(“myP”) Range.cloneContents() CD-411 Appendix F ✦ Examples from Parts III and IV Next, clone the original range and preserve the copy in variable b: b = a.cloneContents() Move the original range so that it is an insertion point at the end of the body by first expanding it to encompass the entire body and then collapse it to the end a.selectNode(document.body) a.collapse(false) Now, insert the copy at the very end of the body: a.insertNode(b) If you scroll to the bottom of the page, you see a copy of the text. See the description of the compareBoundaryPoints() method later in this chapter to see an example of the cloneRange() method. collapse([startBoolean]) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example See Listings 19-11 and 15-14 to see the collapse() method at work (albeit with the IE TextRange object). compareBoundaryPoints(typeInteger, sourceRangeRef) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example The page rendered by Listing 19-4 lets you experiment with text range comparisons in NN6+. The bottom paragraph contains a SPAN element that has a Range object Range.compareBoundaryPoints() . CD-402 Part VI ✦ Appendixes Listing 19-2 (continued) </SELECT> <BR> Select a rule color (IE. NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ HR.color CD-403 Appendix F ✦ Examples from Parts III and IV Example See Listing 19-2 earlier in this chapter for an example of values that. of values that can be used to set the width property of an HR element object. HR.width CD-404 Part VI ✦ Appendixes MARQUEE Element Object Properties behavior NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4