Errata

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.

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"

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.

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

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:"".