Loading Div Content One by One Using Pure jQuery

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.

  1. <div id="fades">  
  2.     <div>  
  3.         <h3>  
  4.             "Welcome to <b>Sibeesh|Passion</b>. Thanks a lot for visiting. Come again!!!"  
  5.         </h3>  
  6.         <p style="text-align: right;">  
  7.             - Sibeesh Venu  
  8.         </p>  
  9.     </div>  
  10.     <div>  
  11.         <h3>  
  12.             "If debugging is the process of removing software bugs, then programming must be  
  13.             the process of putting them in. "  
  14.         </h3>  
  15.         <p style="text-align: right;">  
  16.             - Edsger Dijkstra  
  17.         </p>  
  18.     </div>  
  19.     <div>  
  20.         <h3>  
  21.             "Walking on water and developing software from a specification are easy if both  
  22.             are frozen. "  
  23.         </h3>  
  24.         <p style="text-align: right;">  
  25.             - Edward V Berard  
  26.         </p>  
  27.     </div>  
  28.     <div>  
  29.         <h3>  
  30.             "It's not at all important to get it right the first time. It's vitally important  
  31.             to get it right the last time."  
  32.         </h3>  
  33.         <p style="text-align: right;">  
  34.             - Andrew Hunt and David Thomas  
  35.         </p>  
  36.     </div>  
  37.     <div>  
  38.         <h3>  
  39.             "First, solve the problem. Then, write the code. "  
  40.         </h3>  
  41.         <p style="text-align: right;">  
  42.             - John Johnson  
  43.         </p>  
  44.     </div>  
  45.     <div>  
  46.         <h3>  
  47.             "Should array indices start at 0 or 1? My compromise of 0.5 was rejected without,  
  48.             I thought, proper consideration. "  
  49.         </h3>  
  50.         <p style="text-align: right;">  
  51.             - Stan Kelly-Bootle  
  52.         </p>  
  53.     </div>  
  54.     <div>  
  55.         <h3>  
  56.             "Always code as if the guy who ends up maintaining your code will be a violent psychopath  
  57.             who knows where you live. "  
  58.         </h3>  
  59.         <p style="text-align: right;">  
  60.             - Rick Osborne  
  61.         </p>  
  62.     </div>  
  63.     <div>  
  64.         <h3>  
  65.             "Any fool can write code that a computer can understand. Good programmers write  
  66.             code that humans can understand. "  
  67.         </h3>  
  68.         <p style="text-align: right;">  
  69.             - Martin Fowler  
  70.         </p>  
  71.     </div>  
  72.     <div>  
  73.         <h3>  
  74.             "Software sucks because users demand it to. "  
  75.         </h3>  
  76.         <p style="text-align: right;">  
  77.             - Nathan Myhrvold  
  78.         </p>  
  79.     </div>  
  80.     <div>  
  81.         <h3>  
  82.             "Beware of bugs in the above code; I have only proved it correct, not tried it.  
  83.             "  
  84.         </h3>  
  85.         <p style="text-align: right;">  
  86.             - Donald Knuth  
  87.         </p>  
  88.     </div>  
  89.     <div>  
  90.         <h3>  
  91.             " There is not now, nor has there ever been, nor will there ever be, any programming  
  92.             language in which it is the least bit difficult to write bad code. "  
  93.         </h3>  
  94.         <p style="text-align: right;">  
  95.             - Flon's Law  
  96.         </p>  
  97.     </div>  
  98. </div>  
Now it is time for the action, our jQuery function.
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $("body").floatingShare();  
  4.         // First hide them all  
  5.         $("#fades div").hide();  
  6.         function fades($div, cb) {  
  7.             $div.fadeIn(10000, function () {  
  8.                 $div.fadeOut(10000, function () {  
  9.                     var $next = $div.next();  
  10.                     if ($next.length > 0) {  
  11.                         fades($next, cb);  
  12.                     }  
  13.                     else {  
  14.                         // The last element has faded away, call the callback  
  15.                         cb();  
  16.                     }  
  17.                 });  
  18.             });  
  19.         }  
  20.         function startFading($firstDiv) {  
  21.             fades($firstDiv, function () {  
  22.                 startFading($firstDiv);  
  23.             });  
  24.         }  
  25.         startFading($("#fades div:first-child"));  
  26.     });  
  27. </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

  • jQuery, CSS, HTML

History

  • First version: 01-Dec-2014