rachelquagliani Posted January 17, 2022 Share Posted January 17, 2022 (edited) 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! Edited January 17, 2022 by rachelquagliani gingershermanllc 1 Link to comment
captbdel12 Posted January 17, 2022 Share Posted January 17, 2022 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. rachelquagliani 1 Link to comment
rachelquagliani Posted January 18, 2022 Share Posted January 18, 2022 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%; }} Link to comment
captbdel12 Posted January 18, 2022 Share Posted January 18, 2022 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. 🙂 Link to comment
Guest Posted June 5, 2022 Share Posted June 5, 2022 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> Link to comment
kelli_carley Posted June 15, 2022 Share Posted June 15, 2022 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? Link to comment
tuanphan Posted June 16, 2022 Share Posted June 16, 2022 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
thesoulfulentrepreneur Posted November 9, 2022 Share Posted November 9, 2022 @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 🙂 Link to comment
NonprofitWebManager Posted November 12, 2022 Share Posted November 12, 2022 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? Link to comment
creedon Posted November 12, 2022 Share Posted November 12, 2022 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Izza Posted December 2, 2022 Share Posted December 2, 2022 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. Link to comment
creedon Posted December 2, 2022 Share Posted December 2, 2022 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Izza Posted December 2, 2022 Share Posted December 2, 2022 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 Link to comment
creedon Posted December 2, 2022 Share Posted December 2, 2022 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. captbdel12 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Izza Posted December 2, 2022 Share Posted December 2, 2022 @creedonWOW!! That was so easy, thank you so much! creedon 1 Link to comment
Yaniv Posted February 5, 2023 Share Posted February 5, 2023 (edited) 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! Edited February 12, 2023 by Yaniv link removed Link to comment
creedon Posted February 5, 2023 Share Posted February 5, 2023 (edited) 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. Edited February 11, 2023 by creedon Yaniv 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Yaniv Posted February 11, 2023 Share Posted February 11, 2023 @creedon Thank you so much - it worked! 🙂 creedon 1 Link to comment
alicia Posted February 20, 2023 Share Posted February 20, 2023 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? Link to comment
Klintholm Posted March 1, 2023 Share Posted March 1, 2023 Is there a way to make the speed variable? So that it speeds and slows down at the beginning and end? gingershermanllc 1 Link to comment
rrealty Posted May 31, 2023 Share Posted May 31, 2023 @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? Link to comment
creedon Posted May 31, 2023 Share Posted May 31, 2023 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
rrealty Posted May 31, 2023 Share Posted May 31, 2023 @creedon would this work? https://lettuce-lily-7a9y.squarespace.com/home PW: realty23 Link to comment
creedon Posted June 1, 2023 Share Posted June 1, 2023 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
rrealty Posted June 1, 2023 Share Posted June 1, 2023 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? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment