[Support request] Show button in Generateblocks time-controlled

[Frank Noack]

Hello GeneratePress Team,

Is there a possibility to fade in a button in Generateblocks time-controlled, e.g. after 10 seconds?

Thank you very much for an answer

Frank

[David]

Hi there,

it is possible with Javascript.
Add this JS to the wp_footer hook:

<script>
window.onload = function() {
    document.getElementById('fade-in-button').className = 'active';
};
</script>

And add this CSS to the site:

#fade-in-button {
    opacity: 0;
    transition: opacity 0.2s ease-in;
    transition-delay: opacity 5s;
}
#fade-in-button.active {
    opacity: 1;
}

Then give your button an ID of fade-in-button

The only problem is if a user has JS disabled in their browser the button may never appear.
There is ways around that but it would involve the button being visible to begin with.

[Frank Noack]

Many Thanks David

[David]

You’re welcome

[Heinrich]

Hi David,

can we use this code to fade in a container too?
and what changes need to be done?

Thanks in advance.

[David]

Hi Heinrich,

yes you can use the same code as above, it doesn’t matter if it is a button or any block.
But if you want you can change the ID being used to anything you want.
For example we change the fade-in-button to fade-in-block:

1. The script:

<script>
window.onload = function() {
    document.getElementById('fade-in-block').className = 'active';
};
</script>

2. The CSS:

#fade-in-block {
    opacity: 0;
    transition: opacity 0.2s ease-in;
    transition-delay: opacity 5s;
}
#fade-in-block.active {
    opacity: 1;
}

3. The ID you add to your block is: fade-in-block

[Heinrich]

hi david, thought so too, but do not get it to run. the element is visible immediate and don`t fade in.

[David]

If you want to raise a new topic where you can share a link to your site and where i can see the issue, ill take a quick look.

[Heinrich]

perfect, coming in a minute

[Author]

Posts