Error: Need to update code in book

speednet · December 28th, 2005, 03:48 PM

The code for the event handler, which makes IE compatible with the DOM handler, needs to be updated to work properly.

Specifically, the document.body.scrollLeft and document.body.scrollTop values always return zero (0), because they include the 'px' at the end.

Therefore, the code needs to have parseInt() added as follows:

Code:

oEvent.pageX = oEvent.clientX + parseInt(document.body.scrollLeft);
oEvent.pageY = oEvent.clientY + parseInt(document.body.scrollTop);

I think this error only happens when using an XHTML doctype, but I'm not sure. The parseInt() makes it work for all setups, regardless of doctype.

There may be other places in the book that need to be updated in the same manner, but this is really the only place I've come across it so far.

Specifically, any place that reads a length property from the style object of an element needs parseInt() added.

For example:

Code:

var x = parseInt(getElementById('sample').style.left);

Hope this helps!

nzakas · December 28th, 2005, 03:55 PM

Thanks for the post, but I believe you have things a bit mixed up.

The following all return numeric values:
oEvent.clientX
oEvent.clientY
document.body.scrollLeft
document.body.scrollTop

You are correct in your statement that any value retrieved from the style object must be placed in parseInt() to strip off the units, but none of these values are on the style object and therefore return numbers directly.

Try running just this line of code and you'll see:

Code:

alert(document.body.scrollTop);

So, the event compatibility handler is correct, however, you may be trying to use it in such a way that is wrong. For instance:

Code:

d.style.left = oEvent.pageX;

This will fail when using an XHTML doctype because you need to add the "px":

Code:

d.style.left = oEvent.pageX + "px";

Regards,
Nicholas

Nicholas C. Zakas
Author, Professional JavaScript for Web Developers (ISBN 0764579088)
http://www.nczonline.net/

speednet · December 28th, 2005, 04:07 PM

Yup, stupid me, I just figured out the problem, and it wasn't parseInt().

It turns out that I needed to change the code to:

(document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) instead of just using document.body.scrollTop.

Any idea why document.body.scrollTop is always returning zero?

(Same for scrollLeft)

I'm using IE 6.0.

Many thanks.

BTW, love your book. It's getting quite wrinkled with all the constant use.

nzakas · December 28th, 2005, 04:09 PM

Ah yes, quite different.

In strict mode, the HTML element is considered to be the viewport for the page; in quirks mode, the BODY element is considered to be the viewport of the page. Scroll information always is accessible on the viewport, not necessary a given element.

Glad you've enjoyed the book!

Nicholas

Nicholas C. Zakas
Author, Professional JavaScript for Web Developers (ISBN 0764579088)
http://www.nczonline.net/

speednet · December 28th, 2005, 05:11 PM

Interesting ... I'm glad to know the reason, because oftentimes you just have to accept that something works a certain way "just because it does". Was I correct that the code in the book should be updated? (Perhaps an errata?)

billapepper · February 14th, 2006, 09:46 PM

I just spent an hour trying to figure this out... I changed my doctype to XHTML 1.1 strict and all of a sudden it quits working only for IE... I thought it was something I changed in my script... thanks...

Nicholas (Nikk) Madigan Folts (www.nikkfolts.com)