jQuery Effect Not Working in IE7

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Sarah20
Forum Newbie
Posts: 2
Joined: Tue Jul 21, 2009 2:45 pm

jQuery Effect Not Working in IE7

Post 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
Last edited by Benjamin on Tue Jul 21, 2009 9:39 pm, edited 1 time in total.
Reason: Changed code type from text to javascript.
spider.nick
Forum Commoner
Posts: 72
Joined: Wed Jul 15, 2009 12:22 pm
Location: Overland Park, KS

Re: jQuery Effect Not Working in IE7

Post 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
Sarah20
Forum Newbie
Posts: 2
Joined: Tue Jul 21, 2009 2:45 pm

Re: jQuery Effect Not Working in IE7

Post 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
Last edited by Benjamin on Tue Jul 21, 2009 9:39 pm, edited 1 time in total.
Reason: Changed code type from text to javascript.
spider.nick
Forum Commoner
Posts: 72
Joined: Wed Jul 15, 2009 12:22 pm
Location: Overland Park, KS

Re: jQuery Effect Not Working in IE7

Post 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
Post Reply