2

I have written this script to fade in/out an error container. it works fine in FF and Chrome but does not work at all in IE8.

You can play with the fiddle here: http://jsfiddle.net/mostafatalebi/8tw2x/

or look the below code:

Here is the Container CSS:

.error-box
{
    filter:inherit; 
    width: auto;
    display: inline;
    padding: 5px;
    border-radius: 5px;
    -webki-border-radius: 5px;
    -moz-border-radius: 5px;
    direction: rtl;
    text-align: right;
    background-color: #C00;
    color: white;
    font-size: 13px;
    width: 200px;
    float: left;
    margin-bottom: 5px;
    opacity:inherit;
    filter:inherit;
}

Here is the HTML DOM:

<label class="form-label">Email</label><br />
                <div class="form-field-holder">
                    <input id='email' type="text" name="email" class="form-input" />
                    <div class="error-box"><!-- jQuery --></div><br /> 
</div>

And here is the jQuery code to handle the process:

        $(document).ready(function(e) {

            var email = $("#email");
            email.on('blur', function(){
                console.log(email_regexp.test(email.val()));
                if(!email_regexp.test(email.val()))
                {
                    $(this).siblings('.error-box').fadeIn(600).text("رایانامه شما اشتباه است");                                                         
                }   
                else
                {
                    $(this).siblings('.error-box').fadeOut(600);    
                }
            });                                                                                                                                                             
        });

4 Answers4

2

On compatability and jQuery

jQuery 2.x is only meant to be used with Internet Explorer 9 and up. If you wish to have support for fading elements in Internet Explorer 8 (and down to 6), you will need to use jQuery 1.x instead, which still supported the older IE filter property.

I have confirmed that switching to jQuery 1.x resolves the issue. Nothing else was necessary, even though it seems in the past additional workarounds may have been needed.

On console and old Internet Explorer

One other thing to keep in mind is that by console doesn't initially exist in IE8. As such, any attempt to call console.log will cause problems. If you wish to use it, pre-check for the availability of console first. You could do this with &&, though this is considered an abusage:

window.console && console.log( email_regexp.test( email.val() ) );

Alternatively, you can take the more verbose route and make it a proper condition:

if ( window.console ) { console.log( email_regexp.test( email.val() ) ); }

If you don't want to litter your code with console checks, just define your own:

if ( !window.console ) {
    // When debug is true, console.log alerts
    var debug = true;
    window.console = {
        log: function ( message ) {
            if ( debug ) alert( message );
        }
    };
}

Further Reading: jQuery Browser Support

Community
  • 1
  • 1
Sampson
  • 265,109
  • 74
  • 539
  • 565
0

Taken from jQuery fadeIn fadeOut - IE8 does not fade

Taken from Omeriko: 'Apparently there's a workaround!

Simply set the absolute/relative positioned elements the following css attributes:

opacity:inherit;
filter:inherit;

E.g:

<div>
<img id='myImg' src='http://mydomain.com' style='position:absolute;top:10px;left:5px;filter:inherit;opacity:inherit' />
</div>

Have fun,

Omer'

Community
  • 1
  • 1
Cilan
  • 13,101
  • 3
  • 34
  • 51
0

You need to create a manual fadeIn fadeOut function for IE that removes the filter attribute. Then it will work perfectly.

Good tutorial on how to do it:

http://www.epochdev.com/blog/tutorials/javascript_development/fixing_jquery_fade_in_and_out_functions_for_internet_explorer

deW1
  • 5,562
  • 10
  • 38
  • 54
0

FadeIn and FadeOut does not seem to be supported well in IE8. Although it works as expected on other higher versions of IE.

Harshit Shrivastava
  • 11
  • 4