Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer jQuery Effect Not Working in IE7

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

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    IE doesn't support the value "inherit" on quite a number of properties, including background-color and color, so you are going to have to find another way to set that color. If it's just that one slideshow we are talking about, hardcoding that color in the script will be just fine.

    If you want to keep it flexible, you could loop through the parents until you hit body, trying to get some color information there.

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks!

    Thanks for the help!

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

    Code:
    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:
    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

  • #4
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Are you sure it doesn't work and it's not just that you're setting color to the same value as background-color instead of #333?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •