├── LICENSE.txt
├── README.md
├── jQMeter.jquery.json
├── jqmeter.js
└── jqmeter.min.js


/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright Gerardo Larios http://www.gerardolarios.com
 2 | This software consists of voluntary contributions made by the developer. For exact contribution history, see the revision history
 3 | available at https://github.com/glarios/jQMeter
 4 | The following license applies to all parts of jQMeter except as
 5 | documented below:
 6 | ====
 7 | Permission is hereby granted, free of charge, to any person obtaining
 8 | a copy of this software and associated documentation files (the
 9 | "Software"), to deal in the Software without restriction, including
10 | without limitation the rights to use, copy, modify, merge, publish,
11 | distribute, sublicense, and/or sell copies of the Software, and to
12 | permit persons to whom the Software is furnished to do so, subject to
13 | the following conditions:
14 | The above copyright notice and this permission notice shall be
15 | included in all copies or substantial portions of the Software.
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
23 | ====
24 | Copyright and related rights for sample code are waived via CC0. Sample
25 | code is defined as all source code displayed within the README.
26 | CC0: http://creativecommons.org/publicdomain/zero/1.0/
27 | ====
28 | All files located in the node_modules and external directories are
29 | externally maintained libraries used by this software which have their
30 | own licenses; we recommend you read them, as their terms may differ from
31 | the terms above.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1>jQMeter</h1>
 2 | <p>jQMeter is a simple, light-weight jQuery plugin that allows you to display an animated horizontal or vertical progress meter. Just pass in the goal and amount raised or completed, and the rest is optional.</p>
 3 | <p>It has a simple design out-of-the-box, but this is on purpose so that you can customize the look to match your needs. You can pass several formatting options including width, height, background bar color, bar color, etc. You can also choose to display the percentage completed or not, as well as control the animation speed.</p>
 4 | <p>All you need to do is include the plugin file into your webpage, create a target wrapper element, and pass that element's id into the <code>jQMeter</code> method.</p>
 5 | <h2>Demo</h2>
 6 | <a href="http://www.gerardolarios.com/plugins-and-tools/jqmeter#demo" target="_blank">View demo</a>
 7 | 
 8 | <h2>Required Files</h2>
 9 | <ol>
10 |   <li><a href="http://www.jquery.com/" target="_blank">jQuery Core JavaScript Library</a></li>
11 |   <li><a href="http://www.gerardolarios.com/plugins-and-tools/jqmeter/js/jqmeter.min.js" target="_blank">jqmeter.min.js</a></li>
12 | </ol>
13 | <p>Include the above files into your webpage and invoke the <code>jQMeter()</code> method.</p>
14 | <p>You can add your own CSS to style the progress meter to fit your needs.</p>
15 | 
16 | <h2>How to Use</h2>
17 | <p>Create an empty wrapper element, in this case a <code>&lt;div&gt;</code>, and assign a unique id or class to it. Then pass that id into the <code>jQMeter()</code> method.</p>
18 | <pre><code>
19 | &lt;div id="jqmeter-container">&lt;/div>
20 | &lt;script type="text/javascript">
21 | $(document).ready(function(){
22 |     $('#jqmeter-container').jQMeter();
23 | });
24 | &lt;/script>
25 | </code></pre>
26 | 
27 | <h2>Configuration</h2>
28 | 		<p>jQMeter is pretty much ready to go, and the only necessary parameters to get started are the <code>goal</code> and <code>raised</code> values. It also has several options for customization. Some of these customizations can also be achieved with CSS such as colors, etc. Pass these options as an object into the <code>jQMeter()</code> method like this:</p>
29 | <pre><code>$('#jqmeter-container').jQMeter({
30 |     goal:'$1,000',
31 |     raised:'$200',
32 |     meterOrientation:'vertical',
33 |     width:'50px',
34 |     height:'200px'
35 | });</code>
36 | </pre>
37 | 
38 | <h2>Options</h2>
39 | | Property      | Type          | Default  | Description |
40 | | ------------- |:-------------:| -------- | ----------- |
41 | | goal      | string | <strong>No default, must be set as option.</strong> |The goal of the meter. Can take strings like "$9,000" or integers like "9000".|
42 | | raised      | string      |   <strong>No default, must be set as option.</strong> |The goal of the meter. Can take strings like "$9,000" or integers like "9000".|
43 | | width | string      |    100% - for horizontal<br /><strong>(Must be set for vertical)</strong> |Set the width of the progress meter. You can pass percentages or pixel based values.|
44 | |height|string|50px - for horizontal<br /><strong>(Must be set for vertical)</strong>|Set the height of the progress meter. You can pass percentages or pixel based values.|
45 | |bgColor|string|#444|Supports hex, rgba, or word values.|
46 | |barColor|string|#bfd255|Supports hex, rgba, or word values.|
47 | |meterOrientation|string|horizontal|meterOrientation: 'horizontal' or 'vertical'. If set to 'vertical', width and height need to be specified.|
48 | |displayTotal|boolean|true|Whether to display the percentage completed or raised.|
49 | |animationSpeed|integer|2000|Animation time in milliseconds.|
50 | |counterSpeed|integer|2000|Counter animation time in milliseconds.|
51 | 
52 | <h2>License</h2>
53 | 
54 | <p>jQMeter is free to use under the <a href="http://jquery.org/license" target="_blank">MIT/GPL</a> license for any application.
55 | <div class="clear"></div>
56 | <h2>Author</h2>
57 | <p>This plugin was written by <a href="http://www.gerardolarios.com" target="_blank">Gerardo Larios</a>.</p>
58 | 


--------------------------------------------------------------------------------
/jQMeter.jquery.json:
--------------------------------------------------------------------------------
 1 | {
 2 | "name": "jQMeter",
 3 | "title": "jQMeter - Thermometer Plugin",
 4 | "description": "jQuery plugin that allows you to display an animated horizontal or vertical progress meter.",
 5 | "keywords": [
 6 | "progress",
 7 | "animation",
 8 | "thermometer",
 9 | "progress-meter",
10 | "progress-thermometer",
11 |  "meter"
12 | ],
13 | "version": "0.1.2",
14 | "author": {
15 | "name": "Gerardo Larios",
16 | "url": "http://gerardolarios.com/plugins-and-tools/jqmeter/"
17 | },
18 | "maintainers": [
19 | {
20 | "name": "Gerardo Larios",
21 | "email": "gerardo@gerardolarios.com",
22 | "url": "http://gerardolarios.com"
23 | }
24 | ],
25 | "licenses": [
26 | {
27 | "type": "MIT",
28 | "url": "https://github.com/glarios/jQMeter/blob/master/LICENSE.txt"
29 | }
30 | ],
31 | "bugs": "https://github.com/glarios/jQMeter/issues",
32 | "homepage": "http://gerardolarios.com/plugins-and-tools/jqmeter/",
33 | "docs": "http://gerardolarios.com/plugins-and-tools/jqmeter/",
34 | "download": "http://gerardolarios.com/plugins-and-tools/jqmeter/",
35 | "dependencies": {
36 | "jquery": ">=1.5"
37 | }
38 | }


--------------------------------------------------------------------------------
/jqmeter.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 | Title:		jQMeter: a jQuery Progress Meter Plugin
  4 | Author:		Gerardo Larios
  5 | Version:	0.1.2
  6 | Website:	http://www.gerardolarios.com/plugins-and-tools/jqmeter
  7 | License: 	Dual licensed under the MIT and GPL licenses.
  8 | 
  9 | */
 10 | 
 11 | (function($) {
 12 | 
 13 | 	//Extend the jQuery prototype
 14 |     $.fn.extend({
 15 |         jQMeter: function(options) {
 16 |             if (options && typeof(options) == 'object') {
 17 |                 options = $.extend( {}, $.jQMeter.defaults, options );
 18 |             }
 19 |             this.each(function() {
 20 |                 new $.jQMeter(this, options);
 21 |             });
 22 |             return;
 23 |         }
 24 |     });
 25 | 
 26 | 	$.jQMeter = function(elem, options) {
 27 | 		//Define plugin options
 28 | 		goal = parseInt((options.goal).replace(/\D/g,''));
 29 | 		raised = parseInt((options.raised).replace(/\D/g,''));
 30 | 		width = options.width;
 31 | 		height = options.height;
 32 | 		bgColor = options.bgColor;
 33 | 		barColor = options.barColor;
 34 | 		meterOrientation = options.meterOrientation;
 35 | 		animationSpeed = options.animationSpeed;
 36 | 		counterSpeed = options.counterSpeed;
 37 | 		displayTotal = options.displayTotal;
 38 | 		total = (raised / goal) * 100;
 39 | 
 40 | 		/*
 41 | 		 * Since the thermometer width/height is set based off of
 42 | 		 * the total, we force the total to 100% if the goal has
 43 | 		 * been exceeded.
 44 | 		 */
 45 | 		if(total >= 100) {
 46 | 			total = 100;
 47 | 		}
 48 | 
 49 | 		//Create the thermometer layout based on orientation option
 50 | 		if(meterOrientation == 'vertical') {
 51 | 
 52 | 			$(elem).html('<div class="therm outer-therm vertical"><div class="therm inner-therm vertical"><span style="display:none;">' + total + '</span></div></div>');
 53 | 			$(elem).children('.outer-therm').attr('style','width:' + width + ';height:' + height + ';background-color:' + bgColor);
 54 | 			$(elem).children('.outer-therm').children('.inner-therm').attr('style','background-color:' + barColor + ';height:0;width:100%');
 55 | 			$(elem).children('.outer-therm').children('.inner-therm').animate({height : total + '%'},animationSpeed);
 56 | 
 57 | 		} else {
 58 | 
 59 | 			$(elem).html('<div class="therm outer-therm"><div class="therm inner-therm"><span style="display:none;">' + total + '</span></div></div>');
 60 | 			$(elem).children('.outer-therm').attr('style','width:' + width + ';height:' + height + ';background-color:' + bgColor);
 61 | 			$(elem).children('.outer-therm').children('.inner-therm').attr('style','background-color:' + barColor + ';height:' + height + ';width:0');
 62 | 			$(elem).children('.outer-therm').children('.inner-therm').animate({width : total + '%'},animationSpeed);
 63 | 
 64 | 		}
 65 | 
 66 | 		//If the user wants the total percentage to be displayed in the thermometer
 67 | 		if(displayTotal) {
 68 | 
 69 | 			//Accomodate the padding of the thermometer to include the total percentage text
 70 | 			var formatted_height = parseInt(height);
 71 | 			var padding = (formatted_height/2) - 13 + 'px 10px';
 72 | 
 73 | 			if(meterOrientation != 'horizontal'){
 74 | 			  padding = '10px 0';
 75 | 			}
 76 | 
 77 | 			$(elem).children('.outer-therm').children('.inner-therm').children().show();
 78 | 			$(elem).children('.outer-therm').children('.inner-therm').children().css('padding', padding);
 79 | 
 80 | 			//Animate the percentage total. Borrowed from: http://stackoverflow.com/questions/23006516/jquery-animated-number-counter-from-zero-to-value
 81 | 			$({ Counter: 0 }).animate({ Counter: $(elem).children('.outer-therm').children('.inner-therm').children().text() }, {
 82 |   				duration : counterSpeed,
 83 |   				easing : 'swing',
 84 |   				step : function() {
 85 |    					$(elem).children('.outer-therm').children('.inner-therm').children().text(Math.ceil(this.Counter) + '%');
 86 |   				}
 87 | 			});
 88 | 		}
 89 | 
 90 | 		//Add CSS
 91 | 		$(elem).append('<style>.therm{height:30px;border-radius:5px;}.outer-therm{margin:20px 0;}.inner-therm span {color: #fff;display: inline-block;float: right;font-family: Trebuchet MS;font-size: 20px;font-weight: bold;}.vertical.inner-therm span{width:100%;text-align:center;}.vertical.outer-therm{position:relative;}.vertical.inner-therm{position:absolute;bottom:0;}</style>');
 92 | 
 93 | 	};
 94 | 
 95 | 	//Set plugin defaults
 96 | 	$.jQMeter.defaults = {
 97 | 
 98 | 		width : '100%',
 99 | 		height : '50px',
100 | 		bgColor : '#444',
101 | 		barColor : '#bfd255',
102 | 		meterOrientation : 'horizontal',
103 | 		animationSpeed : 2000,
104 | 		counterSpeed : 2000,
105 | 		displayTotal : true
106 | 
107 | 	};
108 | 
109 | })(jQuery);


--------------------------------------------------------------------------------
/jqmeter.min.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 
 3 | Title:		jQMeter: a jQuery Progress Meter Plugin
 4 | Author:		Gerardo Larios
 5 | Version:	0.1.2
 6 | Website:	http://www.gerardolarios.com/plugins-and-tools/jqmeter
 7 | License: 	Dual licensed under the MIT and GPL licenses.
 8 | 
 9 | */
10 | 
11 | !function(e){e.fn.extend({jQMeter:function(t){t&&"object"==typeof t&&(t=e.extend({},e.jQMeter.defaults,t)),this.each(function(){new e.jQMeter(this,t)})}}),e.jQMeter=function(t,r){if(goal=parseInt(r.goal.replace(/\D/g,"")),raised=parseInt(r.raised.replace(/\D/g,"")),width=r.width,height=r.height,bgColor=r.bgColor,barColor=r.barColor,meterOrientation=r.meterOrientation,animationSpeed=r.animationSpeed,counterSpeed=r.counterSpeed,displayTotal=r.displayTotal,total=raised/goal*100,total>=100&&(total=100),"vertical"==meterOrientation?(e(t).html('<div class="therm outer-therm vertical"><div class="therm inner-therm vertical"><span style="display:none;">'+total+"</span></div></div>"),e(t).children(".outer-therm").attr("style","width:"+width+";height:"+height+";background-color:"+bgColor),e(t).children(".outer-therm").children(".inner-therm").attr("style","background-color:"+barColor+";height:0;width:"+width),e(t).children(".outer-therm").children(".inner-therm").animate({height:total+"%"},animationSpeed)):(e(t).html('<div class="therm outer-therm"><div class="therm inner-therm"><span style="display:none;">'+total+"</span></div></div>"),e(t).children(".outer-therm").attr("style","width:"+width+";height:"+height+";background-color:"+bgColor),e(t).children(".outer-therm").children(".inner-therm").attr("style","background-color:"+barColor+";height:"+height+";width:0"),e(t).children(".outer-therm").children(".inner-therm").animate({width:total+"%"},animationSpeed)),displayTotal){var i=parseInt(height),n=i/2-13+"px 10px";"horizontal"!=meterOrientation&&(n="10px 0"),e(t).children(".outer-therm").children(".inner-therm").children().show(),e(t).children(".outer-therm").children(".inner-therm").children().css("padding",n),e({Counter:0}).animate({Counter:e(t).children(".outer-therm").children(".inner-therm").children().text()},{duration:counterSpeed,easing:"swing",step:function(){e(t).children(".outer-therm").children(".inner-therm").children().text(Math.ceil(this.Counter)+"%")}})}e(t).append("<style>.therm{height:30px;border-radius:5px;}.outer-therm{margin:20px 0;}.inner-therm span {color: #fff;display: inline-block;float: right;font-family: Trebuchet MS;font-size: 20px;font-weight: bold;}.vertical.inner-therm span{width:100%;text-align:center;}.vertical.outer-therm{position:relative;}.vertical.inner-therm{position:absolute;bottom:0;}</style>")},e.jQMeter.defaults={width:"100%",height:"50px",bgColor:"#444",barColor:"#bfd255",meterOrientation:"horizontal",animationSpeed:2e3,counterSpeed:2e3,displayTotal:!0}}(jQuery);


--------------------------------------------------------------------------------