SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hovers not working in IE

    So i'm new to JS and I had made some simple fade in animation for my nav bar, everything worked great in Chrome, Safari, FF, Opera, but when I got to work today and got on IE7 the navigation wasn't even clickable!

    www.facetofacetutoring.com

    Any suggestions?

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The problem is caused by the different ways IE and other browsers handle opacity. The following script may help. This one fades between two images; one over the other.
    // -------------------
    var isIE=false, useFade=false,currentTop, currentBotm ; //global
    function initL()
    { // get image div object refs
    currentTop=document.getElementById("imgDiv_1"); // global ref to div
    currentBotm=document.getElementById("imgDiv_2"); // global ref to div
    //
    // check for user agent type. IE first
    if(typeof currentTop.style.opacity=="undefined" && navigator.userAgent.indexOf("MSIE")!= -1) // check for IE
    { // IE opacity value reqd is 0-100
    // set initial opacity for both divs
    currentTop.style.filter = 'alpha(opacity=100)'; // visible
    currentBotm.style.filter = 'alpha(opacity=20)'; // invisible
    isIE=true; // flag IE as browser
    useFade=true; // flag fade can be used
    return true;
    }
    else if(typeof currentTop.style.opacity=="string" && navigator.userAgent.indexOf("MSIE")== -1) // check for not IE
    { // not IE opacity value reqd is 0.0-1.0
    // set initial opacity for both divs
    currentTop.style.opacity = 1; // visible
    currentBotm.style.opacity = 0.2; // invisible
    isIE=false; // flag IE is not browser
    useFade=true; // flag fade can be used
    return true;
    }
    else
    { // not recognised. don't use opacity changes
    isIE=false; // flag IE is not browser
    useFade=false; // flag fade cannot be used
    alert("error");
    return false;
    }
    }
    // ============== end of initL =======================

  3. #3
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks allan Ill give it a try

  4. #4
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a "if" statement that I could use with Jquery that could check the opacity for the IE browser and other browsers and create the same fade affect.

  5. #5
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anybody with IE 7> can you please see if the hovers work in the navigation, the only time I get to test IE is when I'm at work because I have a mac at home and I just cant upgrade my IE at work lol


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
  •