CODEWITHSUNDEEP
javascripthtmlwebkitcss
chadoh
chadoh

Reputation: 4432

showing extra information in an html5 meter element; nesting elements within the meter?

I am using the meter element to show a score between 1 & 10, and in the newest webkit browsers, it looks fantastic.

I would now like to show the average score, as well. While it's useful to know that my submission received a 6 out of 10, it would be even more useful to know that the average for this magazine so far is a 5.

Unfortunately, the slew of available attributes for the meter tag does not include "average".

I want to show a simple vertical line at the average value. I thought perhaps I could put a span or a div inside the meter, make it display: block, and give it a 100% height, a 50% width, and a border-right. Unfortunately, Chrome 11 doesn't even allow me to nest block elements within the meter, my preliminary investigations indicate.

I'd be willing to use JS to display the vertical line if I had to (when I originally envisioned this feature I thought I'd be using entirely JS), but the meter tag is so delightful that I refuse to not use it now.

Upvotes: 1

Views: 589

Answers (1)

KooiInc
KooiInc

Reputation: 122906

A trick may be placing a span after the meter tag, shifting it to the left using some arithmetic

<meter id="m" value="2" min="0" max="10">somevalue</meter>
<span id="average" 
      style="border-left:1px solid black;width:1px;margin-left:-50px">
</span>

aritmetic could be something like:

var average = [somevalue, say 0.45];
document.getElementById('average').style['margin-left'] = 
 (Math.floor((average-1)*document.getElementById('m').offsetWidth))+'px'

Upvotes: 1

Related Questions