Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Counter widget/add on


edwhalley

Question

Site URL: http://biostays.com

Hey Guys 

Need some helping finding a custom little number counter widget, preferably free. I want to have it on selected pages on my site, saying how many acres of rainforest we have saved. And I will manually change the number. Anyone got any ideas or can help? 

Thanks a lot

Ed

Link to post
  • Answers 21
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add Code Block > Paste code Code from https://codepen.io/syedrafeeq/pen/rcfsJ <h1>JQUERY NUMBER ANIMATION</h1> <h3>jQuery counter to count up to a target number</h3&gt

Yes, but I ended up using a slightly different bit of code I think? @IXStudio provided me with a bit of code that included the suffix I needed :-) 

Is there a way to get the counter to start when you scroll past it, instead of when you first land on the page? 

Posted Images

21 answers to this question

Recommended Posts

  • 1

Add Code Block > Paste code

Code from https://codepen.io/syedrafeeq/pen/rcfsJ

<h1>JQUERY NUMBER ANIMATION</h1>
<h3>jQuery counter to count up to a target number</h3>

<div class="wrapper">
    <div class="counter col_fourth">
      <i class="fa fa-code fa-2x"></i>
      <h2 class="timer count-title count-number" data-to="300" data-speed="1500"></h2>
       <p class="count-text ">SomeText GoesHere</p>
    </div>

    <div class="counter col_fourth">
      <i class="fa fa-coffee fa-2x"></i>
      <h2 class="timer count-title count-number" data-to="1700" data-speed="1500"></h2>
      <p class="count-text ">SomeText GoesHere</p>
    </div>

    <div class="counter col_fourth">
      <i class="fa fa-lightbulb-o fa-2x"></i>
      <h2 class="timer count-title count-number" data-to="11900" data-speed="1500"></h2>
      <p class="count-text ">SomeText GoesHere</p>
    </div>

    <div class="counter col_fourth end">
      <i class="fa fa-bug fa-2x"></i>
      <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
      <p class="count-text ">SomeText GoesHere</p>
    </div>
</div>
<style>
  .col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
	position: relative;
	display:inline;
	display: inline-block;
	float: left;
	margin-right: 2%;
	margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */

.wrapper { width: 980px; margin: 30px auto; position: relative;}
.counter { background-color: #ffffff; padding: 20px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  (function ($) {
	$.fn.countTo = function (options) {
		options = options || {};
		
		return $(this).each(function () {
			// set options for current element
			var settings = $.extend({}, $.fn.countTo.defaults, {
				from:            $(this).data('from'),
				to:              $(this).data('to'),
				speed:           $(this).data('speed'),
				refreshInterval: $(this).data('refresh-interval'),
				decimals:        $(this).data('decimals')
			}, options);
			
			// how many times to update the value, and how much to increment the value on each update
			var loops = Math.ceil(settings.speed / settings.refreshInterval),
				increment = (settings.to - settings.from) / loops;
			
			// references & variables that will change with each update
			var self = this,
				$self = $(this),
				loopCount = 0,
				value = settings.from,
				data = $self.data('countTo') || {};
			
			$self.data('countTo', data);
			
			// if an existing interval can be found, clear it first
			if (data.interval) {
				clearInterval(data.interval);
			}
			data.interval = setInterval(updateTimer, settings.refreshInterval);
			
			// initialize the element with the starting value
			render(value);
			
			function updateTimer() {
				value += increment;
				loopCount++;
				
				render(value);
				
				if (typeof(settings.onUpdate) == 'function') {
					settings.onUpdate.call(self, value);
				}
				
				if (loopCount >= loops) {
					// remove the interval
					$self.removeData('countTo');
					clearInterval(data.interval);
					value = settings.to;
					
					if (typeof(settings.onComplete) == 'function') {
						settings.onComplete.call(self, value);
					}
				}
			}
			
			function render(value) {
				var formattedValue = settings.formatter.call(self, value, settings);
				$self.html(formattedValue);
			}
		});
	};
	
	$.fn.countTo.defaults = {
		from: 0,               // the number the element should start at
		to: 0,                 // the number the element should end at
		speed: 1000,           // how long it should take to count between the target numbers
		refreshInterval: 100,  // how often the element should be updated
		decimals: 0,           // the number of decimal places to show
		formatter: formatter,  // handler for formatting the value before rendering
		onUpdate: null,        // callback method for every time the element is updated
		onComplete: null       // callback method for when the element finishes updating
	};
	
	function formatter(value, settings) {
		return value.toFixed(settings.decimals);
	}
}(jQuery));

jQuery(function ($) {
  // custom formatting example
  $('.count-number').data('countToOptions', {
	formatter: function (value, options) {
	  return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
	}
  });
  
  // start all the timers
  $('.timer').each(count);  
  
  function count(options) {
	var $this = $(this);
	options = $.extend({}, options || {}, $this.data('countToOptions') || {});
	$this.countTo(options);
  }
});
</script>

 

Link to post
  • 1
On 7/9/2020 at 2:51 PM, tuanphan said:

Add Code Block > Paste code

Code from https://codepen.io/syedrafeeq/pen/rcfsJ


<h1>JQUERY NUMBER ANIMATION</h1>
<h3>jQuery counter to count up to a target number</h3>

<div class="wrapper">
    <div class="counter col_fourth">
      <i class="fa fa-code fa-2x"></i>
      <h2 class="timer count-title count-number" data-to="300" data-speed="1500"></h2>
       <p class="count-text ">SomeText GoesHere</p>
    </div>

    <div class="counter col_fourth">
      <i class="fa fa-coffee fa-2x"></i>
      <h2 class="timer count-title count-number" data-to="1700" data-speed="1500"></h2>
      <p class="count-text ">SomeText GoesHere</p>
    </div>

    <div class="counter col_fourth">
      <i class="fa fa-lightbulb-o fa-2x"></i>
      <h2 class="timer count-title count-number" data-to="11900" data-speed="1500"></h2>
      <p class="count-text ">SomeText GoesHere</p>
    </div>

    <div class="counter col_fourth end">
      <i class="fa fa-bug fa-2x"></i>
      <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
      <p class="count-text ">SomeText GoesHere</p>
    </div>
</div>
<style>
  .col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
	position: relative;
	display:inline;
	display: inline-block;
	float: left;
	margin-right: 2%;
	margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */

.wrapper { width: 980px; margin: 30px auto; position: relative;}
.counter { background-color: #ffffff; padding: 20px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  (function ($) {
	$.fn.countTo = function (options) {
		options = options || {};
		
		return $(this).each(function () {
			// set options for current element
			var settings = $.extend({}, $.fn.countTo.defaults, {
				from:            $(this).data('from'),
				to:              $(this).data('to'),
				speed:           $(this).data('speed'),
				refreshInterval: $(this).data('refresh-interval'),
				decimals:        $(this).data('decimals')
			}, options);
			
			// how many times to update the value, and how much to increment the value on each update
			var loops = Math.ceil(settings.speed / settings.refreshInterval),
				increment = (settings.to - settings.from) / loops;
			
			// references & variables that will change with each update
			var self = this,
				$self = $(this),
				loopCount = 0,
				value = settings.from,
				data = $self.data('countTo') || {};
			
			$self.data('countTo', data);
			
			// if an existing interval can be found, clear it first
			if (data.interval) {
				clearInterval(data.interval);
			}
			data.interval = setInterval(updateTimer, settings.refreshInterval);
			
			// initialize the element with the starting value
			render(value);
			
			function updateTimer() {
				value += increment;
				loopCount++;
				
				render(value);
				
				if (typeof(settings.onUpdate) == 'function') {
					settings.onUpdate.call(self, value);
				}
				
				if (loopCount >= loops) {
					// remove the interval
					$self.removeData('countTo');
					clearInterval(data.interval);
					value = settings.to;
					
					if (typeof(settings.onComplete) == 'function') {
						settings.onComplete.call(self, value);
					}
				}
			}
			
			function render(value) {
				var formattedValue = settings.formatter.call(self, value, settings);
				$self.html(formattedValue);
			}
		});
	};
	
	$.fn.countTo.defaults = {
		from: 0,               // the number the element should start at
		to: 0,                 // the number the element should end at
		speed: 1000,           // how long it should take to count between the target numbers
		refreshInterval: 100,  // how often the element should be updated
		decimals: 0,           // the number of decimal places to show
		formatter: formatter,  // handler for formatting the value before rendering
		onUpdate: null,        // callback method for every time the element is updated
		onComplete: null       // callback method for when the element finishes updating
	};
	
	function formatter(value, settings) {
		return value.toFixed(settings.decimals);
	}
}(jQuery));

jQuery(function ($) {
  // custom formatting example
  $('.count-number').data('countToOptions', {
	formatter: function (value, options) {
	  return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
	}
  });
  
  // start all the timers
  $('.timer').each(count);  
  
  function count(options) {
	var $this = $(this);
	options = $.extend({}, options || {}, $this.data('countToOptions') || {});
	$this.countTo(options);
  }
});
</script>

 

Hey @tuanphan - is it possible to display a unit immediately next to the animated numbers? Have tried but it always wants to sit directly underneath (the 'kgC02e')

Have made a mockup to show what I mean.

 

 

 

Tuanphan.png

Link to post
  • 1

@MMEbyKiandraTrickett Just want to let you know that I've managed to make it mobile-responsive, or at least; my goal was to have the counters being displayed below one another on mobile 😉  I added this code to the <style> section:

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col_"] {
    width: 100%;
  }
  [class*="wrapper"] {
    width: 50%;
}
  

Hope this helps!

Link to post
  • 0
On 11/25/2020 at 1:40 AM, Webswool said:

Hey @tuanphan - is it possible to display a unit immediately next to the animated numbers? Have tried but it always wants to sit directly underneath (the 'kgC02e')

Have made a mockup to show what I mean.

 

 

 

Tuanphan.png

Have you solved it yet?

Link to post
  • 0

I have the same question as Bmosello - is there a way to have the counter start when you scroll to that section on the page rather than when it loads?

You can't see mine counting down because its lower than the main image - staffrelief.ca

 

Thank you!

Link to post
  • 0
On 3/5/2021 at 4:24 PM, MMEbyKiandraTrickett said:

Was this mobile responsive to people? Mine wasn't.. hmmm

Can you share link to page where you added addon. We can check easier

Link to post
  • 0
30 minutes ago, marcinhurkmans said:

Hi all,

Did you manage to make this mobile responsive? If so, how? Thanks in advance for your help! 😉 

No I haven't - I've been trying to make some tweaks because it's not really responsive at all. So if I can't get it responsive I'll probably remove it cause it's a bit of a turn off!

Link to post
  • 0
11 hours ago, MMEbyKiandraTrickett said:

No I haven't - I've been trying to make some tweaks because it's not really responsive at all. So if I can't get it responsive I'll probably remove it cause it's a bit of a turn off!

OK, thanks anyhow.

 

@tuanphan do you by any chance have an idea how to make this responsive on mobile devices? Appreciate your help, thank you very much 🙂 

Link to post
  • 0
On 12/3/2020 at 4:19 AM, Webswool said:

Yes, but I ended up using a slightly different bit of code I think? @IXStudio provided me with a bit of code that included the suffix I needed 🙂

Can you share the code? I'm actually trying to do the same for my client. Thanks!

Link to post
  • 0
On 7/9/2020 at 6:51 AM, tuanphan said:

Add Code Block > Paste code

Code from https://codepen.io/syedrafeeq/pen/rcfsJ



<h1>JQUERY NUMBER ANIMATION</h1>
<h3>jQuery counter to count up to a target number</h3>

<div class="wrapper">
    <div class="counter col_fourth">
      <i class="fa fa-code fa-2x"></i>
      <h2 class="timer count-title count-number" data-to="300" data-speed="1500"></h2>
       <p class="count-text ">SomeText GoesHere</p>
    </div>

    <div class="counter col_fourth">
      <i class="fa fa-coffee fa-2x"></i>
      <h2 class="timer count-title count-number" data-to="1700" data-speed="1500"></h2>
      <p class="count-text ">SomeText GoesHere</p>
    </div>

    <div class="counter col_fourth">
      <i class="fa fa-lightbulb-o fa-2x"></i>
      <h2 class="timer count-title count-number" data-to="11900" data-speed="1500"></h2>
      <p class="count-text ">SomeText GoesHere</p>
    </div>

    <div class="counter col_fourth end">
      <i class="fa fa-bug fa-2x"></i>
      <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
      <p class="count-text ">SomeText GoesHere</p>
    </div>
</div>
<style>
  .col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
	position: relative;
	display:inline;
	display: inline-block;
	float: left;
	margin-right: 2%;
	margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */

.wrapper { width: 980px; margin: 30px auto; position: relative;}
.counter { background-color: #ffffff; padding: 20px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  (function ($) {
	$.fn.countTo = function (options) {
		options = options || {};
		
		return $(this).each(function () {
			// set options for current element
			var settings = $.extend({}, $.fn.countTo.defaults, {
				from:            $(this).data('from'),
				to:              $(this).data('to'),
				speed:           $(this).data('speed'),
				refreshInterval: $(this).data('refresh-interval'),
				decimals:        $(this).data('decimals')
			}, options);
			
			// how many times to update the value, and how much to increment the value on each update
			var loops = Math.ceil(settings.speed / settings.refreshInterval),
				increment = (settings.to - settings.from) / loops;
			
			// references & variables that will change with each update
			var self = this,
				$self = $(this),
				loopCount = 0,
				value = settings.from,
				data = $self.data('countTo') || {};
			
			$self.data('countTo', data);
			
			// if an existing interval can be found, clear it first
			if (data.interval) {
				clearInterval(data.interval);
			}
			data.interval = setInterval(updateTimer, settings.refreshInterval);
			
			// initialize the element with the starting value
			render(value);
			
			function updateTimer() {
				value += increment;
				loopCount++;
				
				render(value);
				
				if (typeof(settings.onUpdate) == 'function') {
					settings.onUpdate.call(self, value);
				}
				
				if (loopCount >= loops) {
					// remove the interval
					$self.removeData('countTo');
					clearInterval(data.interval);
					value = settings.to;
					
					if (typeof(settings.onComplete) == 'function') {
						settings.onComplete.call(self, value);
					}
				}
			}
			
			function render(value) {
				var formattedValue = settings.formatter.call(self, value, settings);
				$self.html(formattedValue);
			}
		});
	};
	
	$.fn.countTo.defaults = {
		from: 0,               // the number the element should start at
		to: 0,                 // the number the element should end at
		speed: 1000,           // how long it should take to count between the target numbers
		refreshInterval: 100,  // how often the element should be updated
		decimals: 0,           // the number of decimal places to show
		formatter: formatter,  // handler for formatting the value before rendering
		onUpdate: null,        // callback method for every time the element is updated
		onComplete: null       // callback method for when the element finishes updating
	};
	
	function formatter(value, settings) {
		return value.toFixed(settings.decimals);
	}
}(jQuery));

jQuery(function ($) {
  // custom formatting example
  $('.count-number').data('countToOptions', {
	formatter: function (value, options) {
	  return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
	}
  });
  
  // start all the timers
  $('.timer').each(count);  
  
  function count(options) {
	var $this = $(this);
	options = $.extend({}, options || {}, $this.data('countToOptions') || {});
	$this.countTo(options);
  }
});
</script>

 

Thank you for this! Is there a way to edit the numbers so that each #/unit group appears on its own single line? I'm also trying to figure out how to make these bigger in size but I'm a designer not a coder, and I've tried tweaking them to no avail.

I also had the same concern as @Bmosello and @taylorlaidlaw -- hoping to find a solution so that the numbers start counting as you scroll down, so that you can actually see the numbers animate!

In the below code, the data number is entered as "2.4" but shows up as "2" in the counter. Is there a workaround for this?

      <h2 class="timer count-title count-number" data-to="2.4" data-speed="900"></h2> 

Any help would be greatly appreciated, thanks so much!

Screen Shot 2021-03-18 at 5.28.24 PM.png

Edited by aadmint2021
Forgot to add another question and image
Link to post
  • 0
9 hours ago, aadmint2021 said:

Can you share the code? I'm actually trying to do the same for my client. Thanks!

Hey @aadmint2021

I used the following code in my Footer Injection:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

<script>
var eventFired = false,
    objectPositionTop = $('section[data-section-id="5fbc069d82d4af71faa5c888"]').offset().top;

$(window).on('scroll', function() {

 var currentPosition = $(document).scrollTop();
 if (currentPosition > objectPositionTop && eventFired === false) {
   eventFired = true;
  


// Animate the element's value from 0% to 110%:
jQuery({someValue: 0}).animate({someValue: 670500}, {
	duration: 10000,
	easing:'swing', // can be anything
	step: function() { // called on every step
		// Update the element's text with rounded-up value:
		$('section[data-section-id="5f4cc944f0feca27412aafdc"] h1').text(Math.ceil(this.someValue) + ' ' + ' kg CO2e');
	}
});






 }

});
</script>

Switch out the section ID for the section you're working with, and you should be able to switch h1 out for whatever size of text you're using and the 'kg CO2e' out for whatever units you need.

This code doesn't require a code block on the actual section you're using it on - it'll automatically make the h1 (or whatever size you change it to) behave like an counter

Hope that makes sense? If not, just holla.

Link to post
  • 0
On 3/16/2021 at 4:47 PM, marcinhurkmans said:

OK, thanks anyhow.

 

@tuanphan do you by any chance have an idea how to make this responsive on mobile devices? Appreciate your help, thank you very much 🙂 

Can you share link to page where you added the code? We can check easier

Link to post
  • 0
On 3/22/2021 at 8:47 AM, tuanphan said:

Can you share link to page where you added the code? We can check easier

Hi Tuan,

I've sent you an email through your form 😉 Thank you in advance!

Cheers, Marcin

Link to post
  • 0
On 3/23/2021 at 10:07 PM, marcinhurkmans said:

Hi Tuan,

I've sent you an email through your form 😉 Thank you in advance!

Cheers, Marcin

Share when you get it!

I'll have to remove the feature if I don't figure it out. Launching next week and it looks so bad on mobile

Link to post
  • 0
On 3/23/2021 at 6:07 PM, marcinhurkmans said:

Hi Tuan,

I've sent you an email through your form 😉 Thank you in advance!

Cheers, Marcin

Sent code to your email.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...