Question

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

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)`

Unless you are doing it just for fun and/or learning, just use an existing JS library instead of re-inventing the wheel.