Moving DIVs don't happen until end of function

[toby]

Hi there, can anyone help please?

I have a calendar view made up of div tags for each day. I can
highlight a number of days in a column by clicking on one and holding
down shift and clicking on another one. each div tag is called "boxX_Y"
where Y is the column and X is the row. The javascript knows the first
clicked box, and the second and changes the style.className for the
boxes in between based on the Y value.

Trouble is, when selecting about 30 boxes it takes a while to change
the style.className, so I would like to display a message to say
"Please wait". I've done this by creating another div tag called
wait_message, and set the visibility to "visible" when the function to
highlight the boxes is called. However, the wait message box isn't
displayed until the loop for changing the classNames has finished, even
though the wait_message visibility code is above the loop.

Is there any way to make the code take effect straight away rather than
waiting for the whole function to be computed?

Toby

[VK]

Is there any way to make the code take effect straight away rather than

waiting for the whole function to be computed?

Current UA's (even the most advanced ones) are having rather weak
graphics engines; so for "economy" purposes they update the graphics
context only after the end of the current script execution (and then
all changes applied in one bulk).
In order to overcome this you'll have to apply the "exit - re-enter"
trick using window.setTimeout:

function waitForLoad() {
displayWaitMessage();
window.setTimeout(proceedWithTheRest, 100);
}

function proceedWithTheRest() {
// the rest of operations
}

If waitForLoad / proceedWithTheRest are just stay-alone functions then
you are on the damn lucky side, this is all what you need.

If waitForLoad / proceedWithTheRest are methods of some custom object
then such "breaks" will reset [this] pointer back to Global object, so
you'll need different tricks to nail it somehow to the execution
context. There is a great number of such tricks, do not hesitate to ask
here.

[adamraney]

If waitForLoad / proceedWithTheRest are methods of some custom object

then such "breaks" will reset [this] pointer back to Global object

One way around this is to create an anonymous function in the
setTimeout that calls the custom object's method, ie:

setTimeout(function(){myObject.someMethod(argument )}, 100);

This way, rather than setTimeout calling the method form its scope, it
simply tells the object to run its own method, placing it back into the
correct 'this' scope of the custom object.

This is also a good way to pass arguments to functions via setTimeout.

[Richard Cornford]

to**@mkkbb.f9.co.uk wrote:
<snip>

Trouble is, when selecting about 30 boxes it takes a while
to change the style.className, so I would like to display
a message to say "Please wait".

<snip>

Setting 30 class names really should not take a significant amount of
time. If you were setting 1000 an issue would not be unexpected but 30 is
just too few to be experiencing problems. it seems likely that improving
the efficiency of your code would negate this issue entirely.

Richard.

[toby]

VK wrote:

In order to overcome this you'll have to apply the "exit - re-enter"
trick using window.setTimeout:

Thanks very much. Answered all my queries. I was trying to update
hundreds of cells rather than tens, so it wasn't really my code being
inefficient, but i've made comprises so that it works well now.

Great idea with the timeouts VK, i'll keep that in mind for future
projects too.

[RobG]

to**@mkkbb.f9.co.uk wrote:

VK wrote:

In order to overcome this you'll have to apply the "exit - re-enter"
trick using window.setTimeout:

Thanks very much. Answered all my queries. I was trying to update
hundreds of cells rather than tens, so it wasn't really my code being
inefficient, but i've made comprises so that it works well now.

My ancient 800MHz G4 can do 480 divs in about 0.12 seconds with
unoptimised code, you should be able to do a few hundred without any
need for a "please wait" sign. I'll post the code if you want.

Great idea with the timeouts VK, i'll keep that in mind for future
projects too.

A common trick, search the archives.

--
Rob

[ASM]

RobG a écrit :

to**@mkkbb.f9.co.uk wrote:

>Thanks very much. Answered all my queries. I was trying to update
hundreds of cells rather than tens, so it wasn't really my code being
inefficient, but i've made comprises so that it works well now.

My ancient 800MHz G4 can do 480 divs in about 0.12 seconds with
unoptimised code, you should be able to do a few hundred without any
need for a "please wait" sign. I'll post the code if you want.

all depends what you do, no ?

Example (very very heavy file of 3228 octets ... or 4ko) :
http://perso.orange.fr/stephane.mori...caracteres.htm
more than 1mn to display (G4 1.25Mhz) ! !

I don't think it is a problem with JS but much more a problem of
quantity of work the browser has to do to display tables.