Counter widget/add on

Hi folks, have found this thread super helpful (thanks everyone who has contributed!) but cannot figure out how to make this counter responsive on mobile! Is someone able to share their code that has worked please? Thanks in advance!

17 hours ago, rachelquagliani said:

Hi folks, have found this thread super helpful (thanks everyone who has contributed!) but cannot figure out how to make this counter responsive on mobile! Is someone able to share their code that has worked please? Thanks in advance!

What code are you using? on what website I got it to work on mobile.

9 hours ago, captbdel12 said:

What code are you using? on what website I got it to work on mobile.

Thanks for your response @captbdel12 , I only just saw it. I was troubleshooting earlier & managed to find the fix that worked for my site but thank you all the same. The chunk I added to the style section, for anyone who may need it:

  @media only screen and (max-width: 861px) {
  /* For mobile phones: */
  [class*="col_"] {
    width: 100% !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  [class*="wrapper"] {
    width: 100%;
}}

2 hours ago, rachelquagliani said:

Thanks for your response @captbdel12 , I only just saw it. I was troubleshooting earlier & managed to find the fix that worked for my site but thank you all the same. The chunk I added to the style section, for anyone who may need it:

  @media only screen and (max-width: 861px) {
  /* For mobile phones: */
  [class*="col_"] {
    width: 100% !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  [class*="wrapper"] {
    width: 100%;
}}

Hi, ok that's great can we see a photo or link to website to see it working. 🙂 

Hello,

I implement this code in my websie and the number counter works. I still have a problem that is the counter only triggers when I enter or refresh the page. How can I make change to the code so the counter would trigger when I scroll to the dedicated section?

Thanks a lot for your help!

Vinh

On 7/9/2020 at 3: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>

 

On 3/19/2021 at 6:03 AM, Webswool said:

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.

Hi @Webswool Did you by chance have a mobile version for this too?

15 hours ago, kelli_carley said:

Hi @Webswool Did you by chance have a mobile version for this too?

What problem on mobile? If you describe it + share url, we can take a look

@aadmint2021 @Bmosello @taylorlaidlaw were any of you able to make it so that the counter starts when you scroll to that section instead of upon page load? @taylorlaidlaw I took a peek at the site you linked to and it looks like you did. If you are able to share the solution, I'd greatly appreciate it as I too am stuck with the same challenge 🙂

Way to add a counter that references the number of entries on a form, or the number of entries in the google form it populates?

6 minutes ago, NonprofitWebManager said:

Way to add a counter that references the number of entries on a form, or the number of entries in the google form it populates?

Perhaps. Please see the following. It is not a solution but a general guide on potentially solving the issue.

Hello is there a way to add a "+" symbol after the number like in this screenshot example?

Here is the page https://odysseysafaris.squarespace.com/counter password: design

Thank you so much for any assistance.

1 minute ago, izza.weihaas said:

is there a way to add a "+" symbol after the number

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

21 hours ago, creedon said:

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Hi @creedon, I mentioned the URL above but here is it again just in case, thanks!

Here is the page https://odysseysafaris.squarespace.com/counter 
password: design

42 minutes ago, izza.weihaas said:

I mentioned the URL above but here is it again just in case

My bad. Not sure how I missed it! 🙂

Add the following to Design > Custom CSS.

.count-number::after {

  content : '+';
  
  }

Let us know how it goes.

@creedonWOW!! That was so easy, thank you so much!

On 12/2/2022 at 6:08 PM, creedon said:

My bad. Not sure how I missed it! 🙂

Add the following to Design > Custom CSS.

.count-number::after {

  content : '+';
  
  }

Let us know how it goes.

Hey, so I've tried this, it works but I have 2 questions:

- What if I want some of the counters to have a % after them and some have a +?

- How do I make it so that it only begins the count when someone scrolls passed the block?

Here's the page it's currently just being experimented with on: (link removed)

Thank you!

On 2/5/2023 at 10:29 AM, Yaniv said:

What if I want some of the counters to have a % after them and some have a +?

Here is example CSS.

.wrapper .counter:nth-child( 2 ) .count-number::after {

  content : '%';
  
  }

The .counter:nth-child( 2 ) is the key. Change the number to address th nth element that you want to change. You can duplicate the code to address as many elements as you want.

Quote

How do I make it so that it only begins the count when someone scrolls passed the block?

This may be close to what you want.

First update your JQuery to the latest.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Install twcsl. It has a method called isElementInViewport which my following code uses.

Comment out the following line in the counter code.

// $('.timer').each(count); 

After the count function add the following code.

  const selector = '#block-yui_3_17_2_1_1675615286425_24246';
  
  const $element = $( selector );
  
  $( window ).scroll ( function ( ) {
  
    const elementInView = twcsl.isElementInViewport ( $element );
    
    if ( ! elementInView ) return; // bail if element not in view
    
    $( '.timer', $element ).each ( count );
    
    $( this ).off ( 'scroll' );
    
    } )
    
    .scroll ( );
    

The following image shows the new code placement within the existing code.

Let us know how it goes.

@creedon Thank you so much - it worked! 🙂

Mobile Question: Is there a way to have only one section displayed at a time (similar to a carousel) on mobile that animates instead of it stacking under each other? 

Is there a way to make the speed variable? So that it speeds and slows down at the beginning and end?

@creedon I followed the steps to the question you answered "How do I make it so that it only begins the count when someone scrolls passed the block?" but it deletes the numbers? how can i fix this? 

2 hours ago, rrealty said:

I followed the steps to the question you answered "How do I make it so that it only begins the count when someone scrolls passed the block?" but it deletes the numbers? how can i fix this?

We can't see what's happening on your site.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

@creedon  would this work? https://lettuce-lily-7a9y.squarespace.com/home PW: realty23

5 hours ago, rrealty said:

I followed the steps to the question you answered "How do I make it so that it only begins the count when someone scrolls passed the block?"

how can i fix this? 

The issue is that you are using a block ID that does not exist on that page.

const selector = '#block-yui_3_17_2_1_1675615286425_24246';

You probably want the following.

const selector = '#block-yui_3_17_2_1_1685556598227_24712';

Quote

but it deletes the numbers?

My code has nothing to do with manipulating the numbers. It's only task is to start the effect when it scrolls into view.

13 hours ago, creedon said:

The issue is that you are using a block ID that does not exist on that page.

const selector = '#block-yui_3_17_2_1_1675615286425_24246';

You probably want the following.

const selector = '#block-yui_3_17_2_1_1685556598227_24712';

 

My code has nothing to do with manipulating the numbers. It's only task is to start the effect when it scrolls into view.

 

Thank you, i have switched it out to the new one but when i "preview in safe mode" the numbers still don't show up. When i first used the code for the counter the example numbers would show, then i added the effect for it to start when scrolling and when I did, the #'s disappeared. Is there something I messed up within the code that removed the numbers?