jQuery code not working in IE8 and below

Question

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!!

Can you show the code where you define `services` and `webform`, and also the HTML of these elements may be helpful. — Rory McCrossan, Jan 15 '13 at 11:22
what errors are thrown in console? Not sure it makes sense to animate `max/min` properties and IE 7&8 don't support `borderRadius`. Could check browser support first and define object accordingly. Suggest using a class to set `max/min` properties — charlietfl, Jan 15 '13 at 11:26
Old IE throwing errors for trailing commas isn't anything new honestly - see [Trailing commas in JavaScript](http://stackoverflow.com/q/7246618/1331430). Now as for your actual problem, your provided code is simply not enough. Try to reproduce the issue in a live scenario such as jsfiddle/jsbin/codepen/dabblet/tinkerbin. It is impossible to deduce a problem with just the seemingly valid code that you've posted. — Fabrício Matté, Jan 15 '13 at 11:32
I usually create a fiddle although I had a suspicion it would be something simple that could have been picked up on a quick glance. Will get on that! — Rick Donohoe, Jan 15 '13 at 14:04

charlietfl · Answer 1 · 2013-01-15T11:45:18.237

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

jQuery code not working in IE8 and below

1 Answers1