"DHTML:The Definitive Reference" (First Edition) Support Center

Corrections & Updates

O'Reilly occasionally incorporates corrections into new printings. Not all of the following items may apply to your copy of the book.

To answer a frequently-asked question: Yes, there will be a second edition of the DHTMLDefRef to cover browsers through NN7 and IE6 (and XHTML, the full DOM Level 2, forecasts of things to come, and more). Read about the new edition. BTW, if NN4.x is still in your DHTML development mix, be sure to hang onto your current first edition (or pick up an archive copy now, before they disappear). While the reference chapters will continue to provide complete info for NN 4.x's, um, unique-and-now-dead approach to layers, the new introductory chapters do not dwell on this old stuff. The new edition contains a new version of the DHTMLAPI.js plug-compatible with the first edition version, including backward support for NN 4.x -- BUT NO YUCKY BROWSER VERSION SNIFFING!!

Page 5: The server.domain for the W3C is www.w3.org.
Page 24: In Example 2-2, one of the script lines has inadvertently word-wrapped. If you type the example yourself character-for-character, make sure that final P>" that's hanging at the start of one line goes at the end of the preceding line. JavaScript strings cannot be broken by carriage returns.
Page 24: In Example 2-2, the fourth code line inside the isIE4 branch should indicate a text-align style attribute, rather than just align.
Page 26: The sixth line of Example 2-3 should read:
if (navigator.appName == "Netscape") {
Page 39: To clarify the comment in the first full paragraph: HTML tag attribute values should always be quoted, but CSS attribute values (i.e., the words to the right of a colon delimiter) are not surrounded by quotes, as in {border:3px red solid}. But quotes might be necessary for some intra-value strings, such as multi-word font family names. Thus, there are no quotes in {font-family:Arial, Helvetica, sans-serif}, but quotes are highly recommended for {font-family:"Comic Sans MS", sans-serif}.
Page 43: The one-line code listing just past halfway down the page is missing a closing > symbol.
Page 44: The @import rule example (for importing external style sheet files) must end with a semicolon:
@import url(styles/corporate.css);
There were ambiguities in the early going for CSS, but this is the way to do it.
Pages 46-50: Style sheets in examples 3-1, 3-2, 3-3, and 3-4 include an incorrect style rule for the BODY element. All instances of font-face should be font-family. There is no font-face CSS attribute, but, as I just demonstrated to myself, it's easy for old HTML habits to haunt you when adapting to CSS syntax.
Page 47: The second line of the <STYLE> tag of Example 3-2 is missing the color attribute setting. It should read:
P.narrow {color:red; margin-left:5em; margin-right:5em}
This will make it consistent with the examples that surround it.
Page 48: The first pair of code examples includes one that combines a tag and ID selector (P#special4 {border:5px ridge red}). It turns out that Navigator 4 does not like this perfectly legal selector. Therefore, for cross-browser compatibility, use only the straight ID selector. This is good practice anyway, because the combined version might encourage the re-use of an ID identifier in a document:a definite no-no.
Page 50: Some readers object to the BODY stylesheet rule that specifies a preference for a sans-serif font family (Arial) but a default of a serif family. There is no law that says you have to deploy the same "serif-ness" on every font family in the list.
Page 51: More mix-up of CSS attribute names in the example near the bottom of the page. Should be:
<STYLE TYPE="text/css"> P:first-letter {font-family:Gothic, serif; font-size:300%; float:left} P:first-line {font-variant:small-caps} </STYLE>
Page 85: In the second for loop example in the middle of the page, pixelLeft and pixelHeight are properties of the IE4 style object, not directly of an element. Moreover, the correct IE4 property to adjust the top coordinate of the element is pixelTop. Therefore, the loop should read:
for (var i = 0; i < 5; i++) { document.all.elementName.style.pixelLeft += 10 document.all.elementName.style.pixelTop += 10 }
Pages 90-2: The global variable in Listing 4-5 that acts as the Boolean switch for Navigator 4 is declared at the outset as isNav; later in the script it sometimes appears as isNav4. All reference to this global should obviously be to one or the other, but not both. Use whichever variable name you like best. This example is in the downloadable example file named DHTMLapi.js.
Page 93: The code provided for handling Navigator 4 window resizing (i.e., when positioned elements get all out of whack) can cause an endless loop of reloading in the Windows verion of NN4 if the window or frame containing the document displays scrollbars. The reason behind this is a browser bug that fires an additional resize event when the scrollbars are displayed (even though the inner dimensions of the window don't change). To help NN4 do the right thing, some extra code is needed to compare the current window/frame size against the size it was when the page loaded. If the restore() function is called (as a result of a resize event), it won't reload the page if the inner dimensions of the window have not changed--only when the window has genuinely been resized. Here is code you can use in place of the code supplied on page 93:
You can refine the browser detection a bit more if you like, because the problem affects only the Windows version of NN4.
Pages 94-99: See notes about Examples 4-6 and 4-7 for use with Internet Explorer 5.
Page 107: Line 5 of Example 5-5 should be
var oldStuff = parseInt(navigator.appVersion) < 3
Page 110: Line 15 of Example 5-6 incorrectly re-initializes the same onImgArray as in line 3. Line 15 should be:
var offImgArray = new Array
Page 136: Around the middle of the page, the last line of a paragraph talks about a function called verify(), but the true name, as shown in the example in the following line, is convertToUpper().
Page 142: The first code listing on the page should be:
document.releaseEvents(Event.MOUSEOUT)
Page 145: The second example statement should read:
window.event.cancelBubble = true
Page 152: The second statement contains a misstatement about the right mouse button. Getting the mouse button number for the right click is not possible via onClick event handlers, but is possible with other mouse events, such as onMouseDown or onMouseUp. In Navigator, if the event handler evaluates to return false, the context menu does not appear; I haven't found a way to block the context menu in IE4.
Page 155: Near the bottom of the page, the release() function needs some protection from executing in Navigator when the user clicks on the page background. To accomplish that, make sure the selectedObj variable has a value in it:
This repair is included in the example files that are downloadable below.
Pages 196 & 197: The examples for the NOHREF and SHAPE attributes of the <AREA> tag both have an extra quote mark before the COORDS attribute. The only quotes should be around the values assigned to the attributes in the examples.
Page 208: Reader Marc Boon reports that the tag in Netscape Navigator observes two undocumented attributes: MARGINHEIGHT and MARGINWIDTH. These attributes have a default value of several pixels (varies a bit with OS), but if you want content to bleed to the top and left edges of the window/frame, then set these attributes to 0 (zero). From time to time in the book I complain about the built-in margins of Navigator document content. Now we know how to control them.
Page 298: Event handler listings for the ILAYER element should not include onMouseOver or onMouseOut for NN4.
Page 303: Netscape has one additional proprietary attribute for the IMG element. The SUPPRESS attribute can be set to TRUE if you don't want the placeholder icon to appear in the image's space while the image is loading. The default value is FALSE. This is not a W3C-sanctioned attribute.
Page 304: This isn't an errata, but a warning against advice you may read elsewhere. While the onMouseDown event handler is shown as being n/a for NN, it is implemented in some sub-versions of NN4. Oddly, the onMouseUp event handler works in NN4/Mac, but not NN4/Win32. My sense is that these implementations are accidental and should not be trusted for NN4 or earlier.
Page 332: Mouse-related event handlers for the NN4 LAYER element work only with event capture turned on for the element.
Page 342: The <LINK> tag shows an end tag, while the description at the right says the end tag is forbidden. The end tag should not be displayed. We're talking HTML here, not yet XHTML.
Page 356-7: A one-character syntax error in three examples of refresh tags renders them inoperable. In the CONTENT attribute, replace the comma after the number of seconds with a semi-colon, and add the url= attribute. Thus, the example at the very bottom of page 356 should read:
<META HTTP-EQUIV="refresh" CONTENT="2;url=http://www.giantco.com/basicindex.html">
Page 365: Each instance of the term "URL" in the ARCHIVE attribute description should read "URI."
Page 407: The default value for the MEDIA attribute is all.
Page 410: Netscape Navigator also observes the HSPACE and VSPACE attributes of the <TABLE> element. The behavior of these attributes is the same as for images.
Page 411: Compatibility information for the BACKGROUND attribute of a TABLE should show 4 for NN (as it does in some printings). But it works in NN4 only under special circumstances: "For NN4, you may have to nest your main table (with a transparent background image) inside another table that bears the desired background graphic."
Page 412: Compatibility ratings for the BORDERCOLOR attribute should be n/a for both NN and HTML.
Page 423: Navigator 4 supports the BACKGROUND attribute for the <TD> element. Images need to be larger than 16x16 in NN4.
Page 451: Surprisingly, Navigator 4 supports the BACKGROUND attribute for the <TR> element. No flavor of MSIE, including MSIE 5, does.
Page 488: Despite the long list of events shown to be supported by the APPLET object in IE (and despite Microsoft's continued claim of their support), I can't get DOM events to fire with applets in IE. As far as I'm concerned, the entire table should be "n/a". I suspect the same is true for the OBJECT object.
Page 507: The onload event handler for IE4 is missing from the table, but IE plays tricks with us on this. It treats the window.onload and document.body.onload event handlers as the same thing. If you try to set both (say, at the end of a document), only the last one sticks, because it overrides the earlier assignment statement. It appears to me that IE sets up document.body.onload to act as an alias for window.onload, so that window.onload remains backward and cross-browser compatible.
Page 547: The document object in NN4 has two more properties not listed: height and width, which reveal pixel dimensions of the entire document in the window.
Page 554: The title property is Read-Write only in IE; for NN through Version 4, the property is read-only.
Page 561: Here's the skinny on using document.write() for <SCRIPT> tags:
Use document.write("<" + "/SCRIPT>"); for the "end script hiding" statement, use document.write("//--" + ">").
Page 562: The document.embeds[] array is supported in Navigator back to NN 3.
Page 572: For onKeyPress events, the value represents the actual character displayed in a text box (e.g., 65 for "A" and 97 for "a"). But for onKeyDown and onKeyUp events, only the uppercase value is returned, regardless of the case of the character that is rendered.
The corresponding property in NN4 always returns the code for the actual character displayed for all keyboard events.
Page 585: The value property of the fileUpload object is read-only.
Page 591: The first line of the example for the length property should should read:
for (var i = 0; i < document.forms[0].length; i++) {
Page 645: The examples for host and hostname properties should have the == operator inside the conditional expression.
Page 665: The first line of the Example for the systemLanguage property should read:
if (navigator.systemLanguage == "nl") {
Page 667: A newer URL for the Netscape preferences() parameter values is: http://developer.netscape.com/docs/manuals/communicator/preferences/.
Page 678: In the description of the value property of an option, the final phrase (beginning with "otherwise") should be deleted. If no VALUE attribute is set, the value property returns an empty string.
Page 679: The last sentence of the discussion about the add() method incorrectly suggests you can use this method to insert a new option into an existing list. The add() method works more like a "replace" method when the index parameter points to an existing OPTION element. The naming of this method appears to indicate that it is intended to be used to build new sets of OPTION elements to replace another set.
Pages 712-13: The column of event handlers for the SELECT object should have NN2 set for onblur, onchange, and onfocus.
Page 717: The focus() method of the SELECT object is available in NN4.
Page 718: The compatibility listing for the options[] array of a select object should be: NN 2 IE 3 DOM 1.
Page 726: In the example for the backgroundImage property, the value assigned should be in the proper format for a URL:
document.all.navbar.style.backgroundImage = "url(images/navVisited.jpg)"
Page 742: A couple of notes about the position property. First, values in IE4 can be written provided the attribute is explicitly set in the CSS stylesheet. In other words, you can't turn a non-positioned element into a positioned one in IE4.
The other point is that the values for this property are obviously not numbers, but string constants: absolute | relative | static.
Page 760: The example for the recordNumber property is a mere fragment from a much larger context involving other aspects of Internet Explorer's Data Binding. The example assumes that you have a table in the document that is linked to an existing data source; and that the data source is linked into the document via the <OBJECT> tag.
For descriptions and examples of the numerous interdependencies of data binding terminology on a page, Microsoft's Internet Explorer SDK (available for download from Microsoft's developer web site area) does a decent job. The example it provides for the recordNumber property shows how a user can click on a table of data to set a global variable that temporarily stores the currently clicked row number (and then also displays extracted fields in the page's text boxes).
In the first printing of my book, the entry for the recordNumber property includes a pointer to a non-existent description of a recordset property. Treating the property in any practical depth would have required getting heavily into ActiveX Data Objects (ADO). The recordset property (of an OBJECT object that contains an ADO) is an object unto itself with 19 methods and 20 properties--all of which have to do with accessing and massaging data associated with one of these data objects. I believe this is well beyond the bounds of DHTML, and might be the subject of its own book someday.
If you want to learn more about ADO, you can get the info from Microsoft's MSDN web site: http://msdn.microsoft.com/. Scroll down the table of contents to the "Data Binding" section and follow the links.
Page 784: The description of the wrap property should read as follows:

Whether the browser should wrap text in a TEXTAREA element and whether wrapped text should be submitted to the server with soft returns converted to hard carriage returns. A value of hard engages word wrapping and converts soft returns to CRLF characters in the value submitted to the server. A value of soft turns on word wrapping, but does not include the CRLF characters in the text submitted with the form. A value of off turns word wrapping off. The Win32 version of Internet Explorer 4 returns a value of soft when the WRAP attribute is set to the Navigator value of virtual.
Example
document.forms[0].comments.wrap = "hard"
Value
One of the constant values (as a string): hard | off | soft.
Default
soft
Pages 826-7: Microsoft decided to document the otherwise undiscoverable fact that IE4 supports the window.moveBy() and window.moveTo() methods.
Page 828: The code example in the top half of the page is missing a closing quote for the lengthy, third parameter. It also says "statusbar" where it should read just "status," as shown in the table on the next page.
Page 829: The description for the location attribute should read: "Display Location text field."
Also see notes below about the IE attributes for left, top, and fullscreen.
Page 829: The window.print() method is available only in Navigator 4. The compatibility references for NN and IE got switched. While the method works to print a single frame within frameset in Windows, it does not on the Mac (bummer).
But this also brings up an important question: Can you get IE4 to print from script control? The answer is "Yes" for the Win32 versions only. Embed the following <OBJECT> tag exactly as shown:
You can then command this ActiveX control to print whatever window/frame has current focus with the following statement:
This command produces the print dialog, just as window.print() does in Navigator. But canceling the print dialog causes a script error (don't ask me why). If you substitute a 2 for the second parameter, the printing takes place without the print dialog. This is smoother for you, but not so great for the user, IMHO. You can also hide the error dialog by assigning a dummy function to window.onerror and let the function return true.
Page 830: The last sentence of the description of the resize() method should begin: The top and left edges remain fixed;....
Page 831: In the discussion of the scrollBy() method, the characterizations of the X and Y axes are switched. Everyone knows the X axis is the horizontal (left/right) and Y axis is the vertical (up/down).
Pages 834: The window.stop() method is a Navigator 4 method, not IE4. For IE4, you might be able to apply the same trick as for printing, but substituting a different command ID for stopping the WebBrowser object: IEControl.ExecWB(23, 1).
Page 841: For the sake of clarity, add the sentence Items may be in any order. to the last bulleted item.
Page 853: The last word of the first paragraph should be styles.
Page 865: The name of the grayscale() filter is actually gray().
Page 866: Near the top of the page, the parameter for the revealTrans() filter should be just transition, not transitionshape.
Page 868: The syntax and example for the font-family style attribute incorrectly omits the commas between multiple attribute values (and the first paragraph on the page should say "comma-delimited list" instead of "space-delimited list").
Pages 875 and 902: The Object Model Reference listings for the left and top CSS attributes incorrectly show their offset... counterparts. But this also serves as a reminder that in IE4, the left and top properties return the values including the units (e.g., "30px"). If you want to retrieve these values for performing math (e.g., moving a positioned item downward by 20 pixels) then you want the offset... versions for IE, which return just the numeric values.
Page 887: The discussion about the page-break-after and page-break-before suggests that you can assign these styles to a BR element. In practice, Internet Explorer recognizes these styles only for block-level elements, such as P elements. The W3C spec for DOM Level 2 indicates that page breaks should also work for in-line elements, but IE ignores these styles for element such as SPANs. In no case can you use these styles inside positioned elements.
Page 937: Use Math.floor() with Math.random() to generate ranges of random integers, as follows:
Math.floor(Math.random() * n)
where n is your top acceptable number plus 1.
Math.floor(Math.random() * n)
where m is the lowest integer of the acceptable range and n+m equals the maximum value plus 1.
Page 941ff: It appears that I gave Microsoft's earlier JScript docs a bit more credit than they deserved regarding support for regular expressions in IE4's JavaScript 1.2 support. Their recent docs and my experience reveals a lack of some fine points. The stuff that bit me one day was that the RegExp object in IE4 does not support the lastParen, leftContext, multiline, or rightContext properties.
Page 944: Several example entries in Table 11-1 need slight repair. Examples for the * through {n,m} characters require a backslash before the d, as in:
/\d*/ matches "", "5", or "444".
Page 954: The String.split() method is available starting with NN3.
Page 955: To clarify the endPositionIndex parameter to the String.substring() method, the value returned by the method includes all characters starting at position startPositionIndex and up to but not including the character occupying the endPositionIndex slot Therefore, "Frobnitz".substring(0,4) returns the substring from positions 0 through 3: "Frob".
Page 958: The last number of the description for the & property should be 2.

Updated Listings

Downloadable Example Files. You can download a set of example listings here. Example listings include the following files:

DHTMLapi.js
Example 2-1.txt
Example 2-2.html
Example 3-1.html
Example 3-2.html
Example 3-3.html
Example 3-4.html
Example 3-5 (NN ONLY).html
Example 4-6.html
Example 4-7.html

Example 5-10.html
Example 5-12 (IE ONLY).html
Example 5-5.html
Example 5-9 (IE ONLY).html
Example 6-2.html
Example 6-3.html
Example 6-4.html
help.html

Download your choice of a .ZIP or Macintosh .HQX version.

Examples 4-6 and 4-7: These listings need some updating to work transparently with IE5. Microsoft made some changes to the client... measurement properties (recall my dismay with the way they worked in IE4). Replacing these client... properties with offset... properties does the trick for both IE4 and IE5. You can download updated versions of these examples (and the myAPI.js file used with Example 4-7). These updated versions are not in the package listed in the previous item on this page.

Notes

Reserved for random things I've learned about DHTML since the book went to press:

Newly Discovered CSS Attribute. In a couple of places throughout the book, I complain that setting the background-color style attribute fails to color the entire rectangle of an absolute-positioned element in Navigator 4. An unsightly transparent padding always gets in the way between the filled color and a real border you might define. I've only recently learned that Netscape has a special CSS attribute to save the day: layer-background-color. You can assign both background-color and layer-background-color (in that order) in a stylesheet rule to cover both IE and Navigator with a single rule.

background-color only

background-color and layer-background-color
IE4 window.open() Positioning: Internet Explorer 4 has two additional window features for the third parameter of window.open() that let you set the window's position on the screen (see the table on pp. 828-9). Those features are named top and left and take pixel values. These attributes are ignored by Navigator, just as Navigator's screenX and screenY attributes are ignored by IE4.
IE/Windows window.open() Full Screen: IE4+ for Windows (only) can also open a window to occupy the complete screen without any titlebar or other window chrome. An additional attribute of the third parameter of window.open() is fullscreen=yes. But there's one more catch. You have to turn on scrollbars for the scrollbar to be invisible (don't ask). So, the complete deal would be:
window.open("yourURL","","fullscreen=yes,scrollbars=yes")
New Navigator 4 window Property: Navigator 4 features an additional window object property called window.loading. This property returns true prior to the onLoad event handler firing; afterward, the property returns false. This allows a script to query the state of the page at any time, rather than relying solely on the onLoad event handler to, say, set a global flag about the document having fully loaded.
IE4 tableObj.insertRow() and tableRowObj.insertCell() Methods: Internet Explorer's TABLE object (see pp. 754ff) and TR object (pp. 805ff) each have one more method not listed in the book. insertRow() inserts an unpopulated row element into a table, while insertCell() inserts an unpopulated cell into a row.
Both methods take an optional parameter: an integer representing the zero-based index of which row or cell position the new row or cell should be inserted. Application of these methods is not particularly intuitive, because you must explicitly populate these new elements for them to appear in the table. But when you do, the change is dynamic.
Here is an example of a page that inserts one row of two cells of data extracted from a set of parallel arrays:
About the <LINK> Tag: A reader reports that he successfully uses the HREF attribute instead of the SRC attribute in Navigator 4. Netscape's own documentation supports only the SRC attribute for external URIs, so all I can say at this point is to use HREF at your own risk. If you include both attributes in the tag, you'll be covered no matter what.
About the screen.availTop and screen.availLeft properties: Reader Robin Berjon reports that in some instances, these properties are not zero, as stated on page 706. In Windows, if you move the Taskbar to the top of the screen, screen.availTop is 28, meaning that the first available top coordinate of the screen is 28; likewise, if you move the Taskbar to the left edge of the screen, screen.availLeft is 60. When the Taskbar is at the right or bottom of the screen, the properties return zero, because available space is flush with the top and left screen edges in those cases. Oddly, upon further testing, the Mac (whose menubar is always at the top) does not report the 20 pixels it occupies. Both properties return zero on the Mac.
Navigator 4's window.frameRate property: I've had a report of a previously unknown window.frameRate property in NN4. If anyone has further information about this property, please let me know. The property is not enumerable, nor documented by Netscape (AFAIK); it also is gone from NN6, so it may have been something internal just for NN4.