Skip to content

@strings28 /meter-polyfill.css
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
meter{
display: block;
border: 1px outset;
height: 20px;
width: 100px;
overflow: hidden;
}
meter div
{
display: block;
border-right:1px solid #000;
height: 20px;
background: #b4e391; /* old browsers */
background: -moz-linear-gradient(top, #b4e391 0%, #44AA00 35%, #b4e391 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(35%,#44AA00), color-stop(100%,#b4e391)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 ); /* ie */
}
.meterValueTooHigh div, .meterValueTooLow div{
background: #ffd65e; /* old browsers */
background: -moz-linear-gradient(top, #ffd65e 0%, #FBFF47 35%, #febf04 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(35%,#FBFF47), color-stop(100%,#febf04)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* ie */
}
.meterIsMaxed
{
border-right: 0px none !important;
}
// hack for backwards compatibility
document.createElement('meter');
// create polyfill
function makeMeter(meterElement) {
// parse values and attributes
function attr(attributeName, defaultValue) {
return meterElement.getAttribute(attributeName) != null ?
meterElement.getAttribute(attributeName) :
(defaultValue ? defaultValue : null);
}
function addClass(classStr) {
var classes = meterElement.className.split(' ');
if (classes.length == 0) {
meterElement.className = classStr;
return;
}
for (classStrVal in classes) {
if (classStr == classStrVal) { return; }
}
classes.push(classStr);
meterElement.className = classes.join(' ');
}
function removeClass(classStr) {
var classes = meterElement.className.split(' ');
var i = classes.length;
while (i--) {
if (classes[i] == classStr) {
classes.splice(i, 1);
break;
}
}
meterElement.className = classes.join(' ');
}
function getFormParent() {
var element = meterElement;
while (element.parent && element.parent.tagName.toLowerCase() != 'form') {
element = element.parent;
}
if (element.tagName.toLowerCase() == 'form') {
return element;
}
return null;
}
function getFormLabels() {
var id = meterElement.id;
if (id == null || this.form == null) {
return null;
}
var elementsLabels = [];
// otherwise loop through the form's child label elements
// looking for the element that has a for="{this.id}"
var labels = this.form.getElementsByTagName('label');
for (label in labels) {
if (label['for'] == id) {
elementsLabels.push(label);
}
}
if (elementsLabels.length > 0) {
return elementsLabels;
}
return null;
}
this.min = parseFloat(attr('min', 0)); // default as per HTML5 spec
this.max = parseFloat(attr('max', 1)); // default as per HTML5 spec
this.high = parseFloat(attr('high'));
this.low = parseFloat(attr('low'));
this.optimum = parseFloat(attr('optimum'));
// TODO: make this look for 'innerText' if the attribute doesn't exist
this.value = attr('value') != null ? parseFloat(attr('value')) : (meterElement.textContent ? meterElement.textContent : meterElement.innerText);
if (meterElement.textContent) {
meterElement.textContent = '';
} else if (meterElement.innerText) {
meterElement.innerText = '';
}
this.onchange = function() { alert(1); };
this.title = attr('title') != null ? attr('title') : this.value;
this.form = getFormParent();
this.labels = getFormLabels();
/*
The following inequalities must hold, as applicable:
minimum ≤ value ≤ maximum
minimum ≤ low ≤ maximum (if low is specified)
minimum ≤ high ≤ maximum (if high is specified)
minimum ≤ optimum ≤ maximum (if optimum is specified)
low ≤ high (if both low and high are specified)
*/
if (this.value < this.min) {
this.value = this.min;
}
if (this.value > this.max) {
this.value = this.max;
}
if (this.low != null && this.low < this.min) {
this.low = this.min;
}
if (this.high != null && this.high > this.max) {
this.high = this.max;
}
if (meterElement.children.length == 0) {
var indicator = document.createElement("div");
} else {
indicator = meterElement.children[0];
}
var width = meterElement.offsetWidth;
width *= this.value / this.max;
indicator.style.width = Math.ceil(width) + 'px';
if (this.high && this.value >= this.high) {
addClass("meterValueTooHigh");
}
else if (this.low && this.value <= this.low) {
addClass("meterValueTooLow");
} else {
removeClass("meterValueTooHigh");
removeClass("meterValueTooLow");
}
if (this.value >= this.max) {
addClass('meterIsMaxed');
} else {
removeClass('meterIsMaxed');
}
meterElement.title = this.title;
if (meterElement.children.length == 0) {
meterElement.appendChild(indicator);
}
}
window.onload = function() {
var meters = document.getElementsByTagName('meter');
var i = meters.length;
while (i--) {
makeMeter(meters[i]);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Meter</title>
<meta charset="utf-8" />
<style>
@import url('meter-polyfill.css');
</style>
<script type="text/javascript" src="meter-polyfill.js"></script>
</head>
<body>
<dl>
<dt>Normal</dt>
<dd><meter min="0.6" value="4.89" max="5.09"></meter></dd>
<dt>Too High</dt>
<dd><meter min="0" high="8" value="9" max="10"></meter></dd>
<dt>Too Low</dt>
<dd><meter min="0" low="3" value="2" max="10"></meter></dd>
<dt>Optimal</dt>
<dd><meter min="0" value="5" max="10"></meter></dd>
<dt>Text value in meter node</dt>
<dd><meter min="0" value="5" max="10">Cooties</meter></dd>
<dt>High greater than Max</dt>
<dd><meter min="0" value="5" max="10"></meter></dd>
<dt>Low greater than Min</dt>
<dd><meter min="0" high="8" value="9" max="10"></meter></dd>
<dt>Value greater than Max</dt>
<dd><meter min="4" value="11" max="10"></meter></dd>
<dt>Value lesser than Min</dt>
<dd><meter min="4" value="0" max="10"></meter></dd>
</dl>
</body>
</html>
@strings28
Owner

Meter polyfill to give developers the use of the HTML5 meter element in other browsers.

@Yaffle

also for Firefox 4, i can you this
"-moz-appearance:progressbar;" , "progresschunk"
demo:
http://hostel6.ru/tv/tmp/magic.html

@mathiasbynens

The code Yaffle tried to post was the following:

<progress style="-moz-appearance:progressbar;display:inline-block;width:200px;" min="0" value="5" max="10">
<div style="-moz-appearance:progresschunk;width:50%;"></div>
</progress>
@Yaffle

mathiasbynens, tnx

@xjamundx

These are both forked from yours....

An updated CSS File:
https://gist.github.com/1346633

A polyfill assuming you have jQuery (to handle your addClasses and things):
https://gist.github.com/1346631

Currently broken in IE8, but close :)

@dts350z

I'm having several problems with this.

1) This changes my layout from 1 meter 10 to:

1
meter
10

2) I don't know how to change the value via javascript (on fallback browsers).

var rwMeter = document.getElementById("RearWidth");
rwMeter.value = rwv;

works on browsers that support but doesn't work with the polyfill.

3) This:

doesn't work properly with the polyfill (no value displayed).

@dts350z

"This" was a meter with a negative min, a positive max, with a value of zero. -110 min 10 max value zero should show the meter mostly full, but in poly fill it shows nothing.

@dts350z

For #1, I commented out the "display:block" in the meter css.

For #3, I changed the javascript:

var width = meterElement.offsetWidth;
width *= (this.value - this.min) / (this.max - this.min);

@leesto

On line 79 of meter-polyfill.js there is an alert call. This can appear when submitting forms on the same page as where the meter is displayed. I've just removed it with no obvious side effect.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.