I think you need to take a very close look at the idea of manipulating the pet rock width and height as your basic example. Not only is the actual choice of width or height parameter dependent upon the DOM, but the proportional scaling is also dependent upon the DOM.
As a beginner, trying to solve the issues wrapped up in this example was very difficult, enlightening but very hard. And to be honest, I doubt I understand or have correctly solved the problem.
Because the solution depends on understanding the DOM (which I didn't when I started and still don't), learning how to use the Firebug debugger (a Head First book in and of itself), and separating HTML and CSS, this just seems like a poor choice for an entry level problem.
Finally providing an example that only works correctly with no DOM statement goes against everything you've taught in your other books, and frankly is pretty useless when you attempt to take what you've learned and put it into practice.
Also possible errata
Page 103 you state in order to size the pet rock its height should depend "on the height of the client window."
followed by the calculation
"(clientWindowHeight - 100) * 0.9 = rockImageHeight"
but then on page 104 when we fill in our answer for the resizeRock() code the answer is:
"...(document.body.clientHeight - 100) * 0.9"
notice the missing "Window." This becomes key based on the DOM. If instead you had used on page 104
"...(window.innerHeight - 100) * 0.9"
this is self consistent, and seems (and I mean seems) to be DOM and CSS style sheet independent.For those fighting the battle yourself, cheap advice:
note, I had no idea how to do any of this before attempting to try to solve this problem.
0. If you just want the example to work, and you did what any graduate of previous Head First books did and added a DOM, and separated your CSS stylings - don't. Do the example exactly as it's given, no DOM, use inline styles. It will probably work. Otherwise, if you want to tilt the windmill:
1. Keep the stylings inline. Do not use an external CSS sheet. I know the earlier response tried to use this a fix but it muddies the waters as you try to see what's really happening.
2. Install Firebug
. Warning steep learning curve ahead! Open Firefox, bring up Firebug, and then load your Pet Rock html. Go to Firebug's DOM tab and start digging (scrolling and clicking "+" signs). Watch what happens to the window.document.body.clientHeight value as you change the DOM in your Pet Rock html and reload the browser (you need to hit the + signs by document and body along the way to get there). Also right click on the pet rock and check its properties and watch its height along the way. See how the numbers add up and relate to each other.
3. It helps if you install an add-on that lets you measure the actual window size, because with Firebug open your window size changes and might not be what you expect. I used the MeasureIt
add-on available from the firefox add-on site.
What I found as I played with this:
html> window.document.body.clientHeight = visible window size available in browser window
xhtml 1.0 transitional> window.document.body. clientHeight = pet rock height + top margin
So this was a long comment, but I hope it gives the Head First guys an idea of how a beginner reading their text for understanding can easily get derailed by a poorly chosen example. I love the series, but this example, not so much.