Code for a fundraising thermometer

**AussieJohn** · Dec 3, 2012 14:31

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>

**dlc3172** · Dec 3, 2012 18:47

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!!!

**AussieJohn** · Dec 3, 2012 18:52

Originally Posted by dlc3172

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?

**dlc3172** · Dec 3, 2012 19:24

Originally Posted by AussieJohn

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!

**AussieJohn** · Dec 3, 2012 20:35

Originally Posted by dlc3172

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.

**SmoothTokyo** · May 8, 2013 06:29

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

**Pullo** · May 8, 2013 06:48

Hi,

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

**SmoothTokyo** · May 8, 2013 06:58

Nope specific question about this thermometer example. Does not work in IE8. Best guess CSS issue.

**AussieJohn** · May 8, 2013 14:27

Originally Posted by SmoothTokyo

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.

Originally Posted by SmoothTokyo

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.

**SmoothTokyo** · May 9, 2013 01:41

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.

User Tag List

Thread: Code for a fundraising thermometer

Thread Tools

Display

IE8

Bookmarks

Bookmarks

Posting Permissions