jQuery Auto Refresh div

This lesson will show to how to refresh the DIV as par the user defined time, as we seen this concept in lot of websites like FB updates , twitter tweets and skill pages posts , it is very simple and easy to develop, i am showing it in two examples. we can do this using setInteval().

HTML

take two DIV's and give the ID's two both one is #refresh and #refresh1

<div id="refresh">
</div>


<div id="refresh1">
</div>

Javascript

the first example is shows you refresh the DIV every 1000 milliseconds, we write the function inside the setInterval(code,delay) as a first parameter and integer for second parameter, here i am loading a file using .load() method in #refresh div and applied fadein/out methods.

the second example is shows you refresh the DIV every 3000 milliseconds, we write the custom
function called reFresh(), here i am not loading any file just assigned the text to the #refresh1 div using .text() method and applied fadein/out methods. now i take the setInterval() function and assigned the reFresh() as a first parameter and second will be integer. 

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(function(){
 
 setInterval(function(){
  
 $('#refresh').load("update.php").fadeIn("slow").fadeOut("slow");
  
 },1000);
 
 
 
 function reFresh(){
  
 $('#refresh1').text("Lesson Cup Programming Blog").fadeIn("slow").fadeOut("slow"); 
  
 }
 
 setInterval(function(){reFresh()},3000);
 
});


</script>

CSS

<style>

#refresh{ padding:5px; width:500px; margin:0 auto; margin-top:20px; font-weight:bold; font-size:16px; background-color:#0CC; display:none;}


#refresh1{ padding:5px; width:500px; margin:0 auto; margin-top:20px; font-weight:bold; font-size:16px; background-color:#F90; display:none;}

</style>

Live Demo