Is it possible to show a div after a certain time that you click?

Question

Is it possible to show a div after a certain time that you click?

Asked 3 years, 7 months ago

Viewed 48 times

1

I have the following problem: I would like to click on a div in which after for example 7 minutes display another div.

I think in theory the solution would be: When the click was made, you should take the current time and add the condition of increment of 7 minutes, that when arriving in this condition the div was displayed. Of course, if there are better possibilities, please tell me.

But in practice I couldn’t do it using javascript. Is that really possible? Could someone exemplify?

This is the div that will receive the click, it contains an embedded video

<div class="row mt-5 mb-5">
                <div class="col-sm-8 col-12 wow animated fadeInDown" data-wow-duration="4s" data-wow-delay="0.6s"  style="margin: 0 auto; width: 50%;">
                    <iframe id="video-msr" src="#" width="100%" height="558" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
                </div>
            </div>

This is the div that should be displayed after the click is made

<div class="row btn-linha-compra btnFixo">
            <div class="col-sm-6 col-12 text-center" style="margin: 0 auto; width: 50%;">
                <button class="btn-compra" data-wow-delay="0.6s">
                    <div class="wow pulse" data-wow-iteration="infinite">
                        <a id="link-compra" href="#" target="_blank">ACESSAR AGORA</a>
                    </div>
                </button>
            </div>
        </div>

2 answers

3

You can use the function setTimeout. This will cause a particular function to be executed after x millisecond.

Take the example:

document.querySelector('#clique-aqui').addEventListener('click', function () {
    
    setTimeout(function () {
        document.querySelector('#exibe-com-intervalo-de-tempo').style.display = '';
    }, 2 * 1000)

})

<div id="clique-aqui">clique aqui e aguarde 2 segundos</div>
<div id="exibe-com-intervalo-de-tempo" style="display: none">Será exibido com atraso</div>

In case you want to use for 7 minutes, you could perfectly put 7 * 60 * 1000.

Thus:

setTimeout(function (){ 
  // código aqui
}, 7 * 60 * 1000);

Note: Nothing stops you from passing 420000 (which is 7 * 60 * 1000) directly too, but in this case I used mathematical expression to simplify comprehension, since the function receives the values in milliseconds.

Perfect, worked perfectly, I’m just having trouble catching the click on iframe

– WPfan

2020/11/10 at 19:46

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.

by Leandro • 11 points · Answer 1 · 2020-11-10T18:49:27+00:00

The object window allows code execution after a certain period of time. For example:

setTimeout(função, tempoEmMilisegundos)

Where the function passed in the parameter (função) will be executed after the time reported in the second parameter (tempoEmMilisegundos).

<!DOCTYPE html>
<html>
<body>


<div class="row mt-5 mb-5" onclick="setTimeout(myFunction, 3000);" style="border-style: solid;" >
                <div class="col-sm-8 col-12 wow animated fadeInDown" data-wow-duration="4s" data-wow-delay="0.6s"  style="margin: 0 auto; width: 50%;">
                    <iframe id="video-msr" src="#" width="100%" height="558" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
                </div>
</div>

<div class="row btn-linha-compra btnFixo" id="divCompra" style="visibility:hidden;">
            <div class="col-sm-6 col-12 text-center" style="margin: 0 auto; width: 50%;">
                <button class="btn-compra" data-wow-delay="0.6s">
                    <div class="wow pulse" data-wow-iteration="infinite">
                        <a id="link-compra" href="#" target="_blank">ACESSAR AGORA</a>
                    </div>
                </button>
            </div>
</div>


<script>
function myFunction() {
  document.getElementById("divCompra").style.visibility = "visible";
}
</script>
</body>
</html>´