-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
114 lines (104 loc) · 4.48 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Fundraising Thermometer</title>
<meta name="description" content="A versatile fundraising thermometer jQuery plugin">
<meta name="keywords" content="jquery, css, meter, thermometer, fundtaising">
<meta name="author" content="Ray Hyde | www.rayhyde.nl">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Carter+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/thermometer.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>A versatile fundraising thermometer</h1>
</div>
</div>
<div class="row">
<div class="col-md-8 col-xs-12">
<div class="row">
<div class="col-md-6 col-xs-12">
<div id="thermometer-wrap">
<div id="thermometer">
<span class="current">€ 9.000</span>
<span class="goal">€ 16.000</span>
<div class="hilite"></div>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="therm-text">
<h2>a jQuery plugin that uses no images</h2>
<ul>
<li>No images used, CSS3 only</li>
<li>the fundraiser only needs to type the goal amount and the curent status,</li>
<li>the script does the rest.</li>
</ul>
<a href="https://github.com/RayHyde/thermometer" class="btn btn-lg btn-success">Download from Github</a>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
<h2>How to use this plugin</h2>
<h3>1. Link the files you need</h3>
<p>Include the jQuery script at the bottom of your page, e.g. through a CDN:</p>
<p><code> <script src="//code.jquery.com/jquery-2.1.3.min.js"></script></code></p>
<p>Then include the minimized version of the script:</p>
<p><code><script src="[path to your script]/jquery.thermometer.min.js"></script></code></p>
<p>Change [path to your script] to where it resides, eg "js".</p>
<h3>2. Create your HTML markup</h3>
<p>This is very simple: create an element that contains the thermometer plus a couple of spans that the plugin uses to get the numbers it needs:</p>
<pre><div id="thermometer">
<span class="current">€ 12.000</span>
<span class="goal">€ 16.000</span>
</div></pre>
<p>That way the text is visible when Javascript is not around and the information stays is legible for screen readers and search engines. Also the amounts can be changed easily in CMS systems like Wordpress.</p>
<h3>3. Add the thermometer.css file to the <head> section of your page</h3>
<h3>4. Call the plugin</h3>
<p>Then initialize the plugin, telling it in which element it needs to run:</p>
<pre>
<script>
$(<containing element here, e.g. "#thermometer">).thermometer();
</script>
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div id="explain">
<p>This project is part of my Playground - a collection of fun (and, <em>ahem</em>, dare I say it: clever) stuff I made in the past, from jQuery games and plugins to CSS animation tricks.</p>
<p>Please drop in on my portfolio site <a href="http://www.rayhyde.nl">www.rayhyde.nl</a>!</p>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="js/jquery.thermometer.js"></script>
<script>
$("#thermometer").thermometer();
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12332810-1");
pageTracker._trackPageview();
} catch (err) {}
</script>
</body>
</html>