CODEWITHSUNDEEP
jqueryinternet-explorer
Rick Donohoe
Rick Donohoe

Reputation: 7271

jQuery code not working in IE8 and below

I have the following 2 pieces of code which do not work in IE8 and below.

services.each(function() {
    $(this).hover(function() {
        services.removeClass('active');
        $(this).addClass('active');                     
    });
});

Which fails as all 4 services have an active class at all times. Also in the following code the callback function doesn't add the completed class.

webform.click(function() {                  
    if(!$(this).hasClass('expanded')) {
            $(this).addClass('expanded');
            $(this).animate({
                marginLeft: '-25%',
                width: "50%",
                minWidth: '400px',
                maxWidth: '700px',
                padding: '0',
                minHeight: "580px",
                height: 'auto',
                borderRadius: "0"
            }, 1000, function () {
                $(this).addClass('completed');
            });
        } 
    });

Can anyone tell me how to fix these, and more importantly what I should do in future to make sure my code is IE compatible.

FYI for anyone with similar jQuery/IE issues, I had a big problem with placing a comma after the last option e.g after borderRadius: "0" above, which is ignored in all browsers except IE which throws a fit!!

Upvotes: 0

Views: 216

Answers (1)

charlietfl
charlietfl

Reputation: 171679

Hover problem-

hover() takes 2 arguments, one for mouseenter and one for mouseleave. If you only provide one function as argument it will run for both events.

You don't need an each to run a method on a collection of elements, jQuery will internally loop over all elements of the collection.

Try this for your hover()

services.hover(function() { 
       /* add on mousenter, remove on mouseleave  */   
        $(this).toggleClass('active');                   

});

Alternate approach using both arguments:

services.hover(function() { 
       /* add on mousenter */   
        $(this).addClass('active');                   

}, function(){
       /*remove on mouseleave */
       $(this).removeClass('active');  
});

API reference: http://api.jquery.com/hover

Upvotes: 1

Related Questions