Mobile Safari not accepting HTML5 Meter input value

Question

I'm creating an app that tracks your elevation. Currently IOS is one of the only devices to support the Altitude parameter so it's vital to get it working in mobile Safari. The altitude will be printed in two location on page, in a text element and also in the Meter element so there is a visual representation of your current altitude.

Generating the altitude hasn't been an issue but what I haven't had any success with getting the altitude to store in the Meter's value. Something to note is the Mobile Safari doesn't support the Meter element so I am using a polyfill to get it to work at all.

You can get the general idea of what i'm trying to do here: http://jsfiddle.net/qF9hh/

Notice the geolocation coords are commented out, but they do work if you were to test it on an IOS device.

So my question is, how do I get the Altitude coordinate to store in the Meter??

Answer 1

something like this might work better

var worked = false;
$("button").click(function () {
    worked = false;
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
    } else {
        error('not supported');
    }
}).load();​
function error(msg){
    alert(typeof(msg) = "string" ? msg : "error!");
}
function success(pos){
    if(worked)return; // to prevent firing twice in firefox
    worked = true;
    var meter = $("#high");
    if(pos.altitude === null){
        error("Altitide not supported");
        return;
    }
    meter.val(pos.altitude);
    meter.text(pos.altitude + "/" + meter.attr("max"));
}

Jsfiddle