0

I'm using the following function to show and hide divs that contain loading images when the browser is working. It works fine in Firefox. In Chrome though it doesn't do this. The screen remains static with the button that begins the function calls in the "clicked" state, even though the mouse is not over it. If I use the developer tools to set breakpoints then I see the setVisibility() function get called and the loader divs get shown and hidden properly.

The function looks like this:

    function setVisibility(id, visibility) {
        if(document.getElementById(id)){
            document.getElementById(id).style.display = visibility;
        }
    }

And here is an example of a show/hide call:

    setVisibility("loader", "inline");
    setVisibility("loader", 'none');

Any ideas?

Peter K
  • 13
  • 4

2 Answers2

0

i hope this helps

I had the same issue and i really don't know how it's happening, but it can be fixed using a small delay in code like follows.

RELACE YOUR FUNCTION WITH THIS CODE

function setVisibility(id, visibility) {
        if(document.getElementById(id)){
            setTimeout(function(){
               document.getElementById(id).style.display = visibility;
            }, 1);
             // please note i have added a delay of 1 millisecond with js timeout function which runs almost same as code with no delay.

        }
    }
Rameez Rami
  • 5,322
  • 2
  • 29
  • 36
0

I'm not sure if you know much about jquery but I would include the latest jquery and use the .show() and .hide() methods...

http://docs.jquery.com/Show

n/m this tidbit, you're using display, the visibility function name through me off.

Rick Kukiela
  • 1,135
  • 1
  • 15
  • 34
  • Also, are you calling this to show during an ajax request? if so make sure you're setting the visibility before the ajax request is sent, then onsuccess hide it again. – Rick Kukiela Sep 06 '11 at 21:04
  • I'm not calling this during an ajax request.I would use jQuery's .show() and .hide() methods but they mess with the formatting of the page. – Peter K Sep 07 '11 at 14:37
  • The reason why it would break the layout is because the element is not position absolute. Therefore when the image is hidden, its litterally taken out of the dom (for rendering purposes) which causes other elements that are positioned in relationship to it, to move. You could work around this by simply position:relative on the containing div (container of the element you are hiding). Then you could position:absolute the thing you are hiding and use top:,left: to position it where you want it... - Even with the code you posted above it seems the same would happen because display:none; = .hide() – Rick Kukiela Sep 07 '11 at 19:34
  • Yeah I guess I could do that, but is there a reason that this might happen with Chrome and not with Firefox? – Peter K Sep 08 '11 at 19:55