1 Replies - 859 Views - Last Post: 27 July 2011 - 07:44 AM

#1 nym-ph  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 27
  • Joined: 18-December 10

updating css properties using JavaScript (not working well in IE9)

Posted 27 July 2011 - 02:52 AM

Hello everyone,

Can anyone help me find a solution for this? I'm building a website for my mom's store. -> http://ndias.info/cc/

And I'm having a hard time with the navigation menu. I made some "fadeIn" "fadeOut" effects that run well in Chrome 12, FireFox 5, but not in IE9!

I think the problem might the way css properties are being updated?

I am trying to update this,

#thumb_00 { opacity: 0.3; }
#thumb_01 { opacity: 0.3; }
#thumb_02 { opacity: 0.3; }
#thumb_03 { opacity: 0.3; }
#thumb_04 { opacity: 0.3; }


Using this,

function mouseOver(thumb){
 
        var thumbCounter = 4;
        var thumbIntervalId = setInterval(
                function thumbEffect(){
                
                        if(thumbCounter<10) {
                        document.getElementById("thumb_"+thumb).style.opacity = "0." + thumbCounter;
                        thumbCounter++;
                        }
                        if (thumCounter == 10)
                        {
                        document.getElementById("thumb_"+thumb).style.opacity = "1";
                        clearInterval(thumbIntervalId);
                        }
                },20);
}
 
function mouseOut(thumb){
 
        var thumbCounter = 9;
        var thumbOutIntervalId = setInterval(
                function thumbEffect(){
                
                        if(thumbCounter>3) {
                        document.getElementById("thumb_"+thumb).style.opacity = "0." + thumbCounter;
                        thumbCounter--;
                        }
                        if (thumCounter == 3)
                        {
                        clearInterval(thumbOutIntervalId);
                        }
                },20);
}


MouseOver and MouseOut fade effects are not working well in IE9... Which is odd, because I'm using exactly the same technique for the fadeIn effect onclick, and it works like a charm :\

Is This A Good Question/Topic? 0
  • +

Replies To: updating css properties using JavaScript (not working well in IE9)

#2 nym-ph  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 27
  • Joined: 18-December 10

Re: updating css properties using JavaScript (not working well in IE9)

Posted 27 July 2011 - 07:44 AM

ahh, Solved, finally!! :D

I was doing this,

if (thumCounter == 10)



when should have been doing this,

if (thumbCounter == 10)



..so simple, yet so much time :x
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1