Invisible button after certain time

Asked

Viewed 351 times

2

Guys, I have a VSL page with a button that directs to a Whatsapp, however, I wanted to make this button invisible for 10 minutes, before appearing, because I pass a video before. How can I do that?

This is actually my button:

button.whats {
        cursor: pointer;
    border-top-left-radius: 0px;
        border-top-right-radius: 25px;
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 0px;
    border: solid;
    border-color: #34af23;
    background-color: #34af23;
    color: #FFFFFF;
    align-content: center;
    width: 250px;
    height: 70px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    font face: Helvetica;
    font-size: 15px;
    position: relative;
    bottom: 50px;
javascript html html5

  • to better understand. You want the user to access the page, in the first instance such button is hidden and the video is displayed and after 10 minutes (that is the video playback time), you want the video to hide and display such button?

  • The subject is tripled! Here is an example: https://www.w3schools.com/jsref/met_win_settimeout.asp -- Related topic: https://answall.com/q/91709/60601

3 answers

2


First you will hide the button with the property display:

button.whats {
 display: none;
}

Then a Javascript to show the button after 10 minutes:

<script>
document.addEventListener("DOMContentLoaded", function(){

   setTimeout(function(){
      document.querySelector("button.whats").style.display = "inline-block";
   }, 600000);

});
</script>

The value 600000 (600,000) is 600,000 milliseconds, which is equal to 10 minutes.

  • 1

    Very good this tip, congratulations @Sam.

1

You can use the tag events <video> to show and hide other elements on the page.

The following example uses the events ended, play and pause to show buttons, where the event ended is only released when the video reaches the end or the server does not return more data to the player.

let video = document.getElementById('video')
let btnPaused = document.getElementById('show-on-paused')
let btnEnded = document.getElementById('show-on-ended')

function hideOnPause() {
    btnPaused.classList.toggle('hidden', !video.paused)
}

video.addEventListener("pause", hideOnPause)
video.addEventListener("play", hideOnPause)

video.addEventListener("ended", event => {
    btnEnded.classList.toggle('hidden', false)
})
section {display: flex}
button.hidden {display: none}

.buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex: 1;
}
<section>
    <video id="video" controls muted playsinline autoplay width=250
        src="https://archive.org/download/HorseGallopAnimation/MuybridgeHorseRide.mp4"></video>
    <span class="buttons">
        <button id="show-on-paused" class="hidden">Mostra quando pausado</button>
        <button id="show-on-ended" class="hidden">Mostra quando terminado</button>
    </span>
</section>

1

An option with CSS only. Note that it has an animation, and BTN will only be visible after 3s (3 seconds), but if you want 10min puts 600s.

Run and wait 3 seconds the btn will appear!

.btn {
  width: 50px;
  height: 50px;
  background-color: red;
  visibility: hidden;
  animation: btn 3s linear forwards;
}

@keyframes btn {
  0% {
  visibility: hidden;    
  }
  99% {
  visibility: hidden;    
  }
  100% {
  visibility: visible;
  }
}
<a href="#teste" class="btn">BTN</a>

Browser other questions tagged javascript html html5

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