Skip to content

Instantly share code, notes, and snippets.

@strings28
Created November 8, 2010 02:41
Show Gist options
  • Save strings28/667320 to your computer and use it in GitHub Desktop.
Save strings28/667320 to your computer and use it in GitHub Desktop.
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
Copy link
Author

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

@mathiasbynens
Copy link

@Yaffle
Copy link

Yaffle commented Mar 22, 2011

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

@mathiasbynens
Copy link

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
Copy link

Yaffle commented Mar 22, 2011

mathiasbynens, tnx

@xjamundx
Copy link

xjamundx commented Nov 8, 2011

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
Copy link

dts350z commented Nov 6, 2013

I'm having several problems with this.

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

1
meter
10

  1. 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.

  1. This:

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

@dts350z
Copy link

dts350z commented Nov 6, 2013

"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
Copy link

dts350z commented Nov 6, 2013

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
Copy link

leesto commented May 1, 2014

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