Group description: Layout/presentation on the WWW.
Group description: Mozilla XPInstall discussion.
CSS based meter element styling, I used the html code and layout pecifications from the HTML5 (Edition for Web Authors) specification.
Had to use a lot of CSS3 attributes for filtering the original source-code (the different colors of text and link elements) but the styling of the meter-tag itself is based on a simple usage of
Tested on Firefox 3.6, Safari 4.0.3, Google Chrome 5.0.375, Opera 10.0, Internet Explorer 8 (no HTML5 , therefore IE does not show any "meter graphic", but fallback looks still fine).
Tom Leadbetter suggests a combination of a definition list and the meter element to code a something like this. I added the percentual display as another meter element and tried to style - this is how far I came (without images):
To create something like this with pure css, and no images - not a good idea, a hell lot of CSS syntax with minimal browser support - see you back a few browser versions later I guess.Get the CSS anyway
The speed-o-meter itself is a background image, all other elements (the needle, infobox) are "generated" via the
:after. I use transformations to put the needle to the correct position, it seems
that opera (version 10.0) doesn't take it. Safari, Chrome and Firefox do what I want.
This example is based on the canvas element. Currently working on Firefox 3.6, Google Chrome 5.0.3 and Safari 4.0.3. Opera 10.0 supports most of it, but has problems with the text. In this draft of the JQuery plugin I did not find the time to implement VML logic for internet explorer, but you might want to use ie-canvas for testing. The plugin is far from beeing a real working one, it is more a proof of concept. Stay tuned - an improved version will follow soon.Get the code anyway