Using JQuery, how can I make a <div> appear, then add some html, then remove the html and then hide the div?

Question

<div id="message" style="display: none">
 <!-- Here I want to place a message. It should be visible for 3 seconds.Then clear the      div to get ready for the next message. -->
</div>

How can I do the following using JQuery ?

1.Insert a message into div with id="message" and make div visible. 2.Make the message visible for 3 seconds. 3.Remove the content of div "message". 4.Hide the div and then if necessary start with step 1.

Thank you in advance.

Answer 1

Here's how I do it:

$.msg = function(text, style)
{
    style = style || 'notice';           //<== default style if it's not set

    //create message and show it
    $('<div>')
      .attr('class', style)
      .html(text)
      .fadeIn('fast')
      .insertBefore($('#page-content'))  //<== wherever you want it to show
      .animate({opacity: 1.0}, 3000)     //<== wait 3 sec before fading out
      .fadeOut('slow', function()
      {
        $(this).remove();
      });
};

---

Examples:

$.msg('hello world');
$.msg('it worked','success');
$.msg('there was a problem','error');

---

How it works

1. creates a div element
2. sets the style (so you can change the look)
3. sets the html to show
4. starts fading in the message so it is visible
5. inserts the message where you want it
6. waits 3 seconds
7. fades out the message
8. removes the div from the DOM -- no mess!

---

Bonus Sample Message Styling:

.notice, .success, .error {padding:0.8em;margin:0.77em 0.77em 0 0.77em;border-width:2px;border-style:solid;}
.notice {background-color:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background-color:#E6EFC2;color:#264409;border-color:#C6D880;}
.error {background-color:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}

```

Answer 2

You can do something like this:

var $messageDiv = $('#message'); // get the reference of the div
$messageDiv.show().html('message here'); // show and set the message
setTimeout(function(){ $messageDiv.hide().html('');}, 3000); // 3 seconds later, hide
                                                             // and clear the message

Answer 3

This is a small script which cycles through messages with an interval of 3 seconds. Maybe it's not what you need but i hope it helps you for achive what you want.

var messages = [
  "test message 0",
  "test message 1",
  "test message 2",
  "test message 3"
];

$(function() {
  var msgIndex = 0;
  setInterval(function() {
    $msgDiv = $("#message");
    $msgDiv.fadeOut(200, function() {
      $msgDiv.html(messages[msgIndex]).fadeIn(500);
      if(msgIndex >= messages.length)
        msgIndex = msgIndex % messages.length;
    });
  }, 3000);
});

Answer 4

Take a look at jGrowl . Very nice and configurable.