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.

<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

• jQuery, CSS, HTML

History

• First version: 01-Dec-2014