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 );
    }

CodePudding user response：

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>

CodePudding user response：

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:

1. 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.
2. (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.
3. (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.