Force drawing changes?

[beatdown]

Hi all,
I have a set of Javascript functions that dinamically update the
contents of a HTML <selectelement, depending on the value of another
<select>. For easy understanding: I select a region/state in one
<selectand then I update the list of towns in that region in the
other <select>.

Some regions have lots of towns and there is a little wait until the
browser updates completely the <select>. I want to show a "Loading..."
message, but I cannot make it work.
I try to show/hide a div with this message using its CSS property
display. But the browser only shows that message if I make an
alert("pause") anywhere after I have changed the CSS attribute.
It seems like the alert forces the browser to draw the changes... Is
there any way to force that drawing?

Thanks

[Vincent van Beveren]

Some regions have lots of towns and there is a little wait until the

browser updates completely the <select>. I want to show a "Loading..."
message, but I cannot make it work.
I try to show/hide a div with this message using its CSS property
display. But the browser only shows that message if I make an
alert("pause") anywhere after I have changed the CSS attribute.
It seems like the alert forces the browser to draw the changes... Is
there any way to force that drawing?

Hi Ruben,

The problem is that while a script is running the browser is less likly
to update the screen contents. An alert pauses the script, giving the
browser time to redraw. Best thing to do would be to use a timer to
disptach the actual command to load the content. So:

function searchTown() {
...show div layer
window.setTimeout('updateTown()', 10);
}

function updateDown() {
... expenstive routine
... hide div layer
}

Good luck,
Vincnet

[Erwin Moller]

beatdown wrote:

Hi all,
I have a set of Javascript functions that dinamically update the
contents of a HTML <selectelement, depending on the value of another
<select>. For easy understanding: I select a region/state in one
<selectand then I update the list of towns in that region in the
other <select>.

Some regions have lots of towns and there is a little wait until the
browser updates completely the <select>. I want to show a "Loading..."
message, but I cannot make it work.
I try to show/hide a div with this message using its CSS property
display. But the browser only shows that message if I make an
alert("pause") anywhere after I have changed the CSS attribute.
It seems like the alert forces the browser to draw the changes... Is
there any way to force that drawing?

Hi,

I never saw that behaviour before, but that doesn't stop me giving advise
about it.
;-)

You could try to give the browser a pause by strating your heavy calculation
a little later.
use window.setTimeout("heavyCalc();",50);

the 50 are the number of milliseconds before the function named heavyCalc()
is called.

Maybe that helps, give it a shot.

Regards,
Erwin Moller

>
Thanks

[Randy Webb]

Vincent van Beveren said the following on 7/24/2006 10:26 AM:

>Some regions have lots of towns and there is a little wait until the
browser updates completely the <select>. I want to show a "Loading..."
message, but I cannot make it work.
I try to show/hide a div with this message using its CSS property
display. But the browser only shows that message if I make an
alert("pause") anywhere after I have changed the CSS attribute.
It seems like the alert forces the browser to draw the changes... Is
there any way to force that drawing?

Hi Ruben,

The problem is that while a script is running the browser is less likly
to update the screen contents.

Except that it's not "less likely", it flat out won't update it until
the script finishes. Adding the setTimeout doesn't "give it time to
update", it finishes the script block, then it updates, then it executes
a second script block.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/