Hide a Div for 3 seconds

<div class="hide">

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.

  document.getElementById("hide").style.display = "block"; 
 }, 3000);
1 Like

You are telling this about Vanilla Js or JQuery.

That’s vanilla JavaScript, not jQuery.

1 Like

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...

  // ... or just start the timeout now
  window.setTimeout(() => {
  }, 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. :slight_smile:

1 Like

Tried this →

Doesn’t seems to work.

You have to hide it with CSS initially :slight_smile: .


You had it set to 27000 (27 seconds) so I changed it to 3000 (3seconds) to match your OP.

1 Like
  //I get the element
  var divElem=document.getElementById('hide');
  //I set css display to none so it is not become visible
  //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
      if (document.readyState === 'complete') {
   //When it becomes complete the it triggers the setTimeout function (time set=3000ms)
   //After the time is passed then I change the css display to block that appears the elements
     }, 3000);

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.