Modernizr Example

modernizr-example.html

<script src="../modernizr-1.7.js" type="text/javascript"></script>
<script type="text/javascript">
    function testFeatures() {
        // Test for JavaScript Features
        document.querySelector("#geoloc").innerHTML = Modernizr.geolocation ? "supported" : "not supported";
        document.querySelector("#touch").innerHTML = Modernizr.touch ? "supported" : "not supported";

        // Test for HTML5 Features
        document.querySelector("#svg").innerHTML = Modernizr.svg ? "supported" : "not supported";
        document.querySelector("#canvas").innerHTML = Modernizr.canvas ? "supported" : "not supported";
    }

    window.onload = testFeatures;
    
    if (Modernizr.geolocation) {
        navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
    }

    function geoSuccess(positionInfo) {
        document.getElementById("longitude").innerHTML = positionInfo.coords.longitude;
        document.getElementById("latitude").innerHTML = positionInfo.coords.latitude;
        document.getElementById("accuracy").innerHTML = positionInfo.coords.accuracy;
        document.getElementById("altitude").innerHTML = positionInfo.coords.altitude;
        document.getElementById("altitudeAccuracy").innerHTML = positionInfo.coords.altitudeAccuracy;
        document.getElementById("heading").innerHTML = positionInfo.coords.heading;
        document.getElementById("speed").innerHTML = positionInfo.coords.speed;
    }

    function geoError(positionError) {
        if (errorInfo.code == 1)
            alert("The user denied permission access");
        else if (errorInfo.code == 2)
            alert("Unable to locate you!");
        else if (errorInfo.code == 3)
            alert("Timed out getting location");
    }
</script>
<style type="text/css">
    .animtest, .noanimtest
    {
        display: none;
    }
    .cssanimations .animtest {
        display:block;
    }
    .no-cssanimations .noanimtest
    {
        display:block;
    }
</style>