JavaScript Bible, Gold Edition part 184 ppt

CD-322 Part VI ✦ Appendixes Example A framesetting document script might be using the ID of a FRAME element to read or adjust one of the element properties, and then need to perform some action on the content of the page through its document object. You can get the reference to the document object via a statement, such as the following: var doc = document.getElementById(“FRAME3”).contentDocument Then your script can, for example, dive into a form in the document: var val = doc.mainForm.entry.value Document NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example While you have far easier ways to reach the document object of another frame ( parent.otherFrameName.document), the following statement takes the long way to get there to retrieve the number of forms in the document of another frame: var formCount = parent.document.all.contentsFrame.Document.forms.length Using the Document property only truly makes sense when a function is passed a FRAME or IFRAME element object reference as a parameter, and the script must, among other things more related to those objects, access the document contained by those elements. frameBorder NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example The default value for the frameBorder property is yes. You can use this setting to create a toggle script (which, unfortunately, does not change the appearance in IE). The W3C-compatible version looks like the following: FRAME.frameBorder CD-323 Appendix F ✦ Examples from Parts III and IV function toggleFrameScroll(frameID) { var theFrame = document.getElementById(frameID) if (theFrame.frameBorder == “yes”) { theFrame.frameBorder = “no” } else { theFrame.frameBorder = “yes” } } height width NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example The following fragment assumes a frameset defined with two frames set up as two columns within the frameset. The statements here live in the framesetting document. They retrieve the current width of the left frame and increase the width of that frame by ten percent. Syntax shown here is for the W3C DOM, but can be easily adapted to IE-only terminology. var frameWidth = document.getElementById(“leftFrame”).width document.getElementById(“mainFrameset”).cols = (Math.round(frameWidth * 1.1)) + “,*” Notice how the numeric value of the existing frame width is first increased by ten percent and then concatenated to the rest of the string property assigned to the frameset’s cols property. The asterisk after the comma means that the browser should figure out the remaining width and assign it to the right-hand frame. noResize NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ FRAME.noResize CD-324 Part VI ✦ Appendixes Example The following statement turns off the ability for a frame to be resized: parent.document.getElementById(“myFrame1”).noResize = true Because of the negative nature of the property name, it may be difficult to keep the logic straight (setting noResize to true means that resizability is turned off). Keep a watchful eye on your Boolean values. scrolling NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Listing 16-45 produces a frameset consisting of eight frames. The content for the frames is generated by a script within the frameset (via the fillFrame() function). Event handlers in the Body of each frame invoke the toggleFrameScroll() function. Both ways of referencing the FRAME element object are shown, with the IE- only version commented out. In the toggleFrameScroll() function, the if condition checks whether the property is set to something other than no. This allows the condition to evaluate to true if the property is set to either auto (the first time) or yes (as set by the function). Note that the scrollbars don’t disappear from the frames in IE5.5 or NN6. Listing 16-45: Controlling the FRAME.scrolling Property <HTML> <HEAD> <TITLE>frame.scrolling Property</TITLE> </HEAD> <SCRIPT LANGUAGE=”JavaScript”> function toggleFrameScroll(frameID) { // IE5 & NN6 version var theFrame = document.getElementById(frameID) // IE4+ version // var theFrame = document.all[frameID] if (theFrame.scrolling != “no”) { theFrame.scrolling = “no” FRAME.scrolling CD-325 Appendix F ✦ Examples from Parts III and IV } else { theFrame.scrolling = “yes” } } // generate content for each frame function fillFrame(frameID) { var page = “<HTML><BODY onClick=’parent.toggleFrameScroll(\”” + frameID + “\”)’><SPAN STYLE=’font-size:24pt’>” page += “<P>This frame has the ID of:</P><P>” + frameID + “.</P>” page += “</SPAN></BODY></HTML>” return page } </SCRIPT> <FRAMESET ID=”outerFrameset” COLS=”50%,50%”> <FRAMESET ID=”innerFrameset1” ROWS=”25%,25%,25%,25%”> <FRAME ID=”myFrame1” SRC=”javascript:parent.fillFrame(‘myFrame1’)”> <FRAME ID=”myFrame2” SRC=”javascript:parent.fillFrame(‘myFrame2’)”> <FRAME ID=”myFrame3” SRC=”javascript:parent.fillFrame(‘myFrame3’)”> <FRAME ID=”myFrame4” SRC=”javascript:parent.fillFrame(‘myFrame4’)”> </FRAMESET> <FRAMESET ID=”innerFrameset2” ROWS=”25%,25%,25%,25%”> <FRAME ID=”myFrame5” SRC=”javascript:parent.fillFrame(‘myFrame5’)”> <FRAME ID=”myFrame6” SRC=”javascript:parent.fillFrame(‘myFrame6’)”> <FRAME ID=”myFrame7” SRC=”javascript:parent.fillFrame(‘myFrame7’)”> <FRAME ID=”myFrame8” SRC=”javascript:parent.fillFrame(‘myFrame8’)”> </FRAMESET> </FRAMESET> </HTML> src NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example For best results, use fully formed URLs as value for the src property, as shown here: parent.document.getElementById(“mainFrame”).src = “http://www.dannyg.com” Relative URLs and javascript: pseudo-URLs will also work most of the time. FRAME.src CD-326 Part VI ✦ Appendixes FRAMESET Element Object Properties border NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Even though the property is read/write in IE4+, changing the value does not change the thickness of the border you see in the browser. If you need to find the thickness of the border, a script reference from one of the frame’s documents would look like the following: var thickness = parent.document.all.outerFrameset.border borderColor NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example To retrieve the current color setting in a frameset, a script reference from one of the frame’s documents would look like the following: var borderColor = parent.document.all.outerFrameset.borderColor cols rows NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ FRAMESET.cols CD-327 Appendix F ✦ Examples from Parts III and IV Example Listings 16-46 through 16-48 show the HTML for a frameset and two of the three documents that go into the frameset. The final document is an HTML version of the U.S. Bill of Rights, which is serving here as a content frame for the demonstration. The frameset listing (16-46) shows a three-frame setup. Down the left column is a table of contents (16-47). The right column is divided into two rows. In the top row is a simple control (16-48) that hides and shows the table of contents frame. As the user clicks the hot text of the control (located inside a SPAN element), the onClick event handler invokes the toggleTOC() function in the frameset. Syntax used in this example is W3C-compatible. To modify this for IE-only, you replace document.getElementById(“outerFrameset”) with document. all.outerFrameset and elem.firstChild.nodeValue to elem.innerText. You can also branch within the scripts to accommodate both styles. Listing 16-46: Frameset and Script for Hiding/Showing a Frame <HTML> <HEAD> <TITLE>Hide/Show Frame Example</TITLE> </HEAD> <SCRIPT LANGUAGE=”JavaScript”> var origCols function toggleTOC(elem, frm) { if (origCols) { showTOC(elem) } else { hideTOC(elem, frm) } } function hideTOC(elem, frm) { var frameset = document.getElementById(“outerFrameset”) origCols = frameset.cols frameset.cols = “0,*” } function showTOC(elem) { if (origCols) { document.getElementById(“outerFrameset”).cols = origCols origCols = null } } </SCRIPT> Continued FRAMESET.cols CD-328 Part VI ✦ Appendixes Listing 16-46 (continued) <FRAMESET ID=”outerFrameset” FRAMEBORDER=”no” COLS=”150,*”> <FRAME ID=”TOC” NAME=”TOCFrame” SRC=”lst16-47.htm”> <FRAMESET ID=”innerFrameset1” ROWS=”80,*”> <FRAME ID=”controls” NAME=”controlsFrame” SRC=”lst16-48.htm”> <FRAME ID=”content” NAME=”contentFrame” SRC=”bofright.htm”> </FRAMESET> </FRAMESET> </HTML> When a user clicks the hot spot to hide the frame, the script copies the original cols property settings to a global variable. The variable is used in showTOC() to restore the frameset to its original proportions. This allows a designer to modify the HTML for the frameset without also having to dig into scripts to hard-wire the restored size. Listing 16-47: Table of Contents Frame Content <HTML> <HEAD> <TITLE>Table of Contents</TITLE> </HEAD> <BODY BGCOLOR=”#eeeeee”> <H3>Table of Contents</H3> <HR> <UL STYLE=”font-size:10pt”> <LI><A HREF=”bofright.htm#article1” TARGET=”contentFrame”>Article I</A></LI> <LI><A HREF=”bofright.htm#article2” TARGET=”contentFrame”>Article II</A></LI> <LI><A HREF=”bofright.htm#article3” TARGET=”contentFrame”>Article III</A></LI> <LI><A HREF=”bofright.htm#article4” TARGET=”contentFrame”>Article IV</A></LI> <LI><A HREF=”bofright.htm#article5” TARGET=”contentFrame”>Article V</A></LI> <LI><A HREF=”bofright.htm#article6” TARGET=”contentFrame”>Article VI</A></LI> <LI><A HREF=”bofright.htm#article7” TARGET=”contentFrame”>Article VII</A></LI> <LI><A HREF=”bofright.htm#article8” TARGET=”contentFrame”>Article VIII</A></LI> <LI><A HREF=”bofright.htm#article9” TARGET=”contentFrame”>Article IX</A></LI> <LI><A HREF=”bofright.htm#article10” TARGET=”contentFrame”>Article X</A></LI> </UL> </BODY> </HTML> FRAMESET.cols CD-329 Appendix F ✦ Examples from Parts III and IV Listing 16-48: Control Panel Frame <HTML> <HEAD> <TITLE>Control Panel</TITLE> </HEAD> <BODY> <P> <SPAN ID=”tocToggle” STYLE=”text-decoration:underline; cursor:hand” onClick=”parent.toggleTOC(this)”> <<Hide/Show>></SPAN> Table of Contents </P> </BODY> </HTML> frameBorder NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example The default value for the frameBorder property is yes. You can use this setting to create a toggle script (which, unfortunately, does not change the appearance in IE). The IE4+-compatible version looks like the following: function toggleFrameScroll(framesetID) { var theFrameset = document.all(framesetID) if (theFrameset.frameBorder == “yes”) { theFrameset.frameBorder = “no” } else { theFrameset.frameBorder = “yes” } } frameSpacing NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ FRAMESET.frameSpacing CD-330 Part VI ✦ Appendixes Example Even though the property is read/write in IE4+, changing the value does not change the thickness of the frame spacing you see in the browser. If you need to find the spacing as set by the tag’s attribute, a script reference from one of the frame’s documents would look like the following: var spacing = parent.document.all.outerFrameset.frameSpacing IFRAME Element Object Properties align NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example The default setting for an IFRAME alignment is baseline. A script can shift the IFRAME to be flush with the right edge of the containing element as follows: document.getElementById(“iframe1”).align = “right” contentDocument NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example A document script might be using the ID of an IFRAME element to read or adjust one of the element properties; it then needs to perform some action on the content of the page through its document object. You can get the reference to the document object via a statement, such as the following: var doc = document.getElementById(“FRAME3”).contentDocument IFRAME.contentDocument CD-331 Appendix F ✦ Examples from Parts III and IV Then your script can, for example, dive into a form in the document: var val = doc.mainForm.entry.value frameBorder NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example See the example for the FRAME.frameBorder property earlier in this chapter. hspace vspace NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example The following fragment sets the white space surrounding an IFRAME element to an equal amount: document.all.myIframe.hspace = 20 document.all.myIframe.vspace = 20 Unfortunately these changes do not work for IE5/Windows. scrolling NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example The following toggleIFrameScroll() function accepts a string of the IFRAME element’s ID as a parameter and switches between on and off scroll bars in the IFRAME.scrolling . ROWS=”25%,25%,25%,25%”> <FRAME ID=”myFrame1” SRC= javascript: parent.fillFrame(‘myFrame1’)”> <FRAME ID=”myFrame2” SRC= javascript: parent.fillFrame(‘myFrame2’)”> <FRAME ID=”myFrame3” SRC= javascript: parent.fillFrame(‘myFrame3’)”> <FRAME. SRC= javascript: parent.fillFrame(‘myFrame5’)”> <FRAME ID=”myFrame6” SRC= javascript: parent.fillFrame(‘myFrame6’)”> <FRAME ID=”myFrame7” SRC= javascript: parent.fillFrame(‘myFrame7’)”> <FRAME ID=”myFrame8” SRC= javascript: parent.fillFrame(‘myFrame8’)”> </FRAMESET> </FRAMESET> </HTML> src NN2. ID=”myFrame4” SRC= javascript: parent.fillFrame(‘myFrame4’)”> </FRAMESET> <FRAMESET ID=”innerFrameset2” ROWS=”25%,25%,25%,25%”> <FRAME ID=”myFrame5” SRC= javascript: parent.fillFrame(‘myFrame5’)”> <FRAME