Fading script will not work in IE?

Question

Hi, I'm pretty new to Javascript and have been trying to achieve some fading effects on a website. I've managed to hammer together the effects I want and everything's working fine on Firefox & Safari. However IE doesn't like it. The first script to change the background colour works but the second script to fade in the content does nothing.

I'm calling the scripts from the head as follows:

window.onload=siteIntro;

And the Javacript which is not working is here. Any help or suggestions would be appreciated, the live site can be viewed if needed.

Many Thanks

// ################# Fade Divs ###############################

function Fade(objID,CurrentAlpha,TargetAlpha,steps){

    var obj = document.getElementById(objID);

    CurrentAlpha = parseInt(CurrentAlpha);
    if (isNaN(CurrentAlpha)){
     CurrentAlpha = parseInt(obj.style.opacity*100);
     if (isNaN(CurrentAlpha))CurrentAlpha=100;
    }
    var DeltaAlpha=parseInt((CurrentAlpha-TargetAlpha)/steps);
    var NewAlpha = CurrentAlpha - DeltaAlpha;

    if (NewAlpha == 100 && (navigator.userAgent.indexOf('Gecko') != -1 && navigator.userAgent.indexOf('Safari') == -1)) NewAlpha = 99.99;

    obj.style.opacity = (NewAlpha / 100);
    obj.style.MozOpacity = obj.style.opacity;
    obj.style.KhtmlOpacity = obj.style.opacity;
    obj.style.filter = 'alpha(opacity='+NewAlpha+')';

    if (steps>1){
     setTimeout('Fade("'+objID+'",'+NewAlpha+','+TargetAlpha+','+(steps-1)+')', 50);
    }
}

// ################# Toggle content div visibility ###############################
function mainVis(showMain) {
    document.getElementById(showMain).style.visibility ="visible";
}

function pageSwitch(show0, hide0, hide1, hide2, hide3) {
    document.getElementById(show0).style.visibility ="visible";
    document.getElementById(hide0).style.visibility ="hidden";
    document.getElementById(hide1).style.visibility ="hidden";
    document.getElementById(hide2).style.visibility ="hidden";
    document.getElementById(hide3).style.visibility ="hidden";
}

function pg1() {
    pageSwitch('prices', 'icon', 'about', 'map', 'news');
    Fade('prices','0',100,30)
}
function pg2() {
    pageSwitch('about', 'icon', 'prices', 'map', 'news');
    Fade('about','0',100,30)
}
function pg3() {
    pageSwitch('map', 'icon', 'about', 'prices', 'news');
    Fade('map','0',100,30)
}
function pg4() {
    pageSwitch('news', 'icon', 'map', 'about', 'prices');
    Fade('news','0',100,30)
}

// ################# Site Intro Functions ###############################

function siteIntro() {
    setTimeout("NLBfadeBg('b1','#FFFFFF','#000000','3000')",2000);
    mainVis('main');
    setTimeout("Fade('main','',100,30)",5000);
}

Answer 1

Maybe you can take advantage of an out-of-the-box cross browser script like this http://brainerror.net/scripts/javascript/blendtrans/

Or use jQuery (which is great with animating and effects) or any other JS library

Answer 2

MS filters only apply to elements that "have layout".

To force layout, you can give the element a width or a height, or use the old zoom: 1; trick.

Not sure if this is the cause of your problems, but you could try it.

You can read more about hasLayout here

Another thing, instead of setTimeout('Fade("'+objID+'",'+NewAlpha+','+TargetAlpha+','+(steps-1)+')', 50) you can simply write setTimeout(function() { Fade(objID, NewAlpha, TargetAlpha, steps-1); }, 50)

I agree with the others though, just use an existing JS lib instead of re-inventing the wheel. If you're doing it just for fun and/or learning it's totally fine of course.

Answer 3

This might not be an answer you are looking for, but you shouldn't be doing this: you can use jQuery to do this for you. One or two lines of code, and it is cross browser compatible.