Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
@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