cade Posted January 28, 2021 Share Posted January 28, 2021 Site URL: https://bugle-fish-cafk.squarespace.com/ Hi there i implemented the number counter from squarestud. Now I would like to have all 5 numbers in a row. I've tried a lot, but unfortunately I can't get any further. Can someone help me? Header Injection: <style> .counter-container { text-align: center; display: flex; flex-flow: row nowrap; justify-content: space-evenly; } #counterbox { display: inline-block; min-width:200px; } #counterbox p { font-size:30px; text-align: center; width: 100%; display: block; color: rgb(163,79,139) } .counter { font-size:100px; line-height: 60px; font-weight: 200; color: rgb(163,79,139); } @media (max-width:870px) { .counter-container { display: none !important; width: 100% !important; } .counter-countainer #counterbox { margin-top: 20px; margin-bottom: 20px; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript"> /*=============== SQUARE STUDIO ANIMATED COUNTER PLUGIN START ===============*/ function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver,new MutationObserver(function(a){for(var b=0;b<a.length;b++){if("attributes"===a[b].type){var d=new Event("pageChange");document.dispatchEvent(d)}}}).observe(document.body,{attributes:!0,attributeFilter:["id"]})}var executed=!1;$(document).ready(function(){function a(){$(".counter-container").length>0&&$(window).scroll(function(){b()})}function b(){if(!executed){var a=.1*$(".counter-container").outerHeight();$(window).scrollTop()>$(".counter-container").offset().top-$(window).height()+a&&(executed=!0,$(".counter").each(function(){var a=$(this),b=a.attr("data-count");$({countNum:a.text()}).animate({countNum:b},{duration:3e3,easing:"linear",step:function(){a.text(Math.floor(this.countNum))},complete:function(){a.text(this.countNum)}})}))}}a()}),document.addEventListener("pageChange",function(){executed=!1,$(window).unbind("scroll"),init()}),window.onload=watch; /*================ SQUARE STUDIO ANIMATED COUNTER PLUGIN END ================*/ </script> Code Widget: <div class="counter-container"> <div id="counterbox"> <div class="counter one" data-count="13">0</div><p>FIRMENANLÄSSE</p> </div> <div id="counterbox"> <div class="counter two" data-count="33">0</div> <p>HOCHZEITEN</p> </div> <div id="counterbox"> <div class="counter three" data-count="3">0</div> <p>MESSEN</p> <div id="counterbox"> <div class="counter three" data-count="8">0</div> <p>KONZERTE</p> <div id="counterbox"> <div class="counter three" data-count="17">0</div> <p>PRIVATANLÄSSE</p> </div> </div> Link to comment
Beyondspace Posted January 28, 2021 Share Posted January 28, 2021 5 hours ago, cade said: Site URL: https://bugle-fish-cafk.squarespace.com/ Hi there i implemented the number counter from squarestud. Now I would like to have all 5 numbers in a row. I've tried a lot, but unfortunately I can't get any further. Can someone help me? Header Injection: <style> .counter-container { text-align: center; display: flex; flex-flow: row nowrap; justify-content: space-evenly; } #counterbox { display: inline-block; min-width:200px; } #counterbox p { font-size:30px; text-align: center; width: 100%; display: block; color: rgb(163,79,139) } .counter { font-size:100px; line-height: 60px; font-weight: 200; color: rgb(163,79,139); } @media (max-width:870px) { .counter-container { display: none !important; width: 100% !important; } .counter-countainer #counterbox { margin-top: 20px; margin-bottom: 20px; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript"> /*=============== SQUARE STUDIO ANIMATED COUNTER PLUGIN START ===============*/ function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver,new MutationObserver(function(a){for(var b=0;b<a.length;b++){if("attributes"===a[b].type){var d=new Event("pageChange");document.dispatchEvent(d)}}}).observe(document.body,{attributes:!0,attributeFilter:["id"]})}var executed=!1;$(document).ready(function(){function a(){$(".counter-container").length>0&&$(window).scroll(function(){b()})}function b(){if(!executed){var a=.1*$(".counter-container").outerHeight();$(window).scrollTop()>$(".counter-container").offset().top-$(window).height()+a&&(executed=!0,$(".counter").each(function(){var a=$(this),b=a.attr("data-count");$({countNum:a.text()}).animate({countNum:b},{duration:3e3,easing:"linear",step:function(){a.text(Math.floor(this.countNum))},complete:function(){a.text(this.countNum)}})}))}}a()}),document.addEventListener("pageChange",function(){executed=!1,$(window).unbind("scroll"),init()}),window.onload=watch; /*================ SQUARE STUDIO ANIMATED COUNTER PLUGIN END ================*/ </script> Code Widget: <div class="counter-container"> <div id="counterbox"> <div class="counter one" data-count="13">0</div><p>FIRMENANLÄSSE</p> </div> <div id="counterbox"> <div class="counter two" data-count="33">0</div> <p>HOCHZEITEN</p> </div> <div id="counterbox"> <div class="counter three" data-count="3">0</div> <p>MESSEN</p> <div id="counterbox"> <div class="counter three" data-count="8">0</div> <p>KONZERTE</p> <div id="counterbox"> <div class="counter three" data-count="17">0</div> <p>PRIVATANLÄSSE</p> </div> </div> Did you contact the plugin provider BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.