hiding a div with certain time bound

Question

i need to hide a div (like mail sent successfull in gmail)after certain time period when i reload the page ? any body please help me by giving codes..

Answer 1

You may use setTimeout to delay a function's execution:

window.setTimeout(doSomething, 1000); // 1000ms == 1 second

To hide an element, you may set its display property to none:

var element = document.getElementById('foo');

function doSomething() {
    element.style.display = 'none';
}

Answer 2

Try this:

var timePeriodInMs = 4000;

setTimeout(function() 
{ 
    document.getElementById("myDiv").style.display = "none"; 
}, 
timePeriodInMs);

Answer 3

setTimeout(function(){
   document.getElementById('messageID').style.display = 'none';
}, 5000);  //5secs

Answer 4

1. add jquery to your html document
2. add script tag to head of your document containing:

<script type="text/javascript">
    $(document).ready(function(){
        window.setTimeout(function(){
            $('#id-of-div').hide();
        }, 10000 /* delay time in milliseconds */
    });
</script>

Answer 5

You are looking at the setTimeout( expression, timeout ); where you need to give it an expression to run after the timeout in milliseconds that you allocate to it. then you would do element.style.display="none"

ex:

setTimeout( function(){element.style.display="none"}, 4000 );

Answer 6

If you want the element to disappear after a certain time, regardless of page reloads (that's the way I read your question), you would have to work with cookies.

• You would have to set a cookie with the starting point

• You would have to execute a JavaScript function on page load that compares the time set in the cookie with the current time, and shows/hides the element accordingly.

• For a perfect solution, you would additionally implement a timer that compares the current date to the date in the cookie every, say, half-second, and hides the element when the time has been reached.

Using a framework like JQuery is certainly a good idea for this.