Introduction:
In this article we will learn how to refresh or reload div content without
reloading page for every 10 seconds with example using setTimeout
function of Jquery. Div will be disappearing after 5 second and it will be appear
on clicking “Show Div Button”.
<script type="text/javascript">
$(function ()
{
setTimeout(function() { $("#testdiv").fadeOut(1500);
}, 10000);
$('#btnclick').click(function() {
$('#testdiv').show();
setTimeout(function() { $("#testdiv").fadeOut(1500);
}, 10000);
});
})
</script>
Full Source
Code for sample Application:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Refresh DIV Elements after 10
seconds</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function
() {
setTimeout(function
() { $("#testdiv").fadeOut(1500);
}, 5000);
$('#btnclick').click(function () {
$('#testdiv').show();
setTimeout(function
() { $("#testdiv").fadeOut(1500);
}, 5000);
});
})
</script>
<style type="text/css">
.content
{
border: 2px
solid grey;
color: #000;
padding: 10px;
width: 200px;
font-family:Calibri;
font-size:16pt
}
</style>
</head>
<body>
<fieldset style="width:250px">
<legend><strong>Refresh
Div Content Using Jquery</strong></legend>
<input type="button"
id="btnclick"
value="Show
DIV" />
<div class="content"
id="testdiv"
>
Hi,
This Div will be <br
/>disappear in 5 seconds!
</div></fieldset>
</body>
</html>
0 comments:
Post a Comment