Using JQuery, how can I make a <div> appear, then add some html, then remove the html and then hide the div?
16,713
Solution 1
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
Solution 2
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
- creates a div element
- sets the style (so you can change the look)
- sets the html to show
- starts fading in the message so it is visible
- inserts the message where you want it
- waits 3 seconds
- fades out the message
- 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;}
```
Solution 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);
});
Author by
iHello
Updated on July 10, 2022Comments
-
iHello almost 2 years
<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.