Hello!
I created a simple slideshow using jQuery, and, for some reason, it doesn't work in IE7 (and maybe other versions of IE as well).

Here is the link: http://unitedfrontmn.org/website/

Please look at the top slideshow with the "1 2 3" controls. Click one of those numbers and notice that nothing happens in IE7. Everything works fine in Firefox, Safari, and Chrome.

My code is called from the head of the page and reads:

jQuery(document).ready(function(){
    var fcTransitionLength = 400;       
    jQuery(".button1").click(function(){         
        jQuery(".button1").css({'background-color' : '#7a7a7a', 'color' : '#fff'});
        jQuery(".button2").css({'background-color' : '#f3f3f4', 'color' : 'inherit'});
        jQuery(".button3").css({'background-color' : '#f3f3f4', 'color' : 'inherit'});
        jQuery(".image2").fadeOut(fcTransitionLength);
        jQuery(".fcText2").fadeOut(fcTransitionLength);
        jQuery(".image3").fadeOut(fcTransitionLength);;
        jQuery(".fcText3").fadeOut(fcTransitionLength,function(){
            jQuery(".image1").fadeIn(fcTransitionLength);
            jQuery(".fcText1").fadeIn(fcTransitionLength);});
    });
    
    jQuery(".button2").click(function(){
        jQuery(".button1").css({'background-color' : '#f3f3f4', 'color' : 'inherit'});
        jQuery(".button2").css({'background-color' : '#7a7a7a', 'color' : '#fff'});
        jQuery(".button3").css({'background-color' : '#f3f3f4', 'color' : 'inherit'});
        jQuery(".image1").fadeOut(fcTransitionLength);
        jQuery(".fcText1").fadeOut(fcTransitionLength);
        jQuery(".image3").fadeOut(fcTransitionLength);
        jQuery(".fcText3").fadeOut(fcTransitionLength,function(){
            jQuery(".image2").fadeIn(fcTransitionLength);
            jQuery(".fcText2").fadeIn(fcTransitionLength);});
    });
    
    jQuery(".button3").click(function(){
        jQuery(".button1").css({'background-color' : '#f3f3f4', 'color' : 'inherit'});
        jQuery(".button2").css({'background-color' : '#f3f3f4', 'color' : 'inherit'});
        jQuery(".button3").css({'background-color' : '#7a7a7a', 'color' : '#fff'});
        jQuery(".image1").fadeOut(fcTransitionLength);
        jQuery(".fcText1").fadeOut(fcTransitionLength);
        jQuery(".image2").fadeOut(fcTransitionLength);
        jQuery(".fcText2").fadeOut(fcTransitionLength,function(){
            jQuery(".image3").fadeIn(fcTransitionLength);
            jQuery(".fcText3").fadeIn(fcTransitionLength);});
    });

});

I have tried to solve the problem by moving my jQuery code to the bottom of my html, and trying different variable declarations.

Do you know why this is happening? Have any ideas?

Thank you!
Sarah

The error is being thrown by jQuery itself, not one of your functions, so this is an exception of some sort being caused by bad input. My debugger tells me it is a "Invalid property value". Properties are the values of an object. In this case, it is most likely the CSS rules that are being inputted. "inherit" may not be a valid value for "color" in IE7 and below (I'm not sure). Eliminate all of the CSS rules to see if the problem stops, and if it does, start by looking for an alternate value to "inherit".

Thanks for the help!

The CSS code was, indeed, the culprit. Here's the code that ended up working in IE:

jQuery(document).ready(function(){
    var cssObj1 = {
        'background-color' : '#7a7a7a',
        'color' : '#fff'
        }
    jQuery(".button1").click(function(){    
        jQuery(".button1").css(cssObj1);
        jQuery(".button2").css("background-color","#f3f3f4");
        jQuery(".button2").css("color","#333");
    });
});

For some reason, it won't work if I use another object to control the css on ".button2". I must be doing something wrong there. For example, if I use the following code, it won't work:

jQuery(document).ready(function(){
    var cssObj1 = {
        'background-color' : '#7a7a7a',
        'color' : '#fff'
        }
    var cssObj2 = {
        'background-color' : '#f3f3f4',
        'color' : '#f3f3f4'
        }
    jQuery(".button1").click(function(){    
        jQuery(".button1").css(cssObj1);
        jQuery(".button2").css(cssObj2);
    });
});

Any idea why?

Thank you!
Sarah

Well, that is very strange indeed. Not sure why that wouldn't work. However, try doing this:

jQuery(document).ready(function(){
    var cssObj1 = {
        backgroundColor : '#7a7a7a',
        color : '#fff'
        }
    var cssObj2 = {
        backgroundColor : '#f3f3f4',
        color : '#f3f3f4'
        }
    jQuery(".button1").click(function(){    
        jQuery(".button1").css(cssObj1);
        jQuery(".button2").css(cssObj2);
    });
});

Property names don't always have to be expressed as strings. In fact , it not the norm to do so. jQuery uses the standard rule of allowing you to express CSS property names in camelCase whenever a dash would be used.