SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript Does not Work in IE or FF (Beginner)

    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

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Progress meter &quot;Thermometer&quot; - 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>

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Perhaps if you move the JavaScript to just before the </body> tag (where almost all scripts belong) you will find it easier to work out why it isn't always working.

    It might also be worth using the debugger built into IE to see what is happening.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •