Is there a way w/o Jquery that we can hide the div with class hide at the time when DOM renders when we open a page or refresh a page? But after the full DOM has rendered then after 3 seconds this part of the dom also become visible.
You can use css animation on the element opacity to create a delay in visibility. But this may not be dependant on dom loading. To wait for the dom you could use vanilla js rather than Jquery.
Note though that if you just put such a timeout at the end of the body, it will start as soon as the DOM got parsed – assets such as images or stylesheets may still be getting loaded in the background. To wait for those as well, you can listen for the load event on the window:
window.addEventListener('load', () => {
// Either add a class to the body and do the rest
// using CSS animations...
document.body.classList.add('loaded')
// ... or just start the timeout now
window.setTimeout(() => {
document.querySelector('.hide').classList.remove('hide')
}, 3000)
})
This seems to be a JS/jQuery issue so I am moving this topic to the JavaScript category. If it changes back to seeking an HTML/CSS solution, it can be bounced back.
(function(){
//I get the element
var divElem=document.getElementById('hide');
//I set css display to none so it is not become visible
divElem.style.display='none';
//Via if condition I check the readystate status
if (document.readyState === 'loading') {
//If loading I set the following function to trigger when it becomes complete
document.onreadystatechange=function(){
if (document.readyState === 'complete') {
//When it becomes complete the it triggers the setTimeout function (time set=3000ms)
setTimeout(function(){
//After the time is passed then I change the css display to block that appears the elements
divElem.style.display='block';
}, 3000);
}
};
}
})();