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

This article explains how to load div content one by one. You can do this by adding some plug-ins, but it is always better to avoid the unwanted plug-ins. So I have found how to do it and thought to share it with you all.

Background

I have been working with my website (www.sibeeshpassion.com) for the past few days and I have the need to show only one item (quote) of many (quotes) at a time in a div.

Please provide your valuable suggestions for improvement.

Using the Code

First of all we need the contents. So you can get the contents as follows.
[html]
<div id=“fades”>
<div>
<h3>
“Welcome to <b>Sibeesh|Passion</b>. Thanks a lot for visiting. Come again!!!”
</h3>
<p style=“text-align: right;”>
– Sibeesh Venu
</p>
</div>
<div>
<h3>
“If debugging is the process of removing software bugs, then programming must be
the process of putting them in. “
</h3>
<p style=“text-align: right;”>
– Edsger Dijkstra
</p>
</div>
<div>
<h3>
“Walking on water and developing software from a specification are easy if both
are frozen. “
</h3>
<p style=“text-align: right;”>
– Edward V Berard
</p>
</div>
<div>
<h3>
“It’s not at all important to get it right the first time. It’s vitally important
to get it right the last time.”
</h3>
<p style=“text-align: right;”>
– Andrew Hunt and David Thomas
</p>
</div>
<div>
<h3>
“First, solve the problem. Then, write the code. “
</h3>
<p style=“text-align: right;”>
– John Johnson
</p>
</div>
<div>
<h3>
“Should array indices start at 0 or 1? My compromise of 0.5 was rejected without,
I thought, proper consideration. “
</h3>
<p style=“text-align: right;”>
– Stan Kelly-Bootle
</p>
</div>
<div>
<h3>
“Always code as if the guy who ends up maintaining your code will be a violent psychopath
who knows where you live. “
</h3>
<p style=“text-align: right;”>
– Rick Osborne
</p>
</div>
<div>
<h3>
“Any fool can write code that a computer can understand. Good programmers write
code that humans can understand. “
</h3>
<p style=“text-align: right;”>
– Martin Fowler
</p>
</div>
<div>
<h3>
“Software sucks because users demand it to. “
</h3>
<p style=“text-align: right;”>
– Nathan Myhrvold
</p>
</div>
<div>
<h3>
“Beware of bugs in the above code; I have only proved it correct, not tried it.
“
</h3>
<p style=“text-align: right;”>
– Donald Knuth
</p>
</div>
<div>
<h3>
” There is not now, nor has there ever been, nor will there ever be, any programming
language in which it is the least bit difficult to write bad code. “
</h3>
<p style=“text-align: right;”>
– Flon’s Law
</p>
</div>
</div>
[/html]

Now it is time for the action, our jQuery function.
[js]
<script type=“text/javascript”>
$(document).ready(function () {
$(“body”).floatingShare();
// First hide them all
$(“#fades div”).hide();
function fades($div, cb) {
$div.fadeIn(10000, function () {
$div.fadeOut(10000, function () {
var $next = $div.next();
if ($next.length > 0) {
fades($next, cb);
}
else {
// The last element has faded away, call the callback
cb();
}
});
});
}
function startFading($firstDiv) {
fades($firstDiv, function () {
startFading($firstDiv);
});
}
startFading($(“#fades div:first-child”));
});
</script>
[/js]

Please note that you need to load the jQuery first. You can get it from the CDN or from your server.

[js]
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
[/js]

Points of Interest

jQuery, CSS, HTML

History

First version: 01-Dec-2014