Jeremyn

On 12/30/2020 at 6:23 PM, 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

Thanks @tazmeah for sending this code over.

I tested it and change the Block ID, however, the numbers are "400+" and "11K". So because of the + and K after the number, the code is not working.

I also was hoping to keep the custom colour #ED8561 and also the bold front.

Is anyone could help me please?

https://www.creativeportrait.net.au/

My site is creativeportrait.net.au or https://squid-echidna-882a.squarespace.com/

You are also a contributor to it.

Hi Tuan,

I just realise now that the previous code closes the edit section window automatically when I open them.

How can I please fix this?

And again THANK YOU so much Tuan for being so helpful!

Thank you for sending the new code Tuan. I tried it out by adding it to the advanced setting of the page but only the first gallery is going on auto-scroll.

Any idea where the problem is?

Hi there,

I would like to auto-scroll all gallery reels from this page: https://www.creativeportrait.net.au/studio-and-location

I have the code below but it auto-scroll only the 1st gallery:

<script>
    /**
    *  Gallery Section Auto Scroller
    **/
  (function () {
    setAutoScroll({
        gallery: 1,
      direction: 2,
      timing: 3000,
    });

    /*
    * Copy and paste the above code
    * to target more auto-scrolling
    * sections
    **/

    /** gallery
    * gallery section order on the page. Ex:
    * 1 = the first gallery section on a page,
    * 2 = the second gallery section on a page
    **/

    /** direction
    * direction the gallery should go in.
    * 1 = backwards,
    * 2 = forwards
    **/

    /** timing
    * timing between each slide, in milliseconds. Ex:
    * 2000 = 2 seconds
    **/

    function setAutoScroll(settings) {
      function init() {
        let section = document.querySelectorAll(".page-section.gallery-section")[settings.gallery - 1];

        function clickArrow() {
          if (section && !document.querySelector("html.sqs-modal-lightbox-open") && !document.hidden && !document.querySelector("body.sqs-edit-mode")) {
            let arrow = section.querySelectorAll(".gallery-reel-control .gallery-reel-control-btn")[settings.direction - 1];
            if (arrow) arrow.click();
          }
        }

        window.setInterval(clickArrow, settings.timing);
      }

      window.addEventListener("DOMContentLoaded", init);
    }
  })();

</script>

Awesome! It works perfectly. Thank you so much Tuan, I really appreciate it.

Hi Tuan,

This is a gallery slideshow reel on the home page of https://www.creativeportrait.net.au/

I am looking at having the arrow off the pricing guide button.

Thank you.

Thank you for sending this code over bangank36.

I am wondering how to move the arrows from both side a little bit more to the inside (see photo attached)?

No could not find anything... It would be awesome if Squarespace add this option.

Thank you so much Tuan!!!

Yes it is https://www.creativeportrait.net.au/special-offer-booking-page

I have added this code but it hide header and announcement bar together. How can I hide the header while keeping the announcement bar please?

<!-- Announcement bar -->
<style>
  .sqs-announcement-bar-dropzone {
    display: block !important;
}
</style>

<!-- Header and resize -->
<style>
  #header {
  display: none!important;} 
</style>
 

Awesome Tuan, thank you very much for your quick reply.  Silly question... Is the announcement bar goes with the header or can be display without the header on a landing page?

Hi there, is it possible to show the announcement bar on a single page?  www.creativeportrait.net.au 

Thank you

I have the code below on the home page to have the logo as splash screen. Now, I am looking at adding a pulse motion similar at this website: https://www.rebeccagracedesigns.com/

How can I achieve this please? https://www.creativeportrait.net.au/

Code:

<!-- loading image -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<script>
$(function() {
  var loadLogo = $('header').find('img').attr('src');
  $('.logoload').css('background-image', 'url(' + loadLogo + ')');
});
</script>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #fff;
  /* SET BACKGROUND SIZE */
  background-size: 200px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("fast");
})
</script>

https://www.creativeportrait.net.au/ordering-page

You will see the product section at the top and the digital collections down the bottom.

When purchasing a digital collection, the client receives a print credit. I would like to provide the client with a discount code to apply the print credit to the total cost of the product ordered.

I hope that makes sense.

I have tried but when applying a code to a a product page, this will apply the discount code to each item. Is there a way to apply it only once?

Of course! https://creativeportrait.net.au/product-store

Same problem here. Did anyone find a way to achieve this?

Hi wildbayseafoods, I was wondering how this did do to get the cart floating window?

Anyone have found a code to achieve that?

The AfterPay widget is only showing on the product page. How can it be shown on a product block please?

Yes Tuan, I keep it simple and this works perfectly fine! Thanks.

Non-clickable please.