Question

I am having hard time finding a way to display a loading image in a Div right next to a control they have clicked while waiting for a request.I am using a UpdateProgress Bar but it is supposed to be placed at a certain place on the page.I want to display it next to any control they select.Just like how it is on Facebook.

Answer 1

Closest thing I can think of is a absolute positioned div which is placed next to each element. However it doesn’t seem too valid since if the loading thingie is to the right of every progress link, it might overlap etc.

I’m quite sure that Facebook made all these progress bars prepositioned and hidden, and not just one div for all of them.

I guess you could try something like:

<div id="progress_bar"></div>
<style type="text/css">
    div#progress_bar {
        background: url('the_url_for_your_gif.gif') no-repeat center;
        display: none;
        height: 20px; /* Adjust yourself */
        position: absolute;
        width: 30px; /* Adjust yourself */
    }
</style>
<script type="text/javascript">
    var extra = 10; /* 10px extra for space */
    var prog_top = 0;
    var prog_left = 0;
    $(function() {
        $('a').live('click', function() {
            var h = $(this).offset();
            prog_top = h.top;
            prog_left = (h.left + $(this).width() + extra);
        });
    });

    function progress_thingie(loading) {
        if (loading)
            $('div#progress_bar').css({
                'top' : prog_top,
                'left' : prog_left
            });
        $('div#progress_bar').showToggle(loading);
    }
</script>

Basicly this would save positions on every <a> you press and use those positions for the progress div.

Simply call the javascript function progress_thingie() and send a TRUE or FALSE to it, depending on if it’s loading or done.