Errata

JavaScript & DHTML Cookbook

Errata for JavaScript & DHTML Cookbook, Second Edition

Submit your own errata for this product.

The errata list is a list of errors and their corrections that were found after the product was released.

The following errata were submitted by our customers and have not yet been approved or disproved by the author or editor. They solely represent the opinion of the customer.

Color Key: Serious technical mistake Minor technical mistake Language or formatting error Typo Question Note Update

Version Location Description Submitted by Date submitted
Printed Page 80
object2String function

find a bug in array2String function. The following code shows the function and the bug statement is in this line: if (val[0]) {

function object2String(obj) {
var val, output = "";
if (obj) {
output += "{";
for (var i in obj) {
val = obj[i];
switch (typeof val) {
case ("object"):
if (val[0]) {
output += i + ":" + array2String(val) + ",";
} else {
output += i + ":" + object2String(val) + ",";
}
break;

Wnen the val is an array and the first entry of val is 0, then the val will be converted into an object rather than an array. For example, {a:[0,1,2]} will be converted into {a:{0:0,1:1,2:2}}.

Anonymous  Feb 13, 2014 
Printed Page 83
getCookie and deleteCookie functions

Example 3-2 is supposed to highlight differences from Recipe 1.10 but not all differences are highlighted.

The "this" keyword is added in the getCookie function:

return this.getCookieVal(j);

The "this" keyword is added in the deleteCookie function:

if (this.getCookie(name)) {

Anonymous   
Printed Page 92
Last Code Segment function myFuncA()

Is it correct to define the nested function as

function.myFuncB() ?

Shouldn't it be

function myFuncB()?

Anonymous   
Printed Page 92
Last Code Segment function myFuncA()

Is it correct to define the nested function as

function.myFuncB() ?

Shouldn't it be

function myFuncB()?

Anonymous  Jul 27, 2008 
Printed Page 211
near bootom of page

Example 8-3 P209-212 page 211 near bottom of page, the code references a perl script I can't find anywhere. <form method="GET" action="cgi-bin/register.pl" .....>
Help

Robert Grant  May 11, 2009 
Printed Page 219
Code in Discussion

The markup is not legal XHTML. It uses
<p>
<input />
<input />
<div>
</p> <!-- Error -->
<p>
...
</p>
<p>
...
</p>
</div>
</p>

As there are more </p> than <p> in the example, it likely is added by mistake, and should be removed
altogether.

Anonymous   
Printed Page 239
the top of the page

This might be a picky one. Howevevr ...

In the function "removeEvent", the second clause of the "if" clause is checking if there is "elem.attachEvent".

To be exact, I thought that should have been checking if there is "elem.detachEvent".

Anonymous   
Printed Page 239
the top of the page

This might be a picky one. Howevevr ...

In the function "removeEvent", the second clause of the "if" clause is checking if there is "elem.attachEvent".

To be exact, I thought that should have been checking if there is "elem.detachEvent".

Anonymous  Aug 06, 2008 
Printed Page 405
final function within Example 13-1 (DHTML3API.js)

The DHTML3API.js function labeled "getInsideWindowHeight" contains flow control which is inconsistent
with API as a whole and fails to produce the desired result when processed by the IE6. In the following
reproduction I have highlighted the erroneous clause with '*>'

================================== *incorrect*
// Return the available contetn height space in browser window
getInsideWindowHeight : function () {
if (window.innerHeight) {
return window.innerHeight;
*> } else {
*> if (document.body.clientHeight != document.body.parentNode.clientHeight) {
*> // measure the html element's clientHeight
*> return document.body.parentNode.clientHeight;
*> } else {
*> return document.body.clientHeight;
*> }
}
return null;
}
=============================================*

When compared with a sister reference authored by Danny Goodman, "Dynamic HTML: The Definitive Reference,
Third Edition" (isbn 0-596-52740-3), which includes the same API labeled DHTMLapi3.js, the consistent and
correct flow control for this function can be found...

==================================== *correct*
// Return the available content height space in browser window
getInsideWindowHeight : function () {
if (window.innerHeight) {
return window.innerHeight;
} else if (this.browserClass.isIECSSCompat) {
// measure the html element's clientHeight
return document.body.parentElement.clientHeight;
} else if (document.body && document.body.clientHeight) {
return document.body.clientHeight;
}
return null;
}
=============================================*

As a side note, both publications include inconsistent terminators within the DHTMLAPI.init() function.
They work, but could cause some confusion; especially in light of DHTMLAPI object's short-cut syntax.

Anonymous   
Printed Page 411
Javascript solution, 13.6.2 Code

the last two lines of the javascript are missing the - such that they mean something else and don't work
correctly:

posElem.style.left = offsetLeft + parseInt(baseElem.offsetWidth/2)
parseInt(posElem.offsetWidth/2) + "px"

posElem.style.top = offsetTop + parseInt(baseElem.offsetHeight/2)
parseInt(posElem.offsetHeight/2)+ "px"

each of these are missing the - sfter /2) and sould read instead

posElem.style.left = offsetLeft + parseInt(baseElem.offsetWidth/2) -
parseInt(posElem.offsetWidth/2) + "px"

posElem.style.top = offsetTop + parseInt(baseElem.offsetHeight/2) -
parseInt(posElem.offsetHeight/2)+ "px"

Anonymous   
Printed Page 439
in function "scrollBy"

The following function scrolls the div content when the arrow buttons are clicked/mousedowned or the scrollbar container ("wrapper") itself is clicked/mousedowned...except for immediately after the page loads. The content is unscrollable until the "thumb" is first dragged. Here is the function in its entirety:

// Activate scroll of inner content
function scrollBy(index, px) {
var scroller = scrollBars[index];
var elem = document.getElementById(scroller.ownerContentID);
var top = parseInt(elem.style.top);
var scrollHeight = parseInt(elem.scrollHeight);
var height = scroller.ownerHeight;
if (scrollEngaged && top + px >= -scrollHeight + height && top + px <= 0) {
DHTMLAPI.moveBy(elem, 0, px);
updateThumb(index);
} else if (top + px < -scrollHeight + height) {
DHTMLAPI.moveTo(elem, 0, -scrollHeight + height - scroller.quirks.contentPadding);
updateThumb(index);
clearInterval(scrollInterval);
} else if (top + px > 0) {
DHTMLAPI.moveTo(elem, 0, 0);
updateThumb(index);
clearInterval(scrollInterval);
} else {
clearInterval(scrollInterval);
}
}


The problem lies with the third line of the function body:

var top = parseInt(elem.style.top);

elem.style.top is the empty string or null until DHTMLAPI.moveTo or DHTMLAPI.moveBy have first been called (and not the expected value from the style sheets provided with the example code from this book), and "top" becomes NaN, failing all of the boolean expressions in the if...else if and finally canceling the scrolling operation. Thus, the user's clicking actions are effectively ignored.. The line would only work if the style was indicated inline, not in a style sheet (see Javascript: The Definitive Guide, page 380 under "Scripting Computed Style," first paragraph). Here is the appropriate fix:

var top = parseInt(DHTMLAPI.getComputedStyle(scroller.ownerContentID, "top"));

This returns the desired value. As scrollbars normally are, the javscript scrollbar is now responsive BEFORE the user drags the thumb for the first time.

Anonymous  Mar 01, 2010 
Printed Page 441-442
Entire Example

The example does not work.

I retyped the example from the book, correcting the stray closing brace on page 442 and the example
didn't work.

I then downloaded the code from the website, removed the error-producing dots in the middle (why not a
comment set off from the rest of the code or a note in the text of the book) and still saw... nothing.

Firefox 2.0.3/Mac OS X

Anonymous   
Printed Page 503
Bottom code example

An earlier example used quotes, it expands to show pictures.

It shows this code:

var imgLinks = new Array();
imgLinks[imgLinks.length] = {src:"images/prods/x25.jpg", url="products/x25.html", alt="X25 Super
Widget"};
...
function getRandomImage(imgElemID) {
var currIndex = Math.floor(Math.random() * (quotes.length));
...

The last line should be
var currIndex = Math.floor(Math.random() * (imgLinks.length));

Also, the declaration of imgLinks element is wrong: src:"" and url="" cannot both be right: Recipe 3.8
suggests it's src:"".

Anonymous