I have a small javascript/html code below that demonstrates that
problem I'm having in a larger program. I've tried all kinds of things
to get it to work, but it just won't do what I want. I've tried
setTimeout, setInterval. In this dumb, but valid example, i want to
display an iframe that loads google. Before it loads I want to display
a 'processing' indicator in green in the middle of the window. Then,
when it is done, it is to turn off the indicator. What is happening is
that in the doit() function, the processing(true) statement doesn't
'appear' to run until after the iframe loads. Then it calls the
processing(false). So, the processing(true) and processing(false)
'seem' like they are back to back and you never see the 'processing'
message. Simple question, referencing the doit() function, how do I
show the 'processing' div, load the iframe, then hide the 'processing'
div. In my larger app, I'm not using iframes, but I am doing some ajax
stuff that takes some computing time on the server and I want the user
to know that it's doing something.
here is the code
----------------------------------
<html>
<script>
function processing( p_flag )
{
var v_processingIndicator = document.getElementById( 'Processing'
);
if( p_flag ) {
if( ! v_processingIndicator ) {
v_processingIndicator = document.createElement( "div" );
v_processingIndicator.id = 'Processing';
v_processingIndicator.style.position = 'absolute';
v_processingIndicator.style.width = '300px';
v_processingIndicator.style.left =
(document.body.clientWidth/2) - 150;
v_processingIndicator.style.top =
(document.body.clientHeight/2);
v_processingIndicator.style.zIndex = 10000;
v_processingIndicator.innerHTML =
"<center>Processing...</center>";
v_processingIndicator.style.visibility = 'hidden';
v_processingIndicator.style.background = 'lightgreen';
document.body.appendChild( v_processingIndicator );
}
v_processingIndicator.style.visibility = 'visible';
} else {
v_processingIndicator.style.visibility = 'hidden';
}
}
function doit()
{
processing( true );
document.getElementById( 'iframe' ).src = 'http://www.google.com';
processing( false );
}
</script>
<body>
<iframe id='iframe' width='600' height='200'></iframe>
</body>
<script>doit();</script>
</html>
-------------------------------
thanks in advance,
gkelly
