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 );
}
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>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:
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.window.onload function has the setTimeout inside of it. This means that when the onload function is called, the setTimeout will automatically start.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.