Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Refresh DIV Content Without Reloading Page using setTimeout Function

Feb 24, 2015
Introduction

Here I will explain how to use 
jQuery to refresh or reload div content without reloading page for every 10 seconds with example using setTimeout function or jQuery reload or refresh div for every 10 seconds without reloading page or Refresh div content without reloading page using jQuery.

Description:
  
In previous articles I explained Different methods to reload / refresh page using jQueryjQuery reload iframe for every 10 or 5 seconds, jQuery reload or refresh iframe, jQuery different methods to reload or refresh div, Javascript call function for every 5 or 10 seconds using setinterval function and many articles relating to
AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to use jQuery to refresh or reload div content without reloading page for every 10 seconds with example using setTimeout function.

By using setTimeout function we can refresh div content without reloading page for every 10 seconds using jQuery like as shown below


<script type="text/javascript">
$(function () {
setTimeout(function() { $("#testdiv").fadeOut(1500); }, 10000);
$('#btnclick').click(function() {
$('#testdiv').show();
setTimeout(function() { $("#testdiv").fadeOut(1500); }, 10000);
});
})
</script>


If you want to check it in complete example you need to write the code like as shown below


<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 Red;
color: #008000;
padding: 10px;
width: 400px;
font-family:Calibri;
font-size:16pt
}
</style>
</head>
<body>
<input type="button" id="btnclick" value="Show DIV" />
<div class="content" id="testdiv" class="">
Hi, Welcome to Aspdotnet-Suresh.com
It will disappear in 5 seconds!
</div>
</body>
</html>

Live Demo

For live demo check below div it will hide after 5 seconds if you want see it again click on button to show div again it will show div without reloading complete page


Hi, Welcome to Aspdotnet-Suresh.com It will disappear in 5 seconds!

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

1 comments :

Anonymous said...

Hi, can you make codes like that but by using fade in and fade out, i no need the button to fade out, i hope you understand

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.