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!
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 =======================
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.
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