views:

411

answers:

1

Hello

I am developing a web application in ASP.NET MVC. I have recently added rounded corners using the jQuery Rounded Corners plugin (http://plugins.jquery.com/project/corners). This seems to have upset IE8 (but not 6 or 7, or Firefox) because I can no longer set the focus in $(document).ready().

Here is an example of the problem:

    $(document).ready(function() {

        // using jQuery rounded corners plugin
        $("#centre").corners();

        // this doesn't have any effect in IE8
        $("#emailAddress").focus();
    });

where #centre contains our login page, and #emailAddress is the first field within it.

The emailAddress field should get the input focus. It does in IE6 & 7 and Firefox, but not in IE8. If you comment out the two rounded corners lines, then it works.

I have also tried moving the focus line to $(window).load():

    $(window).load(function() {
        $("#emailAddress").focus();
    });

This doesn't work either. However if I write set the focus using a timeout, then it works:

    $(document).ready(function() {

        // using jQuery rounded corners plugin
        $("#centre").corners();

        // this doesn't have any effect in IE8
        setTimeout(function() { $("#emailAddress").focus(); }, 100);
    });

I am not sure why setting focus after a timeout should work. Could it be because the rounded corner operations modify the DOM (they add a series of DIVs at the top and bottom of the container to create the rounded border), which takes some time, and the focus() is happening before the DOM has finished updating?

Thanks for your help

Ed