Hide a Div for 3 seconds

<div class="hide">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
</div>

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.

3 Likes
setTimeout(function(){
  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...
  document.body.classList.add('loaded')

  // ... or just start the timeout now
  window.setTimeout(() => {
    document.querySelector('.hide').classList.remove('hide')
  }, 3000)
})
2 Likes

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

http://codepen.io/ryanreese09/pen/EWLNax

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

1 Like
 (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);
     }
     };
   }    
     
  })();

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