Page 1 of 1

jQuery Effect Not Working in IE7

Posted: Tue Jul 21, 2009 3:03 pm
by Sarah20
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:

Code: Select all

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

Re: jQuery Effect Not Working in IE7

Posted: Tue Jul 21, 2009 4:52 pm
by spider.nick
According to IE8:
Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Timestamp: Tue, 21 Jul 2009 21:51:54 UTC

Message: Invalid property value.
Line: 12
Char: 12949
Code: 0
URI: http://jqueryjs.googlecode.com/files/jq ... 3.2.min.js
Hope that helps.

Nick

Re: jQuery Effect Not Working in IE7

Posted: Tue Jul 21, 2009 8:23 pm
by Sarah20
Thanks for the help!

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

Code: Select all

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:

Code: Select all

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

Re: jQuery Effect Not Working in IE7

Posted: Wed Jul 22, 2009 8:45 am
by spider.nick
Well, first of all, you are not using an object. I know that is what the variable is called, but in actuality, you are using an array.

Now, as for why the second array does not work, trying putting a semi-colon [ ; ] after the curly brace's [ } ]. The brace that ends the array.

Nick