42

I need to hide a div (like "mail sent successful" in Gmail) after a certain time period when I reload the page.

How can I do that?

Benjamin W.
  • 46,058
  • 19
  • 106
  • 116
rag
  • 515
  • 2
  • 7
  • 15

5 Answers5

103

Here's a complete working example based on your testing. Compare it to what you have currently to figure out where you are going wrong.

<html> 
  <head> 
    <title>Untitled Document</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript"> 
      $(document).ready( function() {
        $('#deletesuccess').delay(1000).fadeOut();
      });
    </script>
  </head> 
  <body> 
    <div id=deletesuccess > hiiiiiiiiiii </div> 
  </body> 
</html>
rosscj2533
  • 9,195
  • 7
  • 39
  • 56
46

In older versions of jquery you'll have to do it the "javascript way" using settimeout 

setTimeout( function(){$('div').hide();} , 4000);

or

setTimeout( "$('div').hide();", 4000);

Recently with jquery 1.4 this solution has been added:

$("div").delay(4000).hide();

Of course replace "div" by the correct element using a valid jquery selector and call the function when the document is ready.

Community
  • 1
  • 1
marcgg
  • 65,020
  • 52
  • 178
  • 231
  • 2
    Reason being, the `setTimeout` function expects as it's first parameter either a function, or a string. You are providing neither, you are EXECUTING the function, and the return of that function is what you are sending to the `setTimeout` function. This will work if you pass the function itself, like this: `setTimeout( $( "#div" ).hide, 4000 );`. – Jacob Relkin Mar 11 '10 at 15:44
  • @jacob: edited my answer, I think the examples I give should work fine – marcgg Mar 11 '10 at 15:47
  • Not to mention that passing a string is way less efficient than passing a function because it causes the `exec` function to parse the function. – Jacob Relkin Mar 11 '10 at 15:47
  • Untitled Document hiiiiiiiiiii

    i have tried this code but not working?pls tell wot is pblm for this code....

     – rag Mar 11 '10 at 15:48
  • @jacob true about the exec part. I doubt it would make a big difference in the end... because if we start like that we could argue that defining the function on the fly like that takes more bits and would be longer to load. I'd say perf are not an issue here, so it's up to the OP to use whatever syntax he likes more (even though i'd recommend using function()... ) – marcgg Mar 11 '10 at 15:49
  • 2
    @rag - for one, you don't load jQuery there. – Kobi Mar 11 '10 at 15:49
  • @rag also you don't load jquery as @kobi mentionned – marcgg Mar 11 '10 at 15:50
  • Untitled Document hiiiiiiiiiii

    i have included kobi still it s not wrking..

     – rag Mar 11 '10 at 15:53
  • 1
    @rag: You have a typo: `deletesuccess` in selector but `deletesucess` in id. – rosscj2533 Mar 11 '10 at 15:54
  • @rag: check your syntax, typos and so on. respect valid xhtml and so on, also – marcgg Mar 11 '10 at 16:06
  • Uncaught SyntaxError: Unexpected identifier /jqury/jquery-1.4.2.min.js:77 timehidediv.php:8Uncaught ReferenceError: $ is not defined / these are the new errors when i tried jquery 1.4.2 – rag Mar 11 '10 at 16:17
  • u der marcgg? forgot me if am late..:) – rag Mar 11 '10 at 16:18
  • Untitled Document hiiiiiiiiiii

    tried it in document ready still failed...

     – rag Mar 11 '10 at 16:27
  • 1
    @ross and @marcgg, fyi, your dismal level of service (shame on you, no reaction for 20 minutes!!!) left the OP no choice but to ask *the same question again* : http://stackoverflow.com/questions/2426659/hiding-a-div-with-certain-time-bound – Pekka Mar 11 '10 at 16:37
  • @rag: you have a problem with your jquery if it doesn't even recognize $. Try downloading it again and please don't open duplicate questions. Check your div ids and so on. – marcgg Mar 11 '10 at 16:47
  • @rag looks like your jquery is broken, as @marc says download it again. – Pekka Mar 11 '10 at 16:55
8
setTimeout('$("#someDivId").hide()',1500);
Jage
  • 7,990
  • 3
  • 32
  • 31
4

$().ready(function(){

  $('div.alert').delay(1500);
   $('div.alert').hide(1000);
});
div.alert{
color: green;
background-color: rgb(50,200,50, .5);
padding: 10px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="alert"><p>Inserted Successfully . . .</p></div>
Osahady
  • 439
  • 7
  • 16
1

You can also use...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">
        $(function(){
           setTimeout(function(){
               $(".signup-success").fadeOut(1500);}, 5000);
        });
</script>
Avro_Abir
  • 166
  • 2
  • 16