Question

More a question about CSS, than about jQuery.

I display top 7 players and weekly leaders at the bottom of my Facebook game. The very bottom line displays a random hint in italics font:

That #top div-block is updated every 10 minutes by the following jQuery code:

<script type="text/javascript">
$(function() {
        setInterval(function() {
                $.get("/preftop.html", function(data) {
                        $("#top").html(data);
                });
        }, 10 * 60 * 1000);
});
</script>


<div id="top">
<table width="700" bgcolor="#eeeeee">
......top7.......
</table>
<p>Random hint</p>
</div>

It works well, but users aren’t given any indication, that the block will be updated again in next 10 minutes.

I’ve looked at ajaxload.info – those are cool images, but not very suitable here, because the updates aren’t happening very often.

So I’d like to display a horizontal bar growing from 0 to 700px every minute (for that I’ll change my code to run every 1 * 60 * 1000).

My question is how would you do such a bar? Is there maybe a way to make a yellow bar displayed underneath the random hint line at the bottom of the div?

(And I know there is at least 1 jQuery plugin for displaying a progress bar, but it is not suitable here, because the screen space is limited, it would look too clumsy).

Hoping for good ideas from CSS wizards! Alex

UPDATE:

Can’t I add id=”hint” to the <p>Random hint</p> and a yellow bar underneath:

#hint {
    background-image:url(yellow.gif);
}

and then somehow (that’s what missing) increas the width of that yellow rectangle every minute? Is there a width for background images?

Answer 1

Have a look at this Progressbar Plugin.

It is very light and easy to use. It also doesn’t use that much space.

Edit:
Link added