...

View Full Version : toggle div visibility problem



leftpeg
08-30-2004, 11:20 AM
Hello,

I have the following

function doStuff(){
document.getElementById("PleaseWait").style.visibility = "visible";

<!--lots of code here that takes a while to execute,
basically waiting for data to be returned from the server-->

document.getElementById("PleaseWait").style.visibility = "hidden";

}

but it doesn't work as I'd expect i.e the "PleaseWait" div would appear when I call the function, and then disappear again when the function ends. Instead I don't see the "PleaseWait" div at all.


I tried the following aswell but to no avail

function waitOn(){
document.getElementById("PleaseWait").style.visibility = "visible";
}
function waitOff(){
document.getElementById("PleaseWait").style.visibility = "hidden";
}


function doStuff(){
waitOn();

<!--lots of code here that takes a while to execute,
basically waiting for data to be returned from the server-->

waitOff();

}

Any ideas or pointers as to what is going on would be appreciated.

Cheers.

jamescover
08-30-2004, 11:44 AM
You're probably invoking the function before the div has been embedded in the page.




-james

leftpeg
08-30-2004, 11:55 AM
No, the div is definitely in the page.

looka
08-30-2004, 12:34 PM
perhaps u should use single quotes, but it definitly wont work if u have the same id or the same name of function on the page as this 'pleasewait'

leftpeg
08-31-2004, 07:35 AM
I think it's a timing issue, because if I put an alert statement after making the div visible, the div does appear. Why?

jamescover
08-31-2004, 08:00 AM
I think it's a timing issue, because if I put an alert statement after making the div visible, the div does appear.


That's what I said in my first post. (Maybe, if I said "displayed," instead of embedded, it would have been clearer):


You're probably invoking the function before the div has been embedded in the page.


You haven't supplied enough code for anyone to help you. We have no idea how or when you are invoking the function.



-james

leftpeg
08-31-2004, 10:12 AM
I invoke the function when I click on an image in my document.
The PleaseWait div is in the document but it's visibility is set to hidden.

If I don't call the waitOff() function at the end of the doStuff() function, the PleaseWait div is visible in all it's glory, so i don't think it's a problem with the div being embedded or not. It's definitely there.

It seems to me that the browser (IE 6) waits for the doStuff() function to "do it's stuff" and then display the results. Is there anyway around this i.e display the results of the doStuff() function as it goes along?

Cheers.

jamescover
08-31-2004, 10:38 AM
Well, at least, we've established that you aren't doing this when the page first loads. But you still haven't provided sufficient information for someone to help. doStuff() tells me absolutely nothing. Do what stuff? Are you loading a new page, calling a php script...what?


-james

leftpeg
08-31-2004, 11:28 AM
I think what doStuff() does is incidental to the problem which boils down to "Why does the "PleaseWait" div not become visible the moment doStuff() is called?"

H-street
08-31-2004, 08:58 PM
leftpeg is the waiton and the waitoff in the same function?

i've found that doing something exactly like you are doing doesn't work like you'd expect..

essentially if it is in the same function what is happening is it is turning it on and off .. it is just doing it so fast that you can't see it..

its hard to explain but the function doesn't wait for the data that you are loading in the function to before it finishes

the reason it works when you put an alert is because it physically stops the function in between the show and the hide.

i had the same problem with my image loader and i never really found a good way (the onload function doesn't even work poperly)..

a couple of things you may try if you are loading a new DIV or new HTML is to embed a callback function in the new url or data (i can't do that with my image loading) that would call your hidwait() function when it is done loading.

RoyW
08-31-2004, 09:17 PM
While doStuff() is running no browser updates are occurring. For example if your code moved the element you wouldn't see it move, you would just see it in the final position. You need the function that makes the div visible to execute and return before the processing begins. You can use setTimeout to achieve this.


<html>
<head>
<script>
function waitOn(){
document.getElementById("PleaseWait").style.visibility = "visible";
}
function waitOff(){
document.getElementById("PleaseWait").style.visibility = "hidden";
}


function doStuff(){
waitOn();
setTimeout("doStuff2()", 20);
}


function doStuff2(){
/* lots of code here that takes a while to execute,
basically waiting for data to be returned from the server */
for(var i=0 ; i<10000; i++)
status = i;
waitOff();
}
</script>
</head>
<body>
<div id="PleaseWait" style="position:absolute;left:100px;top:100px;visibility:hidden">
Please wait while doStuff() runs
</div>
<a href="#" onclick="doStuff()">Execute</a>
</body>
</html>

leftpeg
09-01-2004, 03:43 AM
Fair play Roy, that works wonders.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum