Hello Everyone, I am going to share the how to auto refresh a particular div using jQuery.
In jQuery, we are using setTimeout() function for auto refresh a div without reloading your page each and every 5 seconds.
Click for live demo
The HTML code sample as given below.
In jQuery, we are using setTimeout() function for auto refresh a div without reloading your page each and every 5 seconds.
Click for live demo
The HTML code sample as given below.
1
2
3
4
5
6
7
8
| //The HTML code sample <div> <input type="button" id="btnShow" value="Click for Show div" /> </div> <div class="fonts" id="divShow"> <h2>Hi, Welcome you to code-sample.com.</h2> It will disappear in 5 seconds! </div> |
//The HTML code sample
<div>
<input type="button" id="btnShow" value="Click for Show div" />
</div>
<div class="fonts" id="divShow">
<h2>Hi, Welcome you to code-sample.com.</h2> It will disappear in 5 seconds!
</div>
The jQuery code sample as given below.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
| //The jQuery code sample $(function() { //This setTimeout function execute or call automatically when 5 second completed. setTimeout(function() { $("#divShow").fadeOut(1500); }, 5000); $('#btnShow').click(function() { //This is used for show the div. $('#divShow').show(); //This setTimeout function execute when click on show div buton and hide automatically. setTimeout(function() { $("#divShow").fadeOut(1500); }, 5000); }); }); |
//The jQuery code sample
$(function() {
//This setTimeout function execute or call automatically when 5 second completed.
setTimeout(function() {
$("#divShow").fadeOut(1500);
}, 5000);
$('#btnShow').click(function() {
//This is used for show the div.
$('#divShow').show();
//This setTimeout function execute when click on show div buton and hide automatically.
setTimeout(function() {
$("#divShow").fadeOut(1500);
}, 5000);
});
});
The live full code sample as given below.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| //The full live code sample <head> <style> .fonts { border: 2px solid green; color: green; } </style> <script type="text/javascript"> $(function() { //This setTimeout function execute or call automatically when 5 second completed. setTimeout(function() { $("#divShow").fadeOut(1500); }, 5000); $('#btnShow').click(function() { //This is used for show the div. $('#divShow').show(); //This setTimeout function execute when click on show div buton and hide automatically. setTimeout(function() { $("#divShow").fadeOut(1500); }, 5000); }); }); </script></head><body> <div> <input type="button" id="btnShow" value="Click for Show div" /> </div> <div class="fonts" id="divShow"> <h2>Hi, Welcome you to code-sample.com.</h2> It will disappear in 5 seconds! </div></body></html> |
//The full live code sample
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<style>
.fonts {
border: 2px solid green;
color: green;
}
</style>
<script type="text/javascript">
$(function() {
//This setTimeout function execute or call automatically when 5 second completed.
setTimeout(function() {
$("#divShow").fadeOut(1500);
}, 5000);
$('#btnShow').click(function() {
//This is used for show the div.
$('#divShow').show();
//This setTimeout function execute when click on show div buton and hide automatically.
setTimeout(function() {
$("#divShow").fadeOut(1500);
}, 5000);
});
});
</script>
</head>
<body>
<div>
<input type="button" id="btnShow" value="Click for Show div" />
</div>
<div class="fonts" id="divShow">
<h2>Hi, Welcome you to code-sample.com.</h2> It will disappear in 5 seconds!
</div>
</body>
</html>
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|