SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 43 of 43
  1. #26
    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)
    Are you trying to run this file locally by double clicking on it or are you running a webserver locally? If it's the former, try changing the URL to jQuery to be preceded by a "http:"

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

  2. #27
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm uploading my three files to my hosting account, and then I'm viewing the html file live online. I'm also clearing my browser cache each time, just in case. In any case, I added the "http" like you indicated, but that didn't make a difference.

    Sorry this is turning into so much trouble! I appreciate your patience with me!!!

  3. #28
    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
    Sorry this is turning into so much trouble! I appreciate your patience with me!!!
    No probs

    Mind letting me have a look at the URL where you're putting it?
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  4. #29
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    No probs

    Mind letting me have a look at the URL where you're putting it?
    Well, my site's not public yet and I really don't want to post the URL in a public forum. Does it help if I tell you I'm using Yahoo hosting service? And, in case it's important, I'm using Yahoo's SiteBuilder tool and I'm simply embedding the code with the tool's "insert html" feature, which let's you insert any kind of code, not just html.

    And, if it helps, here's the full code from the html page:

    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><!-- text below generated by server. PLEASE REMOVE --><!-- Counter/Statistics data collection code --><script language="JavaScript" src="http://l.yimg.com/d/lib/smb/js/hosting/cp/js_source/whv2_001.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1354583998" alt="setstats" border="0" width="1" height="1"></noscript>

    by the way, I'm going out of town tomorrow, so if I don't reply to your next post right away, I'll be back in a couple days... THANKS AGAIN!

  5. #30
    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
    Well, my site's not public yet and I really don't want to post the URL in a public forum. Does it help if I tell you I'm using Yahoo hosting service? And, in case it's important, I'm using Yahoo's SiteBuilder tool and I'm simply embedding the code with the tool's "insert html" feature, which let's you insert any kind of code, not just html.
    Can't say I've ever used Yahoo's Sitebuilder - providing that the file references are all correct it *should* work.

    If your site is accessible publicly, feel free to PM me with the URL and I'll take a look when I get a chance.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #31
    SitePoint Member
    Join Date
    May 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE8

    The CSS does not appear to work well in IE8. Also Fiddle has problems with IE8.

    Not so worried about Fiddle, but has anyone managed to get this to look good in IE8?

    Thank you in advance

  7. #32
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    If this is a CSS question, you will get a better response if you post in the CSS Forum.

  8. #33
    SitePoint Member
    Join Date
    May 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope specific question about this thermometer example. Does not work in IE8. Best guess CSS issue.

  9. #34
    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 SmoothTokyo View Post
    The CSS does not appear to work well in IE8. Also Fiddle has problems with IE8.
    Yup, you're correct. I used mostly CSS3 stuff for the cool things on that thermometer. The rounded corners, drop shadow and the indicator lines are all CSS3 features that IE8 does not understand. I've kept it relatively generic so styling it can be achieved quite easily with a little knowledge of CSS.

    Quote Originally Posted by SmoothTokyo View Post
    Not so worried about Fiddle, but has anyone managed to get this to look good in IE8?
    I might put an item on my Todo list to build a few more styling examples of this thermometer/progress meter.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  10. #35
    SitePoint Member
    Join Date
    May 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi AussieJohn,

    Thank you for the response. Is it possible to provide an example of some simple CSS that works with IE8? I am sure it is simpler for you. If needed I can ask for a small budget for that will help accelerate the process.

  11. #36
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great thread!

    I am interested in creating a similar thermometer, but with the following additions:
    1. Automatically updates from infomation pulled form another site.
    2. Has a series of key goal points.

    Is this possible?

  12. #37
    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 vadesigner View Post
    1. Automatically updates from infomation pulled form another site.
    That would be a bit beyond the scope of this plugin - though it would be relatively easy to set up something that simply utilises the plugin.

    Think along these lines

    1. Get data from remote site
    2. Process/manipulate data for display
    3. Update the widget with new values


    In terms of code it could be as simple as:

    Code JavaScript:
    // We'll use jQuery's getJSON method
    $.getJSON("http://example.org/path/to/jsonp/service?callback=?", function( data ) {
        $("#goal-meter").goalMeter({ progressAmount: data.amount });
    });

    Quote Originally Posted by vadesigner View Post
    2. Has a series of key goal points.
    This sounds like something that would be an interesting feature to add. It's not currently possible but I might add this feature because I can see the potential for it to be useful.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  13. #38
    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)

    This script is now a jQuery Plugin

    As you might note from the previous post - the syntax of the "Thermometer script" has changed a bit - I've actually turned this in to a jQuery plugin called "GoalMeter" and is available on GitHub http://afterlight.github.io/GoalMeter/

    If you need to lodge bugs or have a feature you'd like to request, feel free to do so on the GitHub issues page for this plugin: https://github.com/afterlight/GoalMeter/issues
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  14. #39
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    is there a way to repeat, re-use to track more than one person's fundraising efforts?


  15. #40
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nevermind @AussieJohn, I saw further updates and figured it out! http://jsfiddle.net/vQ4Xn/392/

  16. #41
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    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
    This is awesome! But, I can't figure out what I'm missing! Could you please advise? Thanks!
    http://www.saintleo.edu/Thermometer/Thermometer.html

  17. #42
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    Quote Originally Posted by kinney0201 View Post
    This is awesome! But, I can't figure out what I'm missing! Could you please advise? Thanks!
    http://www.saintleo.edu/Thermometer/Thermometer.html
    You'll stand more of a chance of getting help if you say what the problem is, what isn't working and what you've tried.

  18. #43
    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)
    Hey kinney0201 - Try using the jQuery plugin I wrote - it makes things a lot easier

    https://github.com/afterlight/GoalMeter
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


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
  •