Meter example on page 40 doesn't work

For whatever reason I can’t get the meter exercise on page 40 of b03 to work.

I’m using OS X Snow Leopard and it doesn’t work in any browser. Not Safari 5.01, not Chrome 5.0.375.125, Not Firefox 3.6.8, not Opera 10.60.

The best I’ve gotten in some browsers is the meter styled exactly like the image on the top of page 39. However the moment I comment out the script link to jquery, the meter breaks, showing only the rectangular meter box and all labels, but not the green meter part.

Any ideas on why this might be happening? I’ve looked around and can’t seem to figure out the root cause.
Thanks!

I’m not sure I follow. If you disable JavaScript, then the meter element cannot be styled in any browser right now, as no browser actulaly supports it. Removing jQuery will prevent any of the JavaScript from running, and so you’re left with just the textual information.

“Users without JavaScript enabled will still see the content we placed within the opening and closing meter element, which means we have to be mindful of what we place there. “

Any suggestions on I can explain this better?

Javascript is enabled in all browsers.

First, I tried typing the example/exercise by hand without any jquery fallback method, but after I got frustrated I went ahead and downloaded the code directly from PragProg. I opened it in all browsers and it looked as it should. Next, I commented out the link to jquery in the head to “break” the fallback method and see if it would render using html5. Once I did that, I ended up with the same result as when I had personally coded up the meter.

I get the exact same in all browsers I listed above. The meter works via javascript fallback but fails when using HTML5 alone.

here’s a screen shot of what I get in every browser after stripping all the javascript from the files I downloaded from pragprog.
http://skitch.com/malandrew/dtc13/dock

Ohhhh, I think I get it now. I just reread your reply.

Let’s me see if I got this right, none of the browsers have yet implemented <meter>?

If this is the case, why did you include it in the book, especially so early in the text? I know that the book is being written on a spec currently being defined by WHAT-WG, but it would seem to me that it would be best to only write about HTML5 that have been implemented by at least one of the browser makers.

It’s a great question. The thing is, like the html5 color form field, which also isn’t implemented anywhere, using the meter element as semantic markup to describe the content doesn’t actually break anything on browsers that don’t support it. I don’t think I did a good enough job of explaining that, and to that end, I’m sorry I wasted your time. I’ve reread the tip and I think there are a few things I can do to help get that point across better.

Thanks for reading, and for your feedback.