Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Mar 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    toggle div visibility problem

    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.

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're probably invoking the function before the div has been embedded in the page.




    -james
    Last edited by jamescover; 08-30-2004 at 06:57 PM.
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #3
    New Coder
    Join Date
    Mar 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, the div is definitely in the page.

  • #4
    Regular Coder
    Join Date
    Aug 2004
    Posts
    280
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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'

  • #5
    New Coder
    Join Date
    Mar 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think it's a timing issue, because if I put an alert statement after making the div visible, the div does appear. Why?

  • #6
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #7
    New Coder
    Join Date
    Mar 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #9
    New Coder
    Join Date
    Mar 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?"

  • #10
    New Coder
    Join Date
    Nov 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    Atlanta, GA.
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    <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>
    The answer does not come from thinking outside the box, it comes from realizing the truth :-
    "There Is No Box". [JavaScript Gadgets'n'Gizmos][JavaScript-FX]

  • #12
    New Coder
    Join Date
    Mar 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fair play Roy, that works wonders.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •