Chrome does not show and hide loader

Question

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?

Answer 1

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.

Answer 2

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.

        }
    }