Introduction
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.
- <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>
Now it is time for the action, our jQuery function.
- <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>
Please note that you need to load the jQuery first. You can get it from the CDN or from your server.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
You can see the demo here : http://www.sibeeshpassion.com
Points of Interest
History
- First version: 01-Dec-2014