So long story short I am no web designer what so ever I know basic HTML that’s it, but I figured I’d play around. I found this code and was changing values just to see what happens and it all works fine and dandy in Google chrome but it the Java script does not work in IE or FF? I’m curious as to why? If anyone has some time to look it over I’d really appreciate it also if its ok to ask on this post maybe a good place to start to familiarize myself with web code I’m definitely interested in learning. Thanks
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Progress meter "Thermometer" - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#content {
width:300px;
margin:30px auto;
}
#thermometer {
width:50px;
height:200px;
position: relative;
background: #ddd;
border:1px solid #aaa;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
-o-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
-moz-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
-ms-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
-o-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
}
#thermometer .track {
height:175px;
top:10px;
width:20px;
border: 1px solid #aaa;
position: relative;
margin:0 auto;
background: rgb(255,255,255);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,0,0)), color-stop(1%,rgb(255,255,255)));
background: -webkit-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
background: -o-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
background: -ms-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
background: -moz-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
background: linear-gradient(to bottom, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
background-position: 0 -1px;
background-size: 100% 5%;
}
#thermometer .progress {
height:0%;
width:100%;
background: rgb(20,100,20);
background: rgba(20,100,20,0.6);
position: absolute;
bottom:0;
left:0;
}
#thermometer .goal {
position:absolute;
top:0;
}
#thermometer .amount {
display: inline-block;
padding:0 5px 0 60px;
border-top:1px solid black;
font-family: Trebuchet MS;
font-weight: bold;
color:#333;
}
#thermometer .progress .amount {
padding:0 60px 0 5px;
position: absolute;
border-top:1px solid #060;
color:#060;
right:0;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
//originally from http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript
function formatCurrency(n, c, d, t) {
"use strict";
var s, i, j;
c = isNaN(c = Math.abs(c)) ? 2 : c;
d = d === undefined ? "." : d;
t = t === undefined ? "," : t;
s = n < 0 ? "-" : "";
i = parseInt(n = Math.abs(+n || 0).toFixed(c), 10) + "";
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\\d{3})(?=\\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
}
/**
* Thermometer Progress meter.
* This function will update the progress element in the "thermometer"
* to the updated percentage.
* If no parameters are passed in it will read them from the DOM
*
* @param {Number} goalAmount The Goal amount, this represents the 100% mark
* @param {Number} progressAmount The progress amount is the current amount
* @param {Boolean} animate Whether to animate the height or not
*
*/
function thermometer(goalAmount, progressAmount, animate) {
"use strict";
var $thermo = $("#thermometer"),
$progress = $(".progress", $thermo),
$goal = $(".goal", $thermo),
percentageAmount;
goalAmount = goalAmount || parseFloat( $goal.text() ),
progressAmount = progressAmount || parseFloat( $progress.text() ),
percentageAmount = Math.min( Math.round(progressAmount / goalAmount * 1000) / 10, 1000); //make sure we have 1 decimal point
//let's format the numbers and put them back in the DOM
$goal.find(".amount").text( "%" + formatCurrency( goalAmount ) );
$progress.find(".amount").text( "%" + formatCurrency( progressAmount ) );
//let's set the progress indicator
$progress.find(".amount").hide();
if (animate !== false) {
$progress.animate({
"height": percentageAmount + "%"
}, 1200, function(){
$(this).find(".amount").fadeIn(500);
});
}
else {
$progress.css({
"height": percentageAmount + "%"
});
$progress.find(".amount").fadeIn(500);
}
}
$(document).ready(function(){
//call without the parameters to have it read from the DOM
thermometer();
// or with parameters if you want to update it using JavaScript.
// you can update it live, and choose whether to show the animation
// (which you might not if the updates are relatively small)
//thermometer( 1000000, 425610, false );
});
})
</script>
</head>
<body>
<div id="content">
<div id="thermometer">
<div class="track">
<div class="goal">
<div class="amount"> 60 </div>
</div>
<div class="progress">
<div class="amount">35</div>
</div>
</div>
</body>
</html>