In this post, we will discuss how we can load or refresh some contents to our container div in a particular interval of time. To do this we will be using normal setInterval in JQuery. We will create an element which is to be considered as our container div. And by using setInterval , we will refresh the content which we creates dynamically to our container div. I hope you will like this.
Using the code
To work with, load your jQuery reference first. I am using following version of JQuery.
[js]
<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
[/js]
Create a container div
[html]
<div id=’container’></div>
[/html]
So now we can do our script part.
Implementation
Please find the below scripts.
[js]
$(document).ready(
function() {
setInterval(function() {
var randomnumber = Math.floor(Math.random() * 20);
var html=”;
for(i=0;i<randomnumber;i++)
{
html+='<p>’+ randomnumber+ ‘</p>’;
}
$(‘#container’).html(html);
}, 1000);
});
[/js]
As you can see, we are creating some random numbers which is less than 20.
[js]
var randomnumber = Math.floor(Math.random() * 20);
[/js]
And assigning the random value to the dynamically crated p tag.
[html]
html+='<p>’+ randomnumber+ ‘</p>’
[/html]
Now we need to style our p tag as follows.
[css]
p {
border: 1px solid #ccc;
border-radius: 5px;
height: 18px;
width: 18px;
padding: 5px;
text-align: center;
background-color: #999;
color: #fff;
float: left;
}
[/css]
That is all, it is time to run our code.
jsfiddle link: Loading or refreshing a div content jsfiddle
Output
Conclusion
I hope you liked this article. Please share me your valuable feedback. Thanks in advance.
Kindest Regards
Sibeesh Venu