how to hide a div on page load with a 5 second delay

Question

so what i want to do is to hide the element for the first 5 seconds the i want the element to show after 5 secs of page load i have tried many methods but nothing worked yet

here is my code:

 <div id="main_sec_2"></div>

css

#main_sec_2{
    position: relative;
    margin-left: 5px;
    display: none;
    vertical-align: top;
}

js

        function delay () {
        setTimeout( function() { 
window.onload = function() {
  document.getElementById('main_sec_2').style.display = 'inline-block';
}
;}, 500 );
    }

Your code has many issues. First, you shouldn't execute a function inside of a function, 2. 5 seconds is 5000 not 500, 3. you haven't executed the delay function, 4. please use a code beautifier. On top of this, please read and follow https://stackoverflow.com/help/how-to-ask. — ethry, May 11 '22 at 20:01
Does this answer your question? [Wait 5 seconds before executing next line](https://stackoverflow.com/questions/14226803/wait-5-seconds-before-executing-next-line) — ethry, May 11 '22 at 20:02

score 0 · Answer 1 · answered May 11 '22 at 20:09

0

You could simply use css-animation which does not require JS.

div {
  opacity: 0;
  animation-name: randomName;
  animation-delay: 5s;
}

@keyframes randomName {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}



/* for visualisation purpose only */
div {
  height: 50vh;
  background-color: red;
}

<div id="main_sec_2"></div>

answered May 11 '22 at 20:09

tacoshy

10,642
5
17
34

I want it to "really" be not there for some resizing issues – osama Kandory May 12 '22 at 15:46

score 0 · Accepted Answer · answered May 11 '22 at 21:14

If you want to use JavaScript, then your JavaScript code isn't working for a few reasons.

Below is some working JavaScript code. (The explanation is below it.)

function delay() {
  window.onload = function() {
    setTimeout(function() {
      document.getElementById("main_sec_2").style.display = "inline-block";
    }, 5000);
  }
}

delay();

#main_sec_2 {
  position: relative;
  margin-left: 5px;
  display: none;
  vertical-align: top;
}

<div id="main_sec_2">Division!</div>

^{Text in div used for visualisation purposes.}

The reason this code works is:

The setTimeout delay is set to 5000, not 500. The reason this works is because the timeout is measured in milliseconds, so 5000 milliseconds is the same as 5 seconds.
(Maybe) The window.onload function has the setTimeout inside of it. This means that when the onload function is called, the setTimeout will automatically start.
(Maybe) The delay function is being called. _{Note that this may be because the OP didn't include the call.}

In conclusion, you can use JavaScript or CSS for this issue, but this solution fixes the issue the JavaScript way.

thanks for answering my question. but still, I have some issues like when I want to add it to another div in the same inline list it fails — osama Kandory, May 12 '22 at 15:45

how to hide a div on page load with a 5 second delay

2 Answers2