SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS Not running in IE7

    Hey guys,

    This code is working fine in Firefox3, but wont run in IE7. Can you see anything that IE wouldn't like?

    Since I can't post links I'll past the code.

    I am fading out the content when the page loads (Quick cheap fix), then when the user put cursor over links it will fade in the div and fade out the main one.

    Code:
    <script type="text/javascript" src="js/fade.js"></script>
    
    </head>
    
    <body onload="fadeIn('content1'); fadeIn('content2'); fadeIn('content3'); fadeIn('content4'); fadeIn('content5'); fadeIn('content6');">
    Code:
    <a href="" onmouseover="fade('content1'); fade('mainDesc');" onmouseout="fade('content1'); fade('mainDesc');">Benefits<br /></a>
    Code:
    // JavaScript Document
    var TimeToFadeIn = 0.00001;
    
    function fadeIn(eid)
    {
      var element = document.getElementById(eid);
      if(element == null)
        return;
       
      if(element.FadeState == null)
      {
        if(element.style.opacity == null
            || element.style.opacity == ''
            || element.style.opacity == '1')
        {
          element.FadeState = 2;
        }
        else
        {
          element.FadeState = -2;
        }
      }
       
      if(element.FadeState == 1 || element.FadeState == -1)
      {
        element.FadeState = element.FadeState == 1 ? -1 : 1;
        element.FadeTimeLeft = TimeToFadeIn - element.FadeTimeLeft;
      }
      else
      {
        element.FadeState = element.FadeState == 2 ? -1 : 1;
        element.FadeTimeLeft = TimeToFadeIn;
        setTimeout("animateFadeIn(" + new Date().getTime()
            + ",'" + eid + "')", 33);
      } 
    }
    
    
    function animateFadeIn(lastTick, eid)
    { 
      var curTick = new Date().getTime();
      var elapsedTicks = curTick - lastTick;
     
      var element = document.getElementById(eid);
     
      if(element.FadeTimeLeft <= elapsedTicks)
      {
        element.style.opacity = element.FadeState == 1 ? '1' : '0';
        element.style.filter = 'alpha(opacity = '
            + (element.FadeState == 1 ? '100' : '0') + ')';
        element.FadeState = element.FadeState == 1 ? 2 : -2;
        return;
      }
     
      element.FadeTimeLeft -= elapsedTicks;
      var newOpVal = element.FadeTimeLeft/TimeToFadeIn;
      if(element.FadeState == 1)
        newOpVal = 1 - newOpVal;
    
      element.style.opacity = newOpVal;
      element.style.filter =
          'alpha(opacity = ' + (newOpVal*100) + ')';
     
      setTimeout("animateFadeIn(" + curTick
          + ",'" + eid + "')", 33);
    }
    
    var TimeToFade = 500.0;
    
    function fade(eid)
    {
      var element = document.getElementById(eid);
      if(element == null)
        return;
       
      if(element.FadeState == null)
      {
        if(element.style.opacity == null
            || element.style.opacity == ''
            || element.style.opacity == '1')
        {
          element.FadeState = 2;
        }
        else
        {
          element.FadeState = -2;
        }
      }
       
      if(element.FadeState == 1 || element.FadeState == -1)
      {
        element.FadeState = element.FadeState == 1 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
      }
      else
      {
        element.FadeState = element.FadeState == 2 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade;
        setTimeout("animateFade(" + new Date().getTime()
            + ",'" + eid + "')", 33);
      } 
    }
    
    
    function animateFade(lastTick, eid)
    { 
      var curTick = new Date().getTime();
      var elapsedTicks = curTick - lastTick;
     
      var element = document.getElementById(eid);
     
      if(element.FadeTimeLeft <= elapsedTicks)
      {
        element.style.opacity = element.FadeState == 1 ? '1' : '0';
        element.style.filter = 'alpha(opacity = '
            + (element.FadeState == 1 ? '100' : '0') + ')';
        element.FadeState = element.FadeState == 1 ? 2 : -2;
        return;
      }
     
      element.FadeTimeLeft -= elapsedTicks;
      var newOpVal = element.FadeTimeLeft/TimeToFade;
      if(element.FadeState == 1)
        newOpVal = 1 - newOpVal;
    
      element.style.opacity = newOpVal;
      element.style.filter =
          'alpha(opacity = ' + (newOpVal*100) + ')';
     
      setTimeout("animateFade(" + curTick
          + ",'" + eid + "')", 33);
    }

    Cheers
    -Antony

  2. #2
    SitePoint Enthusiast Grayson's Avatar
    Join Date
    Jun 2008
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jsDebug allows you to troubleshoot your JavaScript in IE much like MFB=>MFF

  3. #3
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've tried debugging it, but no luck My thoughts is there's a command etc. that IE doesn't use/like.

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From http://www.mandarindesign.com/opacity.html
    For CSS opacity to work in the browser it must have some placement specified. We used float:left; and that worked. Now we are trying position:relative; and that works too, but only in Mozilla Firefox. The float:left CSS style works in both Internet Explorer and Mozilla Firefox.
    I tested this with your code and it worked a bit better

  5. #5
    SitePoint Enthusiast Grayson's Avatar
    Join Date
    Jun 2008
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use code isolation to find out where.

    1.) Comment out all your code and put an alert
    2.) Slowly introduce lines of code
    3.) eventually you will find the problem area. fix it and continue.

  6. #6
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you the one who wrote those functions?

    Care to explain them a bit?
    mmj

  7. #7
    SitePoint Enthusiast Grayson's Avatar
    Join Date
    Jun 2008
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    did i list any functions?

  8. #8
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Grayson View Post
    did i list any functions?
    I was talking to the OP.
    mmj

  9. #9
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    I tested this with your code and it worked a bit better
    Wow dude thanks, that fixed it

    Thanks for your help!


Bookmarks

Posting Permissions

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