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