CODEWITHSUNDEEP
javascripthtmlcss
RingGamesCompany
RingGamesCompany

Reputation: 153

How do i make a <div> tag dissapear after 20 seconds with JS?

i am building a project for my company and I am wondering how do i make a div dissapear after 20 seconds? Because I am building a site with a div with position: -webkit-sticky; and 

<style>
.sticky {
position: -webkit-sticky;
position: sticky;
}
.areaWarning {
width: 100%;
height: 102px;
background: lightgreen;
display: inline-block;
}
</style>
<div class="sticky">
<div class="areaWarning">
<h1> This site is currently still being built </h1>
<p> We are still working on this site, sorry</p>
</div>
</div>

I would just like to know how can I set a timeout for that warning with JavaScript?

Thanks, Ring Games

Upvotes: 1

Views: 74

Answers (2)

andrralv
andrralv

Reputation: 860

In vanilla JS without ES6, something like: 

<script>   
    window.addEventListener('load', function() {
        var warning = document.querySelector(".sticky");
        setTimeout(function() {
            warning.style.visibility = "hidden";
      }, 20000);
    })
</script>

Upvotes: 0

Oscar Velandia
Oscar Velandia

Reputation: 1166

you can use a setTimeout to hide the element after 20 seconds.

const areaWarning =  document.getElementById("areaWarning")

setTimeout(hideElement, 20000)

function hideElement() {
  areaWarning.style.display = "none"
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
}
.areaWarning {
  width: 100%;
  height: 102px;
  background: lightgreen;
  display: inline-block;
}
<div class="sticky">
  <div id="areaWarning">
    <h1> This site is currently still being built </h1>
    <p> We are still working on this site, sorry</p>
  </div>
</div>

Upvotes: 1

Related Questions