Render a DIV while loading

[matdumsa]

Hi there!!! I'm wondering what I've did wrong here... I try to do a
gmail-like "loading" red square at top right...

Here is my code:


<div id=loading
style=display:none;background-color:#FF0000;position:absolute;right:0px;top:0px><b><font
color=white><p
style=text-decoration:blink;>Loading</p></b></font></div>

the javascript i have is like this one:

<script>
document.all("loading").style.display = '';
[some processing that takes CPU]
document.all("loading").style.display = 'none';
</script>

When I run this code, it seems to "freeze" the browser thought not
showing the little loading square as it should while processing... If
there anything like document.all("loading").render ???

Thanks!

 

[web.dev]

<script>

Type attribute is required, though by default browsers will typically
fallback to javascript.

document.all("loading").style.display = '';
[some processing that takes CPU]
document.all("loading").style.display = 'none';
</script>

I would say try to avoid the use of document.all. Introduced in IE4,
you could say it's a propietary property though some browsers do
support it. Using document.getElementById method is more widely
supported.

The main problem with your code statement is that you're trying to
show/hide your "loading" message all in one execution. Break them out
into separate functions and you should be fine. For example:

....
toggleLoading();
[your CPU intensive process]
toggleLoading();
....

When I run this code, it seems to "freeze" the browser thought not
showing the little loading square as it should while processing... If
there anything like document.all("loading").render ???

There is no render property.

 

[matdumsa]

Hi, thanks for answering me,

I've tried the "split toggle loading message" into a function like you
suggest but it produce the same result...

now it's like that

<script type="text/javascript">
toggle_load('');
some cpu thing
toggle_load('none')
</script>

<script>

Type attribute is required, though by default browsers will typically
fallback to javascript.

document.all("loading").style.display = '';
[some processing that takes CPU]
document.all("loading").style.display = 'none';
</script>

I would say try to avoid the use of document.all. Introduced in IE4,
you could say it's a propietary property though some browsers do
support it. Using document.getElementById method is more widely
supported.

The main problem with your code statement is that you're trying to
show/hide your "loading" message all in one execution. Break them out
into separate functions and you should be fine. For example:

...
toggleLoading();
[your CPU intensive process]
toggleLoading();
...

When I run this code, it seems to "freeze" the browser thought not
showing the little loading square as it should while processing... If
there anything like document.all("loading").render ???

There is no render property.

 

[Arnaud Diederen]

Hi, thanks for answering me,

I've tried the "split toggle loading message" into a function like you
suggest but it produce the same result...

now it's like that

<script type="text/javascript">
toggle_load('');
some cpu thing
toggle_load('none')
</script>

Hi,

What you probably want is:

<script type="text/javascript">
toggle_load ('');
</script>

<script type="text/javascript">
cpu_intensive_thing ();
</script>

<script type="text/javascript">
toggle_load ('none');
</script>


Hope this helps.

A.