A fun one for a brilliant mind out there

I am trying to create a progress bar using an AW DIV. It is created, it displays fine at startup, and during the looping code where I am changing the progress bars width, I know it's getting changed because I am echoing getStyle('width') to windows.status. The problem is that the bar doesn't update, with or without calling refresh() on the progress bar.

Question is, how do you force the browser to re-draw the object?

If I stop the loop in the middle and leave the width set to some value between 1-100 then the bar displays once all code has been executed. It seems the browser waits till all Javascript is done before it actually displays any changes.

Thanks

I think the answer is that you can't. IE even stops an annimated GIF while it is processing a page or part of a page until it is finished. The only annimation that does not get halted is a Flash annimation (which carry's it's own sort of problems) and I don't want to use Flash on this project. There is a cheat that you can do, use the window.status area to write to so you at least can give the user an update that there is processing going on.

Check this..
http://www.dynamicdrive.com/dynamicindex11/xpprogressbar.htm

Thanks, that is a nice looking progress bar but it uses setInterval to control annimation. In IE, everything is haulted while a page (frame) is loading and during Javascript processing, even setInterval (we have an on-screen clock that uses setInterval for it's updates and it gets stopped for the duration of the loading of the page). So the bar would stop working while my page was doing it's processing. That would defeat the purpose of the bar. I was in need of something that would tell the user that something was happenning and a stopped bar would look like the page was hung. I was able to solve my problem with a combination static message and updating the Status window on the bottom of IE (this is not halted during a page load).

I'll keep the link to the bar though, looks nice.

Found an interesting trick recently:

http://www.faqts.com/knowledge_base/view.phtml/aid/1602

Apparently this code allows suspending JavaScript thread and let other browser threads to continue, for example re-painting the screen.

/*

    * This function will not return until (at least)

    * the specified number of milliseconds have passed.

    * It uses a modal dialog.

    */

     function pause(numberMillis) {

        var dialogScript = 

           'window.setTimeout(' +

           ' function () { window.close(); }, ' + numberMillis + ');';

        var result = 

// For IE5.

         window.showModalDialog(

           'javascript:document.writeln(' +

            '"<script>' + dialogScript + '<' + '/script>")');



/* For NN6, but it requires a trusted script.

         openDialog(

           'javascript:document.writeln(' +

            '"<script>' + dialogScript + '<' + '/script>"',

           'pauseDialog', 'modal=1,width=10,height=10');

 */

     }

I have not tested the code but it looks very interesting...

Hmmm... one of the reasons I wanted to draw a progress bar was to show the user that something was happening. But another issue is that I have two frames that are getting re-drawn at the same time and they both go white while the new code is loading and neither of them will paint until the largest frame completely loads. Part of this 'load' is a bunch of JS that gets executed that takes some time. Using the setTimeout, I could delay the start of the JS code for a brief second giving both frames time to at least do an initial paint and clear the white background. I'll give it a try and see what I can do with this. I use seTimeout for things like an on-screen clock but never thought about using it to delay the processing.

A variation of the code listed above solved the problem for me. I will post it at the end of this message. The code as listed did not work in IE and I have the advantage of knowing my application will deploy to IE browsers. Now when I want to update the screen during a JS function I simply need to call this Pause function and it works great.

function pause(numberMillis) {
var s = "script" ;

var dialogScript =
"window.setTimeout(" +
" function () { window.close(); }, " + numberMillis + ");";
var result =
window.showModalDialog(
'javascript:document.writeln(' +
'"<' + s + '>' + dialogScript + '<' + '/' + s + '>")');

}

function redraw(){
window.showModalDialog("javascript:document.writeln('<" + "script" + ">window.close();</" + "script" + ">')");
}

I had to do the + "script" thing because of an ASP parser error.

So what i have is

document.style.cursor = "wait";
redraw();

cursor redraw is identicle to progress bar redraw, so just put redraws in your loops.

Forum search