SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 43
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Code for a fundraising thermometer

    I am looking for code for a fundraising thermometer.

    I have looked and looked and looked.

    I need it to be html and js

    Can point me in the right direction.

  2. #2
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,087
    Mentioned
    54 Post(s)
    Tagged
    0 Thread(s)
    How do you plan to populate the percentage? Will it be pulled from a db or manually updated? You could easily make a simple vertical div of x pixels in height, then its just a matter of calculating a file inside of that div based on your goal and current amount.

  3. #3
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    5
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I was looking for the same thing. Not sure if you found your tool. This one seems very good satisfying your needs:

    http://www.flashthermometer.site90.com/index.php

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jelly46 View Post
    I am looking for code for a fundraising thermometer.


    I have looked and looked and looked.


    I need it to be html and js


    Can point me in the right direction.

    You can thank @quantass ; for replying earlier today, made me notice this post


    I thought this sounded like something that would be fun to build, so I just went ahead and built something. I'll run you through the process


    Ok, first up, since we're talking something that's HTML based, we need a little bit of markup
    HTML Code:
    <div id="thermometer">
    
        <div class="track">
            <div class="goal">
                <div class="amount"> 90000 </div>
            </div>
            <div class="progress">
                <div class="amount">47835 </div>
            </div>
        </div>
    
    </div>

    You'll notice I've put some values in there for the goal amount and the progress amount. The reason they are unformatted is so it's easier to parse them with JavaScript, we can format them later


    These values could have come from a database and inserted on the server side, of course it's possible to update the progress bar of this "thermometer" dynamically too if you were to get new values via AJAX or something like that.


    Now that we have some basic markup, we can add some CSS to make it look all pretty (well, pretty is a relative term, I am definitely no designer!).


    Code css:
    /* Base thermometer style, this is the slate */
    #thermometer {
        width:70px;
        height:300px;
        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;
    }
     
     
    /* This represents the track of the thermometer, the linear background 
        with a background size set will generate a line every 5% of the track. */
    #thermometer .track {
        height:280px;
        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%;
    }
     
     
    /* The progress indicator (the mercury, if you will) */
    #thermometer .progress {
        height:0%;
        width:100%;
        background: rgb(20,100,20);
        background: rgba(20,100,20,0.6);
        position: absolute;
        bottom:0;
        left:0;
    }
     
     
    /* let's position the goal */
    #thermometer .goal {
        position:absolute;
        top:0;
    }
     
     
    /* just style the amounts a little bit */
    #thermometer .amount {
        display: inline-block;
        padding:0 5px 0 60px;
        border-top:1px solid black;
        font-family: Trebuchet MS;
        font-weight: bold;
        color:#333;
    }
     
     
    /* make sure the progress amount appears on the left side, 
        this way they progress and goal amounts won't overlap should we reach 100% (or greater) */
    #thermometer .progress .amount {
        padding:0 60px 0 5px;
        position: absolute;
        border-top:1px solid #060;
        color:#060;
        right:0;
    }


    Now, if you were to load this up in your browser right now, we wouldn't see anything too exciting, just the two amounts on either end of this thermometer.


    We'll need a little bit of JavaScript to spuce things up.


    First up, I realised that we need to format the numbers like currency at some point, so I did a quick google search, since I figured there had to have been a lot of people that have written something to format numbers in JavaScript.


    I found this little snippet (I've adapted it a little) on Stack Overflow
    Code javascript:
    //originally from [url]http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript[/url]
    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) : "");
    }


    Ok, now that our number formatting is out of the way, we can get on with the good bits.


    Code javascript:
    /**
     * 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";
     
        //set up our vars and cache some jQuery objects    
        var $thermo = $("#thermometer"),
            $progress = $(".progress", $thermo),
            $goal = $(".goal", $thermo),
            percentageAmount;
     
        //work out our numbers        
        goalAmount = goalAmount || parseFloat( $goal.text() ),
        progressAmount = progressAmount || parseFloat( $progress.text() ),
        percentageAmount =  Math.min( Math.round(progressAmount / goalAmount * 1000) / 10, 100); //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 { // we don't always want to animate
            $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 );
     
    });


    A fully working example on JS Fiddle: http://jsfiddle.net/GeekyJohn/vQ4Xn/

    I realize the helpfulness of this post to the OP is completely negated by the lateness of the response, but who knows, maybe someone finds this helpful
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,087
    Mentioned
    54 Post(s)
    Tagged
    0 Thread(s)
    Wonderful work @AussieJohn ; I'll be diving in to this later to see if I can't learn a ting or two!

  6. #6
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a way to convert this script to GBP ?

  7. #7
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Caspy View Post
    Is there a way to convert this script to GBP ?
    Yeah, absolutely. The only thing you need to do is replace the "$" symbol in the following section:

    Code javascript:
        //let's format the numbers and put them back in the DOM
        $goal.find(".amount").text( "$" + formatCurrency( goalAmount ) );
        $progress.find(".amount").text( "$" + formatCurrency( progressAmount ) );
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  8. #8
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great... il try that if i ever get it working.. i got the html in place... but the javascript does not seem to work

    http://www.sunny-sid3up.org/donate.html

  9. #9
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok got it working.. now can i have 2 of these graphs running on the same page but displaying diff ammounts..

  10. #10
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Caspy View Post
    ok got it working.. now can i have 2 of these graphs running on the same page but displaying diff ammounts..
    You could but you'd have to change a few things around. I'm at work at the moment but I'll take a look at it when I get home.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  11. #11
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well im in the UK so am a bit ahead of you in time.. so ill check back tomorrow and see if we got any developements.. thx for the help as this is the best script i have found in a long night of searching and trying of scripts

  12. #12
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I've created a new JS Fiddle for this http://jsfiddle.net/GeekyJohn/UpnKF/

    Basically I've just changed the CSS/Markup to use classes for "thermometers" and have given the function the ability to take an ID to use as the identifier for a thermometer.

    The signature has changed slightly:
    Code:
    function thermometer(id, goalAmount, progressAmount, animate) {
        "use strict";
    
    
        var $thermo = $("#"+id),
    The only real difference is that you now call the function with an id as the first parameter.

    Code javascript:
    //call without the parameters to have it read from the DOM
    thermometer("thermo1");
     
    // 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("thermo2", 1000000, 425610, false);
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  13. #13
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great job my friend... its turned out better than i though of...

    thx very much

    http://www.sunny-sid3up.org/donate.html

  14. #14
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Caspy View Post
    Great job my friend... its turned out better than i though of...

    thx very much

    http://www.sunny-sid3up.org/donate.html
    Awesome

    It's always nice to see the end result of stuff that happens in the forums. Thanks for sharing!
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  15. #15
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Im back lol..

    I have another question for a slight mod on this script...

    just now the meters are in a vertical state... could it be designed so the meters are horisontal

  16. #16
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Caspy View Post
    just now the meters are in a vertical state... could it be designed so the meters are horisontal
    Yeah, it was actually quite trivial to do this, mostly there were some CSS changes involved.

    I've updated the previously mentioned fiddle: http://jsfiddle.net/GeekyJohn/UpnKF/

    Here's the approach for anyone that's interested.

    Added a class to one of the thermometers to indicate that it should be horizontal.

    HTML Code:
    <div id="thermo2" class="thermometer horizontal">
    Referencing the original JS code for the thermometer function, we add 2 more variables:

    Code javascript:
            isHorizontal = $thermo.hasClass("horizontal"),
            newCSS = {};

    isHorizontal's purpose is pretty obvious, the newCSS object will allow us to specify the new CSS for the progress part of the thermometer since we now need to change the property that is changed dynamically.

    Right before we need the new CSS, we set its value:

    Code javascript:
        //decide if we need to affect height or width
        newCSS[ isHorizontal ? "width" : "height" ] = percentageAmount + "%";
     
     
        if (animate !== false) { 
            $progress.animate( newCSS, 1200, function(){
                $(this).find(".amount").fadeIn(500);
            });
        }
        else {
            $progress.css( newCSS );
            $progress.find(".amount").fadeIn(500);
        }

    And those are all the JavaScript changes that are required. The rest is all overriding CSS rules.

    The new rules are:

    Code css:
    .thermometer.horizontal {
        margin:100px auto;
    }
     
    .thermometer.horizontal {
        width:350px;
        height:70px;
    }
     
    .thermometer.horizontal .track {
        width:90%;
        left:0;
        height:20px;
        margin:14px auto;
     
        /* Need to make sure our "track" has the indicators going in the right direction*/ 
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(0,0,0)), color-stop(1%,rgb(255,255,255)));
        background: -webkit-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
        background:      -o-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
        background:     -ms-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
        background:    -moz-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
        background:   linear-gradient(to right, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
        background-size: 5% 100%;
    }
     
    .thermometer.horizontal .progress {
        height:100%;
        width:0%;
    }
     
    .thermometer.horizontal .goal {
        left:100%;
        height:100%;
    }
     
    .thermometer.horizontal .amount {
        bottom:0;
        position: absolute;
        padding:0 5px 50px 5px;
        border-top:0;
        border-left:1px solid black;
    }
     
    .thermometer.horizontal .progress .amount {
        border-left:0;
        border-top:0;
        border-right:1px solid #060;
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  17. #17
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again.. thx for your work.. ill give the code a testing soon.. works crazy just now but soon as its done ill drop a link.. thx

  18. #18
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As mentioned in my last post.. here is the meter in its final placing on my site...

    http://www.sunny-sid3up.org/donate.html

    Thank you again for some top class work...

    This is an awasome bit of coding.. thx

  19. #19
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just found this code and it's just what I've been looking for. And it's a very elegant-looking thermometer, so I'd like to use it on my site. Sorry for asking such a dumb question, but I really just have a basic understanding of coding. How do I set this up on my server? Does the html and javascript code go into the same file? And does the CSS code go into its own file? And, if so, what should the .css file be named? Again, sorry for asking such rudimentary questions. I wasn't able to figure it out on my own when I tried to use the code. Thanks for any help you can provide to a true novice!

  20. #20
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dlc3172 View Post
    I just found this code and it's just what I've been looking for. And it's a very elegant-looking thermometer, so I'd like to use it on my site. Sorry for asking such a dumb question, but I really just have a basic understanding of coding. How do I set this up on my server? Does the html and javascript code go into the same file? And does the CSS code go into its own file? And, if so, what should the .css file be named? Again, sorry for asking such rudimentary questions. I wasn't able to figure it out on my own when I tried to use the code. Thanks for any help you can provide to a true novice!
    You can put all the JavaScript and CSS in the same document - helpful if you're only going to implement this on 1 page.

    A common solution is to place all CSS and JavaScript in external files so that if you want to reuse it on multiple pages it is easy to keep the code in sync and makes sure the files are cached between pages (which means less bytes to download for users)

    Let's take the latter approach - Here is a sample HTML file - we'll assume that the CSS is in thermo.css and the JavaScript is in thermo.js
    HTML Code:
    <!DOCTYPE html>
    <html xml:lang="en-au" lang="en-au">
    <head>
      <meta charset="utf-8">
      <title>Thermometer</title>
      <link rel="stylesheet" type="text/css" href="thermo.css" />
    
    
      <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    
      <script type="text/javascript" src="thermo.js"></script>
    </head>
    <body>
      <div id="content">
    
        <div id="thermo1" class="thermometer">
    
            <div class="track">
                <div class="goal">
                    <div class="amount"> 90000 </div>
                </div>
                <div class="progress">
                    <div class="amount">47835 </div>
                </div>
            </div>
    
        </div>
    
        <div id="thermo2" class="thermometer horizontal">
    
            <div class="track">
                <div class="goal">
                    <div class="amount"> 1000000 </div>
                </div>
                <div class="progress">
                    <div class="amount">354680 </div>
                </div>
            </div>
    
        </div>
    
      </div>
    </body>
    </html>
    You might need to make some changes to the CSS to make sure the thermometer is positioned correctly on your site - but it should be fairly minimal I imagine.

    Hope this helps you implement it
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  21. #21
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    making progress...

    OK - I'm making progress. I now see the two thermometers on my page. What I did was take your HTML code above and put that into thermo.html. Then, in the same directory, I added thermo.js and thermo.css. For each, I used the code I found here: http://jsfiddle.net/GeekyJohn/UpnKF/

    The only problem is that the thermometers are not animating with the green fluid. The correct ranges are being shown, but no animation. Any ideas?

    Here's a screenshot showing what I'm seeing. Thanks!!!

    ScreenHunter_02 Dec. 02 22.22.jpg

  22. #22
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dlc3172 View Post
    The only problem is that the thermometers are not animating with the green fluid. The correct ranges are being shown, but no animation. Any ideas?
    Be sure to also include the jQuery library before the thermo.js script
    Code:
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  23. #23
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, I just did that, but no luck. I just added it at the top. Is this correct?

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>



    //originally from http://stackoverflow.com/questions/1...-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(id, goalAmount, progressAmount, animate) {
    "use strict";

    var $thermo = $("#"+id),
    $progress = $(".progress", $thermo),
    $goal = $(".goal", $thermo),
    percentageAmount,
    isHorizontal = $thermo.hasClass("horizontal"),
    newCSS = {};

    goalAmount = goalAmount || parseFloat( $goal.text() ),
    progressAmount = progressAmount || parseFloat( $progress.text() ),
    percentageAmount = Math.min( Math.round(progressAmount / goalAmount * 1000) / 10, 100); //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();

    newCSS[ isHorizontal ? "width" : "height" ] = percentageAmount + "%";

    if (animate !== false) {
    $progress.animate( newCSS, 1200, function(){
    $(this).find(".amount").fadeIn(500);
    });
    }
    else {
    $progress.css( newCSS );
    $progress.find(".amount").fadeIn(500);
    }
    }

    $(document).ready(function(){

    //call without the parameters to have it read from the DOM
    thermometer("thermo1");
    // 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("thermo2", 1000000, 425610 );

    });
    ?

  24. #24
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Ah, sorry for the confusion. The reference to jQuery needs to go in the HTML file.

    You should have something like this near the top of your HTML:

    Code:
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    
    <script type="text/javascript" src="thermo.js"></script>
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  25. #25
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looking at my html file, it looks like I already had that in there.

    Here are my three files:

    Code:
    HTML Code:
    <!DOCTYPE html>
    <html xml:lang="en-au" lang="en-au">
    <head>
      <meta charset="utf-8">
      <title>Thermometer</title>
      <link rel="stylesheet" type="text/css" href="thermo.css" />
    
    
      <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    
      <script type="text/javascript" src="thermo.js"></script>
    </head>
    <body>
      <div id="content">
    
        <div id="thermo1" class="thermometer">
    
            <div class="track">
                <div class="goal">
                    <div class="amount"> 90000 </div>
                </div>
                <div class="progress">
                    <div class="amount">47835 </div>
                </div>
            </div>
    
        </div>
    
        <div id="thermo2" class="thermometer horizontal">
    
            <div class="track">
                <div class="goal">
                    <div class="amount"> 1000000 </div>
                </div>
                <div class="progress">
                    <div class="amount">354680 </div>
                </div>
            </div>
    
        </div>
    
      </div>
    </body>
    </html>

    Code:
    //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(id, goalAmount, progressAmount, animate) {
        "use strict";
    
        var $thermo = $("#"+id),
            $progress = $(".progress", $thermo),
            $goal = $(".goal", $thermo),
            percentageAmount,
            isHorizontal = $thermo.hasClass("horizontal"),
            newCSS = {};
    
        goalAmount = goalAmount || parseFloat( $goal.text() ),
        progressAmount = progressAmount || parseFloat( $progress.text() ),
        percentageAmount =  Math.min( Math.round(progressAmount / goalAmount * 1000) / 10, 100); //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();
    
        newCSS[ isHorizontal ? "width" : "height" ] = percentageAmount + "%";
    
        if (animate !== false) {
            $progress.animate( newCSS, 1200, function(){
                $(this).find(".amount").fadeIn(500);
            });
        }
        else {
            $progress.css( newCSS );
            $progress.find(".amount").fadeIn(500);
        }
    }
    
    $(document).ready(function(){
    
        //call without the parameters to have it read from the DOM
        thermometer("thermo1");
        // 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("thermo2", 1000000, 425610 );
    
    });
    ?


    Code:
    #content {
        width:700px;
        margin:30px auto;
    }
    .thermometer {
        float: left;
        margin:0 150px;
    }
    .thermometer {
        width:70px;
        height:300px;
        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:280px;
        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;
    }
    
    
    
    .thermometer.horizontal {
        margin:100px auto;
    }
    
    .thermometer.horizontal {
        width:350px;
        height:70px;
    }
    
    .thermometer.horizontal .track {
        width:90%;
        left:0;
        height:20px;
        margin:14px auto;
    
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(0,0,0)), color-stop(1%,rgb(255,255,255)));
        background: -webkit-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
        background:      -o-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
        background:     -ms-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
        background:    -moz-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
        background:   linear-gradient(to right, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
        background-size: 5% 100%;
    }
    
    .thermometer.horizontal .progress {
        height:100%;
        width:0%;
    }
    
    .thermometer.horizontal .goal {
        left:100%;
        height:100%;
    }
    
    .thermometer.horizontal .amount {
        bottom:0;
        position: absolute;
        padding:0 5px 50px 5px;
        border-top:0;
        border-left:1px solid black;
    
    }
    
    .thermometer.horizontal .progress .amount {
        border-left:0;
        border-top:0;
        border-right:1px solid #060;
    }
    ?


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
  •