hawaiiestatetours Posted December 29, 2020 Share Posted December 29, 2020 Site URL: http://www.hetproductions.com I am trying to find a way to Add animated numbers that count up to my website. I would like it to be similar to this website https://desiremedia.com.au/ Does anyone know a way to do this for the number on my site? Thanks Link to comment
Sienawalker Posted December 29, 2020 Share Posted December 29, 2020 It looks like there is a plugin here that supports what you are looking for - https://elfsight.com/number-counter-widget/squarespace/ I have not used this specific plugin, but everything I have used from elfsight has worked exceptionally well. Many of their widgets are free up to a certain number of page views, or relatively inexpensive if you pay. Good luck! Link to comment
hawaiiestatetours Posted December 29, 2020 Author Share Posted December 29, 2020 I found that in my searching before. I'm looking for something free and easy to use. I spoke with someone from ghostplugins.com and they said they are in the process of creating one now and should have it ready by next week. Link to comment
tazmeah Posted December 30, 2020 Share Posted December 30, 2020 How about this? I have it set to animate for 2 seconds, but you can change that. <script> // how many seconds do you want it to animate? var animateSeconds = 2; /* Do Not Edit Below Here */ function isInViewport(elem) { var bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; whenReady = function (readyFunc, actionFunc, options) { if (readyFunc()) { actionFunc.apply(this); } else { if (!options) options = {}; if (!options.current) options.current = 0; if (!options.max) options.max = 60000; if (!options.interval) options.interval = 500; if (options.current < options.max) { setTimeout(function () { options.current += options.interval; whenReady(readyFunc, actionFunc, options); }, options.interval); } else if (options.ontimeout) { options.ontimeout(); } } return true; }; whenReady( function () { return document.querySelectorAll("#block-yui_3_17_2_1_1608660323376_12967").length; }, function () { // var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_8180"); var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967"); // save first number var projects = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967 h1"); var projectsNum = +projects.textContent; // save second number var clients = document.querySelector("#block-yui_3_17_2_1_1608660323376_14050 h1"); var clientsNum = +clients.textContent; // save third number var ongoing = document.querySelector("#block-yui_3_17_2_1_1608660323376_16106 h1"); var ongoingNum = +ongoing.textContent; // set all numbers to zero projects.textContent = clients.textContent = ongoing.textContent = 0; function animateNumbers() { if (isInViewport(spacerBar) && !window.numbersAnimated) { // animate the numbers back to their original. over X seconds. var curProjects = 0, curClients = 0, curOngoing = 0; var animating = setInterval(function(){ curProjects += projectsNum / (animateSeconds * 100); curClients += clientsNum / (animateSeconds * 100); curOngoing += ongoingNum / (animateSeconds * 100); projects.textContent = Math.floor(curProjects); clients.textContent = Math.floor(curClients); ongoing.textContent = Math.floor(curOngoing); }, 10); window.numbersAnimated = true; // turn off the interval after X seconds setTimeout(function(){ clearInterval(animating); // set the numbers to their original projects.textContent = projectsNum; clients.textContent = clientsNum; ongoing.textContent = ongoingNum; }, animateSeconds * 1000); } } // if page loads and numbers are visible animateNumbers(); // when scrolling window.addEventListener('scroll', animateNumbers); }, // action function { //this is only necessary if you need to do something on timeout. ontimeout: function () { console.log('*** Timing out ***'); } } //ontimeout // action function ); // whenReady </script> Screen Recording 2020-12-30 at 5.21.10 AM.mov hawaiiestatetours and Jeremyn 1 1 Link to comment
Elfsight Posted December 30, 2020 Share Posted December 30, 2020 Hi! @Sienawalker Thanks for recommending us!!! We're happy you like our service. 😊@hawaiiestatetours If you're still interested, try our Free Lite plan, it's fully-featured and has no limitation in time. Contact our Support Team and we'll be glad to find a solution for your needs! Regards, Elfsight Link to comment
hawaiiestatetours Posted December 30, 2020 Author Share Posted December 30, 2020 12 hours ago, tazmeah said: How about this? I have it set to animate for 2 seconds, but you can change that. <script> // how many seconds do you want it to animate? var animateSeconds = 2; /* Do Not Edit Below Here */ function isInViewport(elem) { var bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; whenReady = function (readyFunc, actionFunc, options) { if (readyFunc()) { actionFunc.apply(this); } else { if (!options) options = {}; if (!options.current) options.current = 0; if (!options.max) options.max = 60000; if (!options.interval) options.interval = 500; if (options.current < options.max) { setTimeout(function () { options.current += options.interval; whenReady(readyFunc, actionFunc, options); }, options.interval); } else if (options.ontimeout) { options.ontimeout(); } } return true; }; whenReady( function () { return document.querySelectorAll("#block-yui_3_17_2_1_1608660323376_12967").length; }, function () { // var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_8180"); var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967"); // save first number var projects = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967 h1"); var projectsNum = +projects.textContent; // save second number var clients = document.querySelector("#block-yui_3_17_2_1_1608660323376_14050 h1"); var clientsNum = +clients.textContent; // save third number var ongoing = document.querySelector("#block-yui_3_17_2_1_1608660323376_16106 h1"); var ongoingNum = +ongoing.textContent; // set all numbers to zero projects.textContent = clients.textContent = ongoing.textContent = 0; function animateNumbers() { if (isInViewport(spacerBar) && !window.numbersAnimated) { // animate the numbers back to their original. over X seconds. var curProjects = 0, curClients = 0, curOngoing = 0; var animating = setInterval(function(){ curProjects += projectsNum / (animateSeconds * 100); curClients += clientsNum / (animateSeconds * 100); curOngoing += ongoingNum / (animateSeconds * 100); projects.textContent = Math.floor(curProjects); clients.textContent = Math.floor(curClients); ongoing.textContent = Math.floor(curOngoing); }, 10); window.numbersAnimated = true; // turn off the interval after X seconds setTimeout(function(){ clearInterval(animating); // set the numbers to their original projects.textContent = projectsNum; clients.textContent = clientsNum; ongoing.textContent = ongoingNum; }, animateSeconds * 1000); } } // if page loads and numbers are visible animateNumbers(); // when scrolling window.addEventListener('scroll', animateNumbers); }, // action function { //this is only necessary if you need to do something on timeout. ontimeout: function () { console.log('*** Timing out ***'); } } //ontimeout // action function ); // whenReady </script> Screen Recording 2020-12-30 at 5.21.10 AM.mov Looks perfect in the video you sent, but when I tried adding it, it shows a Syntax error on line 1. Link to comment
tazmeah Posted December 31, 2020 Share Posted December 31, 2020 sorry. If you're using it as Code Injection, remove the first and last lines. Thanks. Link to comment
hawaiiestatetours Posted December 31, 2020 Author Share Posted December 31, 2020 16 hours ago, tazmeah said: sorry. If you're using it as Code Injection, remove the first and last lines. Thanks. Got it to work by adding the code into the header. You are the man! searched everywhere online and you are the only one that knew what to do. Really appreciate it. tazmeah 1 Link to comment
Redemption Posted January 20, 2021 Share Posted January 20, 2021 I tried the code you provided and it's living the box with "script disabled". I added a code block, placed it there and no luck. Any suggestions? Link to comment
Redemption Posted January 20, 2021 Share Posted January 20, 2021 On 12/30/2020 at 3:23 AM, tazmeah said: How about this? I have it set to animate for 2 seconds, but you can change that. <script> // how many seconds do you want it to animate? var animateSeconds = 2; /* Do Not Edit Below Here */ function isInViewport(elem) { var bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; whenReady = function (readyFunc, actionFunc, options) { if (readyFunc()) { actionFunc.apply(this); } else { if (!options) options = {}; if (!options.current) options.current = 0; if (!options.max) options.max = 60000; if (!options.interval) options.interval = 500; if (options.current < options.max) { setTimeout(function () { options.current += options.interval; whenReady(readyFunc, actionFunc, options); }, options.interval); } else if (options.ontimeout) { options.ontimeout(); } } return true; }; whenReady( function () { return document.querySelectorAll("#block-yui_3_17_2_1_1608660323376_12967").length; }, function () { // var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_8180"); var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967"); // save first number var projects = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967 h1"); var projectsNum = +projects.textContent; // save second number var clients = document.querySelector("#block-yui_3_17_2_1_1608660323376_14050 h1"); var clientsNum = +clients.textContent; // save third number var ongoing = document.querySelector("#block-yui_3_17_2_1_1608660323376_16106 h1"); var ongoingNum = +ongoing.textContent; // set all numbers to zero projects.textContent = clients.textContent = ongoing.textContent = 0; function animateNumbers() { if (isInViewport(spacerBar) && !window.numbersAnimated) { // animate the numbers back to their original. over X seconds. var curProjects = 0, curClients = 0, curOngoing = 0; var animating = setInterval(function(){ curProjects += projectsNum / (animateSeconds * 100); curClients += clientsNum / (animateSeconds * 100); curOngoing += ongoingNum / (animateSeconds * 100); projects.textContent = Math.floor(curProjects); clients.textContent = Math.floor(curClients); ongoing.textContent = Math.floor(curOngoing); }, 10); window.numbersAnimated = true; // turn off the interval after X seconds setTimeout(function(){ clearInterval(animating); // set the numbers to their original projects.textContent = projectsNum; clients.textContent = clientsNum; ongoing.textContent = ongoingNum; }, animateSeconds * 1000); } } // if page loads and numbers are visible animateNumbers(); // when scrolling window.addEventListener('scroll', animateNumbers); }, // action function { //this is only necessary if you need to do something on timeout. ontimeout: function () { console.log('*** Timing out ***'); } } //ontimeout // action function ); // whenReady </script> Screen Recording 2020-12-30 at 5.21.10 AM.mov Any chance you'd know why this code, in a code block, is saying "script disabled"? Link to comment
Beyondspace Posted January 21, 2021 Share Posted January 21, 2021 6 hours ago, Redemption said: Any chance you'd know why this code, in a code block, is saying "script disabled"? script disabled on editor but it will run when preview site BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
AButterfield Posted January 22, 2021 Share Posted January 22, 2021 I am trying to do this on a Square Space website as well. When I add a Code block from tazmeah and copy the code in it says "Script Disabled" and even when I preview the site there it does not work. Any suggestions? Link to comment
Beyondspace Posted January 23, 2021 Share Posted January 23, 2021 4 hours ago, AButterfield said: I am trying to do this on a Square Space website as well. When I add a Code block from tazmeah and copy the code in it says "Script Disabled" and even when I preview the site there it does not work. Any suggestions? Let share you site url BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
iamdanielyoung Posted May 11, 2021 Share Posted May 11, 2021 On 12/30/2020 at 10:23 AM, tazmeah said: How about this? I have it set to animate for 2 seconds, but you can change that. <script> // how many seconds do you want it to animate? var animateSeconds = 2; /* Do Not Edit Below Here */ function isInViewport(elem) { var bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; whenReady = function (readyFunc, actionFunc, options) { if (readyFunc()) { actionFunc.apply(this); } else { if (!options) options = {}; if (!options.current) options.current = 0; if (!options.max) options.max = 60000; if (!options.interval) options.interval = 500; if (options.current < options.max) { setTimeout(function () { options.current += options.interval; whenReady(readyFunc, actionFunc, options); }, options.interval); } else if (options.ontimeout) { options.ontimeout(); } } return true; }; whenReady( function () { return document.querySelectorAll("#block-yui_3_17_2_1_1608660323376_12967").length; }, function () { // var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_8180"); var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967"); // save first number var projects = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967 h1"); var projectsNum = +projects.textContent; // save second number var clients = document.querySelector("#block-yui_3_17_2_1_1608660323376_14050 h1"); var clientsNum = +clients.textContent; // save third number var ongoing = document.querySelector("#block-yui_3_17_2_1_1608660323376_16106 h1"); var ongoingNum = +ongoing.textContent; // set all numbers to zero projects.textContent = clients.textContent = ongoing.textContent = 0; function animateNumbers() { if (isInViewport(spacerBar) && !window.numbersAnimated) { // animate the numbers back to their original. over X seconds. var curProjects = 0, curClients = 0, curOngoing = 0; var animating = setInterval(function(){ curProjects += projectsNum / (animateSeconds * 100); curClients += clientsNum / (animateSeconds * 100); curOngoing += ongoingNum / (animateSeconds * 100); projects.textContent = Math.floor(curProjects); clients.textContent = Math.floor(curClients); ongoing.textContent = Math.floor(curOngoing); }, 10); window.numbersAnimated = true; // turn off the interval after X seconds setTimeout(function(){ clearInterval(animating); // set the numbers to their original projects.textContent = projectsNum; clients.textContent = clientsNum; ongoing.textContent = ongoingNum; }, animateSeconds * 1000); } } // if page loads and numbers are visible animateNumbers(); // when scrolling window.addEventListener('scroll', animateNumbers); }, // action function { //this is only necessary if you need to do something on timeout. ontimeout: function () { console.log('*** Timing out ***'); } } //ontimeout // action function ); // whenReady </script> Screen Recording 2020-12-30 at 5.21.10 AM.mov This isn't working for me. I've tried it as code injection in header and footer and also as Code Block. Is there something I'm missing? Url: https://soybean-semicircle-83mn.squarespace.com/ Password: aber Link to comment
creedon Posted May 11, 2021 Share Posted May 11, 2021 @iamdanielyoung Did you change the block id from #block-yui_3_17_2_1_1608660323376_12967 to the one on your page? 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
FarmGateMarketing Posted May 20, 2021 Share Posted May 20, 2021 (edited) I'm really struggling with this also. Usually fine with most edits and aligning blocks into code, but can't make this work at present. I've dumped some test numbers at the bottom of this page and replaced their block-yui with my id - and I've deleted the extra block (ongoing projects) as I only needed 2 numbers, but nothing. I've tried in both the page header (where it's sat now) and a code block. Also a little confused by "if using code injection remove first and last line" Any help appreciated. Page - https://www.farmgateruralmarketing.co.uk/case-studies Edited May 20, 2021 by FarmGateMarketing Updated after extra tries Link to comment
tuanphan Posted May 21, 2021 Share Posted May 21, 2021 On 5/20/2021 at 4:44 PM, FarmGateMarketing said: I'm really struggling with this also. Usually fine with most edits and aligning blocks into code, but can't make this work at present. I've dumped some test numbers at the bottom of this page and replaced their block-yui with my id - and I've deleted the extra block (ongoing projects) as I only needed 2 numbers, but nothing. I've tried in both the page header (where it's sat now) and a code block. Also a little confused by "if using code injection remove first and last line" Any help appreciated. Page - https://www.farmgateruralmarketing.co.uk/case-studies Hi. It looks like you solved this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
FarmGateMarketing Posted May 21, 2021 Share Posted May 21, 2021 (edited) Hi @tuanphan, I put the numbers in but haven't them animated still. Any input from your expert eyes appreciated! Could one reason be, my page isn't homepage? just throwing ideas out there Edited May 21, 2021 by FarmGateMarketing Link to comment
Patterson Posted June 15, 2021 Share Posted June 15, 2021 @tazmeah or @hawaiiestatetours , could you walk me through how to insert this into my website? I have tried to insert in code blogs as well as header injections. Any help would be greatly appreciated. Thanks a-bunch! Link to comment
tuanphan Posted June 15, 2021 Share Posted June 15, 2021 On 5/22/2021 at 4:03 AM, FarmGateMarketing said: Hi @tuanphan, I put the numbers in but haven't them animated still. Any input from your expert eyes appreciated! Could one reason be, my page isn't homepage? just throwing ideas out there Hi. Count on page load or on scroll? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
FarmGateMarketing Posted June 15, 2021 Share Posted June 15, 2021 (edited) Scroll would be preferable, but open to either. Edit - thanks for digging this up and looking into 🙂 Edited June 15, 2021 by FarmGateMarketing Link to comment
Beeline Posted August 31, 2021 Share Posted August 31, 2021 @hawaiiestatetours,@FarmGateMarketing & @Patterson-Has anyone implemented this that can help me? I tried injecting @tazmeah's code into the Header injection, Footer injection, and as CSS with no luck. I changed the block id #s and the names (ie projects, clients) to match my site with no luck. I'm no expert coder so spelling this out for me with exactly what steps I need to take would be great. I am looking to have the counter run upon scroll (just like in @tazmeah's video). I am looking to do this under the Fun Facts About Me on the About Me page. https://beeline-consulting.squarespace.com/about pw: helpmeplease Any advice would be greatly appreciated. Thanks! Link to comment
TheHouseAgency Posted September 26, 2021 Share Posted September 26, 2021 On 12/30/2020 at 10:23 AM, tazmeah said: How about this? I have it set to animate for 2 seconds, but you can change that. <script> // how many seconds do you want it to animate? var animateSeconds = 2; /* Do Not Edit Below Here */ function isInViewport(elem) { var bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; whenReady = function (readyFunc, actionFunc, options) { if (readyFunc()) { actionFunc.apply(this); } else { if (!options) options = {}; if (!options.current) options.current = 0; if (!options.max) options.max = 60000; if (!options.interval) options.interval = 500; if (options.current < options.max) { setTimeout(function () { options.current += options.interval; whenReady(readyFunc, actionFunc, options); }, options.interval); } else if (options.ontimeout) { options.ontimeout(); } } return true; }; whenReady( function () { return document.querySelectorAll("#block-yui_3_17_2_1_1608660323376_12967").length; }, function () { // var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_8180"); var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967"); // save first number var projects = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967 h1"); var projectsNum = +projects.textContent; // save second number var clients = document.querySelector("#block-yui_3_17_2_1_1608660323376_14050 h1"); var clientsNum = +clients.textContent; // save third number var ongoing = document.querySelector("#block-yui_3_17_2_1_1608660323376_16106 h1"); var ongoingNum = +ongoing.textContent; // set all numbers to zero projects.textContent = clients.textContent = ongoing.textContent = 0; function animateNumbers() { if (isInViewport(spacerBar) && !window.numbersAnimated) { // animate the numbers back to their original. over X seconds. var curProjects = 0, curClients = 0, curOngoing = 0; var animating = setInterval(function(){ curProjects += projectsNum / (animateSeconds * 100); curClients += clientsNum / (animateSeconds * 100); curOngoing += ongoingNum / (animateSeconds * 100); projects.textContent = Math.floor(curProjects); clients.textContent = Math.floor(curClients); ongoing.textContent = Math.floor(curOngoing); }, 10); window.numbersAnimated = true; // turn off the interval after X seconds setTimeout(function(){ clearInterval(animating); // set the numbers to their original projects.textContent = projectsNum; clients.textContent = clientsNum; ongoing.textContent = ongoingNum; }, animateSeconds * 1000); } } // if page loads and numbers are visible animateNumbers(); // when scrolling window.addEventListener('scroll', animateNumbers); }, // action function { //this is only necessary if you need to do something on timeout. ontimeout: function () { console.log('*** Timing out ***'); } } //ontimeout // action function ); // whenReady </script> Screen Recording 2020-12-30 at 5.21.10 AM.mov Needs much more clarity Link to comment
Patterson Posted October 5, 2021 Share Posted October 5, 2021 On 8/31/2021 at 4:02 AM, Beeline said: @hawaiiestatetours,@FarmGateMarketing & @Patterson-Has anyone implemented this that can help me? I tried injecting @tazmeah's code into the Header injection, Footer injection, and as CSS with no luck. I changed the block id #s and the names (ie projects, clients) to match my site with no luck. I'm no expert coder so spelling this out for me with exactly what steps I need to take would be great. I am looking to have the counter run upon scroll (just like in @tazmeah's video). I am looking to do this under the Fun Facts About Me on the About Me page. https://beeline-consulting.squarespace.com/about pw: helpmeplease Any advice would be greatly appreciated. Thanks! @Beeline I used a plugin from ghost plugins. Beeline 1 Link to comment
ChillOutBar Posted October 9, 2021 Share Posted October 9, 2021 @creedon Do you also need to change the other block IDs in the function? Instead of the block ID query, is it possible to just hardcode the number that you want to count to? 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