[Resolved] How to add delay in fixed button that I created using Hook?

Home Forums Support [Resolved] How to add delay in fixed button that I created using Hook?

Home Forums Support How to add delay in fixed button that I created using Hook?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1560599
    Nitin

    Hello,
    I have created a fixed button using the Hook(generate_after_footer). But, I want some delay in it to show on the page. Is there any way to do so?

    Here is a screenshot-
    https://nimb.ws/sNHeRJ

    #1560842
    David
    Staff
    Customer Support

    Hi there,

    can you link me to the page where i can see the button?

    #1561074
    Nitin

    Hey David, I replied to you in the private information.

    #1562012
    David
    Staff
    Customer Support

    First you would need this CSS, which will hide the button until the show class is added:

    .sticky-button {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease-in;
    }
    .sticky-button.show {
        opacity: 1;
        pointer-events: initial;
    }

    Then you will need this Javascript, which needs to be hooked in after the Button. You can include it below your buttons HTML:

    <script>
    setTimeout(() => document.querySelector('.sticky-button').classList.add('show'), 5000);
    </script>

    After 5000ms ( 5 seconds ) the show class gets added to the element.

    #1562603
    Nitin

    Thank you, David.
    It is perfect now. How can I adjust the padding around the fixed button as you can see that it is coming out of the sticky button?

    #1562927
    Elvin
    Staff
    Customer Support

    Hi,

    You can use this CSS to control the padding.

    a.button.sticky-button.thirstylinkimg.show {
    padding: 0;
    line-height: 0;
    }

    line-height is added to remove the space not caused by padding and margin. You can adjust the padding value to your preference.

    A wise man once said:
    "Have you cleared your cache?"

    #1562996
    Nitin

    Okay, thank you.

    #1563032
    Elvin
    Staff
    Customer Support

    Okay, thank you.

    No problem. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.