Need help with simple progress bar

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

john@battlecreekonline.com - 30 Jun 2006 15:36 GMT

Why is my progress bar displayed only after it's reached 100%?

<html>
<style type="text/css">
#bar{
    width: 10px;
    height: 14px;
    color: white;
    font-size: 12px;
overflow: hidden;
    background-color: red;
    padding-left: 5px;
}
</style>

<head>
<script>
function setPercent(num){
    document.getElementById("bar").style.width = num+ "px";
    document.getElementById("bar").innerHTML= num + "%";
}
</script>
</head>

<body>

<div id="bar"></div>

<script>
var i = 0
while ( i < 100)
{
setPercent(i)
i++
}
alert("DONE")
</script>

</body>

</html>

Reply to this Message

Richard Gration - 30 Jun 2006 16:03 GMT

On Fri, 30 Jun 2006 09:36:50 -0500, john wrote:

> Why is my progress bar displayed only after it's reached 100%?

It's not, it just looks like that. Add this delay loop to the setPercent()
function:

for(j=0;j<75000;j++);

Rich

Reply to this Message

Randy Webb - 30 Jun 2006 16:39 GMT

Richard Gration said the following on 6/30/2006 11:03 AM:

> On Fri, 30 Jun 2006 09:36:50 -0500, john wrote:
>
[quoted text clipped - 4 lines]
>
> for(j=0;j<75000;j++);

Did you test that? It doesn't do what you think it does.

Signature

Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Reply to this Message

Richard Gration - 30 Jun 2006 17:02 GMT

> Richard Gration said the following on 6/30/2006 11:03 AM:
>> On Fri, 30 Jun 2006 09:36:50 -0500, john wrote:
[quoted text clipped - 7 lines]
>
> Did you test that? It doesn't do what you think it does.

I did test it. Did you? It does exactly what I think it does in Opera
7.54, which is slow down execution. It might do more ... what do you think
it does?

Reply to this Message

Randy Webb - 30 Jun 2006 17:32 GMT

Richard Gration said the following on 6/30/2006 12:02 PM:

>> Richard Gration said the following on 6/30/2006 11:03 AM:
>>> On Fri, 30 Jun 2006 09:36:50 -0500, john wrote:
[quoted text clipped - 7 lines]
>
> I did test it. Did you?

I wouldn't be asking if I hadn't. Although I didn't have to test it to
know what it was going to do.

> It does exactly what I think it does in Opera 7.54, which is slow
> down execution.

The way it does it is the problem. It doesn't cause a pause, it causes
the UA to become unresponsive because the JS engine is executing code
during that pause. Using setInterval, or setTimeout, to cause a pause
doesn't cause the UA to freeze up.

> It might do more

It does, see above.

> ... what do you think it does?

Test it in IE and the freeze up becomes more obvious.

Signature

Reply to this Message

Richard Gration - 30 Jun 2006 17:49 GMT

I'm perfectly well aware of setInterval and how it's superior due to the
fact that the delay loop causes unresponsiveness. All I wanted was a quick
easy way for the OP to see his progress bar ... err, progress. Hands up, I
missed a golden opportunity for didactic rambling, but there ya go, that's
me.

Reply to this Message

Randy Webb - 30 Jun 2006 16:46 GMT

john@battlecreekonline.com said the following on 6/30/2006 10:36 AM:

> Why is my progress bar displayed only after it's reached 100%?

Because it happens in about 2 ms of time. It gets updated, you just
don't see it being updated.

<script type="text/javascript">
var counter = 0;
function setPercent(num){
counter++;
if (counter>10)
{
document.getElementById("bar").style.width = counter + "px";
}
document.getElementById("bar").innerHTML= counter + "%";
if (counter == 100)
{
window.clearInterval(myInterval)
}
}

var myInterval = window.setInterval('setPercent()',60);
</script>

<div id="bar"></div>

And no, adding a counting loop is not the way to delay JS script.

Signature

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / June 2006

Need help with simple progress bar