Need help with Cross Browser Inconsistencies in overlay

RESOLVED

I found the issue and am sorry to say it is quite idiotic. On some pages there was an extra closing bracket after the script type=javascript. Apparently Chrome and Firefox ignore the issue but Safari and IE threw up display errors. Thank you to everybody for the excellent support and guidance on the matter. of note, i decided to go with the .show() method as it seemed most logical.

---

I have the following javascript snippet at the top of my page which validates 2 fields within a login form:

<script type="text/javascript">
    $(function() {

        $('#submit').click(function () {

            $('#login_form span').hide();

            if ($("input#user").val() == "") {
                $("span#user").show();
                $("input#user").focus();  
                return false;  
            }

            if ($("input#pw").val() == "") {
                $("span#pw").show();
                $("input#pw").focus();  
                return false;  
            }

            var overlay = $('<div id="overlay">');
            $('body').append(overlay);
        });
    });
</script>

When a form is submitted (submit is clicked) the function is run which checks to make sure the 2 fields: pw and user have some content. If they do, it opens an overlay script to cover the screen. The function above sits at the top of my screen (in the head)

The CSS for the overlay is:

#overlay { background:#000 url(../images/loader.gif) center no-repeat; opacity:0.5; filter:alpha(opacity = 50); width:100%; height:100%; position:absolute; top:0; left:0; z-index:1000; }

In Chrome: The function works well but the 'loading' image within the overlay does not show.

In Firefox: Nearly the same as Chrome but the loading image DOES work if the javascript call is made at the bottom of the page.

In IE: if the function stays in the head, my page is completely blank (though no server errors). Once I move to the bottom of the page, the loading image appears randomly and if it does, it is VERY slow in its animation.

perhaps I am doing something wrong but trying to build for all three browsers on something this simple is making me bonkers.

Any suggestions for improvement?

Thanks ahead of time.

UPDATE

First off thank you all for your suggestions so far. I have tried and number and get various results from each (as well as different results when run locally versus on our apache server).

One page in particular that seems to be of fury is this one: https://www.nacdbenefits.com/myadmin/password-reset

In IE, the page just opens to a grey screen. I have updated the code to imbed the div id in the page itself and simply 'show' on 开发者_运维知识库a submit but apparently something else is catching a long the way.

UPDATE 2

Something else must be causing this to malfunction. When i strip the code even to:

<script type="text/javascript">
    $(function() {

    });
</script>

unless I move the code to the bottom of the page, IE just shows a dark screen with nothing there (no server errors again and no JS errors at page bottom).

---

I would have the overlay already existant in the page's HTML but hidden (display: none;), so that the background image is preloaded. Then, once my button is clicked, I would .show() it.

---

I think your code has a bug. I'm suprised Firefox manages to make something out of it. According to .append() you should pass it a string or an element. You're attempting to pass it a jQuery selector result (and a broken one at that). Remember, in jQuery $() is a function call! Compare your code (condensed):

$('body').append($('<div id="overlay">'));

with this (no $() call):

$('body').append('<div id="overlay" />');

or this (note closing the div tag):

$('body').append($('<div id="overlay" />'));

---

Have you considered having the overlay as part of your page's code, but simply display: none by default, and then simply .show()ing it when you want it to appear?

---

The head/bottom-of-page inconsistency can be fixed by running your binding when the DOM is ready, like this:

<script type="text/javascript">
    $(document).ready(function() {

        $('#submit').click(function () {

        // code omitted for brevity

        });
    });
</script>