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.
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
really helpful :-) Keep writing brother
ReplyDelete