CD-392 Part VI ✦ Appendixes bottomMargin leftMargin rightMargin topMargin NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Both of the following statements change the default left margin in IE4+: document.body.leftMargin = 30 or document.body.style.marginLeft = 30 leftMargin See bottomMargin. link See aLink. noWrap NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example To change the word wrapping behavior from the default, the statement is: document.body.noWrap = true document.body.noWrap CD-393 Appendix F ✦ Examples from Parts III and IV rightMargin See bottomMargin. scroll NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example To change the scrollbar appearance from the default, the statement is: document.body.scroll = “no” scrollLeft scrollTop NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Listing 18-20 is the IE4+ version of the NN example for pageXOffset and pageYOffset properties (Listing 16-13). Everything about these two examples is the same except for the syntax that retrieves the values indicating how much the document is scrolled in a window. Listing 18-20: Viewing the scrollLeft and scrollTop Properties <HTML> <HEAD> <TITLE>Master of all Windows</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function leftFrame() { var output = “<HTML><BODY><H3>Body Scroll Values</H3><HR>\n” Continued document.body.scrollLeft CD-394 Part VI ✦ Appendixes Listing 18-20 (continued) output += “<FORM>body.scrollLeft:<INPUT TYPE=’text’ NAME=’xOffset’ SIZE=4><BR>\n” output += “body.scrollTop:<INPUT TYPE=’text’ NAME=’yOffset’ SIZE=4><BR>\n” output += “</FORM></BODY></HTML>” return output } function rightFrame() { var output = “<HTML><HEAD><SCRIPT LANGUAGE=’JavaScript’>\n” output += “function showOffsets() {\n” output += “parent.readout.document.forms[0].xOffset.value = “ + “document.body.scrollLeft\n” output += “parent.readout.document.forms[0].yOffset.value = “ + “document.body.scrollTop\n}\n” output += “document.onclick = showOffsets\n” output += “<\/SCRIPT></HEAD><BODY><H3>Content Page</H3>\n” output += “Scroll this frame and click on a table border to view “ + “page offset values.<BR><HR>\n” output += “<TABLE BORDER=5 WIDTH=800>” var oneRow = “<TD>Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD><TD>Cell 4</TD>” + “<TD>Cell 5</TD>” for (var i = 1; i <= 30; i++) { output += “<TR><TD><B>Row “ + i + “</B></TD>” + oneRow + “</TR>” } output += “</TABLE></BODY></HTML>” return output } </SCRIPT> </HEAD> <FRAMESET COLS=”30%,70%”> <FRAME NAME=”readout” SRC=”javascript:parent.leftFrame()”> <FRAME NAME=”display” SRC=”javascript:parent.rightFrame()”> </FRAMESET> </HTML> text See aLink. topMargin See bottomMargin. document.body.topMargin CD-395 Appendix F ✦ Examples from Parts III and IV vLink See aLink. Methods createTextRange() NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example See Listing 19-8 for an example of the createTextRange() method in action. doScroll([“scrollAction”]) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example Use The Evaluator (Chapter 13) to experiment with the doScroll() method in IE5+. Size the browser window so that at least the vertical scrollbar is active (mean- ing it has a thumb region). Enter the following statement into the top text field and press Enter a few times to simulate clicking the PgDn key: document.body.doScroll() Return to the top of the page and now do the same for scrolling by the increment of the scrollbar down arrow: document.body.doScroll(“down”) You can also experiment with upward scrolling. Enter the desired statement in the top text field and leave the text cursor in the field. Manually scroll to the bottom of the page and then press Enter to activate the command. document.body.doScroll() CD-396 Part VI ✦ Appendixes Event Handlers onAfterPrint onBeforePrint See the onAfterPrint event handler for the window object, Chapter 16. onScroll NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Listing 18-21 is a highly artificial demonstration of what can be a useful tool for some page designs. Consider a document that occupies a window or frame, but one that you don’t want scrolled, even by accident with one of the newer mouse wheels that are popular with Wintel PCs. If scrolling of the content would destroy the appearance or value of the content, then you want to make sure that the page always zips back to the top. The onScroll event handler in Listing 18-21 does just that. Notice that the event handler is set as a property of the document.body object after the page has loaded. While the event handler can also be set as an attribute of the <BODY> tag, to assign it as a property requires the page to load first. Until then, the document.body object does not yet officially exist in the object model for this page. Listing 18-21: Forcing Scrolling to Stay at the Page Top <HTML> <HEAD> <TITLE>onScroll Event Handler</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function zipBack() { window.scroll(0,0) } function init() { document.body.onscroll = zipBack } </SCRIPT> </HEAD> <BODY onLoad=”init()”> document.body.onScroll CD-397 Appendix F ✦ Examples from Parts III and IV <H1>onScroll Event Handler</H1> <HR> This page always zips back to the top if you try to scroll it. <P> <IFRAME FRAMEBORDER=0 SCROLLING=”no” HEIGHT=1000 SRC=”bofright.htm”></IFRAME> </P> </BODY> </HTML> Chapter 19 Examples The following sections contain examples from Chapter 19, “Body Text Objects.” FONT Element Object Properties color NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Listing 19-1 contains a page that demonstrates changes to the three FONT element object properties: color, face, and size. Along the way, you can see an economi- cal use of the setAttribute() method to do the work for all of the property changes. This page loads successfully in all browsers, but the SELECT lists make changes to the text only in IE4+ and NN6+. A P element contains a nested FONT element that encompasses three words whose appearance is controlled by three select lists. Each list controls one of the three FONT object properties, and their NAME attributes are strategically assigned the names of the properties (as you see in a moment). VALUE attributes for OPTION elements contain strings that are to be assigned to the various properties. Each SELECT element invokes the same setFontAttr() function, passing a reference to itself so that the function can inspect details of the element. FONT.color CD-398 Part VI ✦ Appendixes The first task of the setFontAttr() function is to make sure that only browsers capable of treating the FONT element as an object get to the meat of the function. The test for the existence of document.all and the myFONT element blocks all older browsers from changing the font characteristics. As the page loads, the document.all property is set for NN6 by using a variation of the normalization technique described in Chapter 14. For suitably equipped browsers, the function next extracts the string from the value property of the SELECT object that was passed to the function. If a selection is made (meaning other than the first, empty one), then the single nested statement uses the setAttribute() method to assign the value to the attribute whose name matches the name of the SELECT element. An odd bug in IE5/Mac doesn’t let the rendered color change when changing the color property. But the setting is valid, as proven by selecting any of the other two property choices. Listing 19-1: Controlling FONT Object Properties <HTML> <HEAD> <TITLE>FONT Object Properties</TITLE> <SCRIPT LANGUAGE=”JavaScript”> // document.all normalization trick for NN6 if (navigator.appName == “Netscape” && parseInt(navigator.appVersion) >= 5) { document.all = document.getElementsByTagName(“*”) } // one function does all! function setFontAttr(select) { if (document.all && document.all.myFONT) { var choice = select.options[select.selectedIndex].value if (choice) { document.all.myFONT.setAttribute(select.name, choice) } } } </SCRIPT> </HEAD> <BODY> <H1>Font Object Properties</H1> <BR> <P>This may look like a simple sentence, but <FONT ID=”myFONT”>THESE THREE WORDS</FONT> are contained by a FONT element.</P> Note FONT.color CD-399 Appendix F ✦ Examples from Parts III and IV <FORM> Select a text color: <SELECT NAME=”color” onChange=”setFontAttr(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 font face: <SELECT NAME=”face” onChange=”setFontAttr(this)”> <OPTION></OPTION> <OPTION VALUE=”Helvetica”>Helvetica</OPTION> <OPTION VALUE=”Times”>Times</OPTION> <OPTION VALUE=”Comic Sans MS, sans-serif”>Comic Sans MS, sans-serif</OPTION> <OPTION VALUE=”Courier, monospace”>Courier, monospace</OPTION> <OPTION VALUE=”Zapf Dingbats, serif”>Zapf Dingbats, serif</OPTION> </SELECT> <BR> Select a font size: <SELECT NAME=”size” onChange=”setFontAttr(this)”> <OPTION></OPTION> <OPTION VALUE=”3”>3 (Default)</OPTION> <OPTION VALUE=”+1”>Increase Default by 1</OPTION> <OPTION VALUE=”-1”>Decrease Default by 1</OPTION> <OPTION VALUE=”1”>Smallest</OPTION> <OPTION VALUE=”7”>Biggest</OPTION> </SELECT> </BODY> </HTML> face NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example See Listing 19-1 for an example of values that can be used to set the face property of a FONT element object. While you will notice visible changes to most choices on the page, the font face selections may not change from one choice to another, which all depends on the fonts that are installed on your PC. FONT.face CD-400 Part VI ✦ Appendixes size NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example See Listing 19-1 for an example of values that can be used to set the size property of a FONT element object. Notice that incrementing or decrementing the size prop- erty is applied only to the size assigned to the SIZE attribute of the element (or the default, if none is specified) and not the current setting adjusted by script. HR Element Object Properties align NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Listing 19-2 contains a page that demonstrates the changes to the five HR element object properties: align, color, noShade, size, and width. Along the way, you can see an economical use of the setAttribute() method to do the work for all of the property changes. This page loads successfully in all browsers, but the SELECT lists make changes to the text only in IE4+ and NN6+ (because they treat the element as an object). An HR element (whose ID is myHR) is displayed with the browser default settings (100% width, centered, and its “magic” color). Each list controls one of the five HR object properties, and their NAME attributes are strategically assigned the names of the properties (as you see in a moment). VALUE attributes for OPTION elements contain strings that are to be assigned to the various properties. Each SELECT ele- ment invokes the same setHRAttr() function, passing a reference to itself so that the function can inspect details of the element. HR.align CD-401 Appendix F ✦ Examples from Parts III and IV The first task of the setHRAttr() function is to make sure that only browsers capa- ble of treating the HR element as an object get to the meat of the function. As the page loads, the document.all property is set for NN6 using a normalization tech- nique described in Chapter 14. For suitably equipped browsers, the function next reads the string from the value property of the SELECT object that is passed to the function. If a selection is made (that is, other than the first, empty one), then the single, nested statement uses the setAttribute() method to assign the value to the attribute whose name matches the name of the SELECT element. Listing 19-2: Controlling HR Object Properties <HTML> <HEAD> <TITLE>HR Object Properties</TITLE> <SCRIPT LANGUAGE=”JavaScript”> // document.all normalization trick for NN6 if (navigator.appName == “Netscape” && parseInt(navigator.appVersion) >= 5) { document.all = document.getElementsByTagName(“*”) } // one function does all! function setHRAttr(select) { if (document.all && document.all.myHR) { var choice = select.options[select.selectedIndex].value if (choice) { document.all.myHR.setAttribute(select.name, choice) } } } </SCRIPT> </HEAD> <BODY> <H1>HR Object Properties</H1> <BR> <P>Here is the HR element you will be controlling:</P> <HR ID=”myHR”> <FORM> Select an alignment: <SELECT NAME=”align” onChange=”setHRAttr(this)”> <OPTION></OPTION> <OPTION VALUE=”left”>Left</OPTION> <OPTION VALUE=”center”>Center</OPTION> <OPTION VALUE=”right”>Right</OPTION> Continued HR.align . LANGUAGE= JavaScript > function leftFrame() { var output = “<HTML><BODY><H3>Body Scroll Values</H3><HR>
” Continued document.body.scrollLeft CD-394 Part VI ✦. output } </SCRIPT> </HEAD> <FRAMESET COLS=”30%,70%”> <FRAME NAME=”readout” SRC= javascript: parent.leftFrame()”> <FRAME NAME=”display” SRC= javascript: parent.rightFrame()”> </FRAMESET> </HTML> text See. CD-392 Part VI ✦ Appendixes bottomMargin leftMargin rightMargin topMargin NN2 NN3 NN4 NN6 IE3/J1 IE3/J2