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

History