Hide Div After a Few Seconds

Hide div after a few seconds

This will hide the div after 1 second (1000 milliseconds).

setTimeout(function() {    $('#mydiv').fadeOut('fast');}, 1000); // <-- time in milliseconds

#mydiv{    width: 100px;    height: 100px;    background: #000;    color: #fff;    text-align: center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="mydiv">myDiv</div>

I am trying to hide a div after 5 seconds of page load. Why is it not working?

As you are working with Vue.js, I will suggest you to use v-show directive to show and hide the popup.

Demo:

new Vue({
  el: '#app',
  data: {
      isVisible: true
  },
  mounted() {
    this.poppupShow();
  },
  methods: {
    poppupShow() {
      setTimeout(() => {
        this.isVisible = false;
      }, 5000);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="pop-up-chat" v-show="isVisible">
    <div id="div1">
      <div class="pop-up-msg regular-text">Hi, How may I help you?</div>
      <div class="triangle-down"></div>
    </div>
  </div>
</div>

Hiding div after a few seconds ReactJS

$ is a sign for jquery

in react we would say

  document.getElementById('#submitmsg').fadeOut('fast');

also i would use a easier way by declaring a boolean is usestate

const Component = () =>{
  const [showElement,setShowElement] = React.useState(true)
  useEffect(()=>{
    setTimeout(function() {
      setShowElement(false)
         }, 3000);
       },
   [])
      
  return(
    <div>
       {showElement?<div>I'm here and i will be gone</div>:<></>} 
    </div>
  )
}

Update:

here i created a codesandbox example

and here is the whole code it is working fine when i try it as you can see in codesandbox above

import React, { useEffect } from "react";

const MyComponent = () => {
  const [showElement, setShowElement] = React.useState(true);
  useEffect(() => {
    setTimeout(function () {
      setShowElement(false);
    }, 10000);
  }, []);

  return (
    <div>
      <div>
        {showElement ? (
          <div
            style={{
              height: "100vh",
              background: "black",
              color: "white",
              fontSize: "30px",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
              fontFamily: "roboto",
              opacity: showElement ? 1 : 0
            }}
          >
            I'm here and i will be gone
          </div>
        ) : (
          <div></div>
        )}{" "}
      </div>
    </div>
  );
};
export default MyComponent;

https://codesandbox.io/s/thirsty-rosalind-o9pds?file=/src/App.js

How to show a div for 10 seconds and hide it after?

I would do it with an onload on the body - which self-triggers a setTimeout and starts when the page is loaded.

function hideLoadingDiv() {  setTimeout(function(){    document.getElementById('LOADING').classList.add('hidden');  },10000)}

.hidden {  display: none;}

<html><head></head><body onload="hideLoadingDiv()"><div class="LOADING" id="LOADING" name="LOADING">Loading</div><div class="HOME_MENU" id="HOME_MENU" name="HOME_MENU">Menu</div></body></html>

Hide/Show A Div After A Few Seconds

Just loop it like

function toggleDiv() {
    setTimeout(function () {
        $("#myDiv").hide();
        setTimeout(function () {
            $("#myDiv").show();
            toggleDiv();
        }, 30000);
    }, 10000);
}
toggleDiv();

Demo: Fiddle

Hidding a DIV after a few seconds

Use the ChangeDetectorRef to trigger the detection manually:


  constructor(
    .
    .
    private cd: ChangeDetectorRef,
  ) {
  }

    onTextMouseEnter(){
        this.showMessageActions = true;
        this.cd.detectChanges();
    }
    
    onTextMouseLeave(){
        window.setTimeout(function(){
            this.showMessageActions = false;
            this.cd.detectChanges();
        }.bind(this), 3000);
    }

Show and hide divs after few seconds in jQuery

You could do something like this:

var homeLinks = ['i-t', 'o-c', 'c-f', 'i-c', 'c-u'];var currentLink = 0;var hovered = false;
$(".home-link").hover(function() {  hovered = true;  $('.home-'+homeLinks[currentLink]).hide();  $('[data-hover='+homeLinks[currentLink]+']').toggleClass('default-underline');  currentLink = homeLinks.indexOf($(this).attr('data-hover'));  $('[data-hover='+homeLinks[currentLink]+']').toggleClass('default-underline');  $('.home-'+homeLinks[currentLink]).show();}, function() {  hovered = false;});
var autoNavInterval = setInterval(autoNav, 1000);
function autoNav() {  if(hovered === false){    $('.home-'+homeLinks[currentLink]).hide();    $('[data-hover='+homeLinks[currentLink]+']').toggleClass('default-underline');    currentLink++;    if(currentLink >= homeLinks.length){ currentLink = 0; }    $('[data-hover='+homeLinks[currentLink]+']').toggleClass('default-underline');    $('.home-'+homeLinks[currentLink]).show();  }}

.left-fill {  background: #0000006b;  height: 100vh;}
.right-fill {  background: pink;  height: 100vh;}
.vc_col-sm-6 {  width: 50%;  float: left;}
.pivot-nav {  list-style: none;  font-family: 'Montserrat';  text-align: left;}
.pivot-nav li a {  font-size: 1.6rem;  font-weight: 700;  text-transform: uppercase;  display: inline-block;  position: relative;  color: #fff;  text-decoration: none;  line-height: 40px;}
.pivot-nav li a.default-underline::after,.pivot-nav li a:hover::after {  width: 100%;}
.pivot-nav:hover a.default-underline:not(:hover)::after {  width: 0;}
.pivot-nav li a::after {  bottom: 0;  content: "";  display: block;  height: 4px;  position: absolute;  background: #fff;  transition: width 0.3s ease 0s;  width: 0;}
.home-o-c,.home-c-f,.home-i-c,.home-c-u {  display: none;}
.our-company {  clear: both;  display: block;  height: 50vh;}
.cf2 {  clear: both;  display: block;  height: 50vh;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="left-fill text-left wpb_column vc_column_container vc_col-sm-6">
    <div class="wpb_wrapper">      <p class="home-i-t">TEXT One</p>      <p class="home-o-c">TEXT One</p>      <p class="home-c-f">TExt for C f.</p>      <p class="home-i-c">Some more text fo i c.</p>      <p class="home-c-u">Get in touch </p>
    </div>  </div>

  <div class="home-fill right-fill text-right wpb_column vc_column_container vc_col-sm-6">
    <div class="wpb_wrapper">      <ul class="pivot-nav">        <li class="pivot-nav-item"><a data-hover="o-c" class="home-link" href="#" data-toggle="my-scrollspy-2">O C</a></li>        <li class="pivot-nav-item"><a data-hover="c-f" class="home-link" href="#" data-toggle="my-scrollspy-2">C F</a></li>        <li class="pivot-nav-item"><a data-hover="i-c" class="home-link" href="#" data-toggle="my-scrollspy-2">I C</a></li>        <li class="pivot-nav-item" data-toggle="my-scrollspy-2"><a data-hover="c-u" class="home-link" href="#">C U</a></li>      </ul>
    </div>  </div>

React.js, timeout - how to hide a div after a few seconds

React's this.setState's second argument is a callback function, not a static value. You probably meant to call setTimeout with a callback to update state. I also suggest changing the name of your function to something more meaningful, like resetMessage so it isn't as ambiguous. Then for completionist's sake you should save the timer ref and clear it when the component unmounts so you don't try to set state of an unmounted component.

constructor(props) {
  super(props)
  this.state = {
    messageConfirm: '',
  };
  this.timerId = null;
}

resetMessage() {
  this.timerId = setTimeout(() => {
    this.setState({ messageConfirm: "" });
     this.timerId = null;
  }, 5000);
}

submitForm(e) {
  e.preventDefault();
  const isValid = this.validateForm();

  if (isValid) {
    this.confirmEmailMessage();
    this.resetMessage();
    e.target.reset();
    this.resetForm();
  }
}

...

componentWillUnmount() {
  cleatTimeout(this.timerId);
}

How can I hide a div after x seconds in blazor?

The following code snippet demonstrate how to display the modal div and how to hide it. Note that the usage of the Timer object is not necessary, and may be considered over skilled.

Copy and test:

@page "/"

@if (alertMessageShow)
{

    <div class="alert alert-success" style="margin-left: 50px">@message</div>
}

<button type="button" @onclick="Save">Save Update</button>
@code {
    private bool alertMessageShow = false;
    private string message;

    private async Task Save()
    {
        message = "Saving update...";
        alertMessageShow = true;

        // Simulate saving operation, say, to a database. In a real world application the duration of
        // the delay is determined by the operation itslef; in other words, you do not use the line below
        await Task.Delay(5000);     

        message = "Updates saved...";
        await InvokeAsync(() => StateHasChanged());  
      
        // Wait 3 seconds for the user to read the message, and then close the modal
        await Task.Delay(3000);
       

        alertMessageShow = false;

    }
}

Note: I'd advise you to use toast notification modal dialog for such operations. See how chrissainty do that...

Hide Div After a Few Seconds