Please Help Make This Mozilla Compartible

[Dayo]

Hello folks.

Sorry if this seems a bit silly, I have no experience with this type of code.

Here is a fading script for an Image Gallery I am looking to fix. It works with IE and Safari but not with Firefox and Netscape. Actually, when I say it doesn't work, I mean you have to refresh the page before the fade happens and once that is done once, it works on that image. for that session.

Here is the code:

// Fade In Script 
if (document.getElementById) {
    document.write("<style type='text/css'>.giThumbImage img {visibility:hidden;} #gsSingleImageId img {visibility:hidden;} </style>");
}
 
function start() {
    if (ThumbMatrix = document.getElementById('gbThumbMatrix')) {
    rowColl = ThumbMatrix.getElementsByTagName('tr');
    var ImageNumber = 0;
    for (var r = 0; r < rowColl.length; r++) {
        var itemColl = rowColl[r].getElementsByTagName('td');
        for (var i = 0; i < itemColl.length; i++) {
        var itemClass = itemColl[i].className; 
        if (itemClass == 'gbItemImage' || itemClass == 'gbItemAlbum') {
           SOME CODE
            CheckIfComplete(theimage.id, ImageNumber);
        }
        }
    }
    }
}
 
function CheckIfComplete(ImageId,ImageNumber) {
    ImageObj = document.getElementById(ImageId);
    if (ImageObj.complete == false) {
    window.setTimeout("CheckIfComplete('"+ImageId+"')", 100);
    } else {
    startFade(ImageId,ImageNumber);
    }
}
 
function startFade(imageId,ImageNumber) {
    var ImageFromId = document.getElementById(imageId);
    setOpacity(ImageFromId, 0);
    ImageFromId.style.visibility = 'visible';
    window.setTimeout("fadeIn('" + imageId + "', 0)", (ImageNumber*600));
}
 
function fadeIn(objId,opacity) {
    if (document.getElementById) {
    obj = document.getElementById(objId);
    if (opacity <= 100) {
        setOpacity(obj, opacity);
        opacity += 5;
        window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
    }
    }
}
 
function setOpacity(obj, opacity) {
    opacity = (opacity == 100)?99.999:opacity;
 
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
 
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
 
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
 
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}
 

I understand after Googling this issue that the fade into each other thing needs the image to be stored in the cache before it works which from my understanding of this code is why the writer checks whether the image has loaded function CheckIfComplete() before running the actual fade script.

Now for some reason, I suspect Firefox and Netscape do not ever return a "true" in that function and that it perhaps times out (looking at the code sugests it will go into a perpetual loop if my theory is true. Anyway, I just suspect and wonder if you guys that cast your experienced eyes over this and give some clues to fixing it.

Thanks for your assistance

[Dayo]

UPDATE

Adding the code in bold type below actually makes it work somewhat. It doesn't fade in but at least it loads the images rather than stop as before.

function setOpacity(obj, opacity) {
    opacity = (opacity == 100)?99.999:opacity;
 
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
 
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
 
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
 
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
    // Firefox Hack
    obj.style.-moz-opacity = opacity/100;
 
}
 

I know from online resources that the code is wrong so still hoping for help towrdds a proper solution.

Thanks

[Dayo]

Scratch the post above...it doesn't work

Help please!

[epots9]

give this a shot:

function setOpacity(obj, opacity) {
    opacity = (opacity == 100)?99.999:opacity;
 
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
 
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
 
    // Older Mozilla and Firefox
    obj.style.-moz-opacity = opacity/100;
 
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}
 

good luck

[Dayo]

epots9
Thanks for the reply.

That seems to get it to stumble through and display the image without the blend just like the post I made above.

The error console returns an error and the way the page progresses appears very jerky.

It still seems the issue is with the checkifcomplete function and that somehow the mozilla type browsers (apart from Safari...I am on a Mac) are not responding the the ?.complete test.

This is my gut feel and wonder if there is a way to validate this or to work around this.

Thanks for your help.

[gits]

hi ...

i'm wondering whether this may work:

obj.style.-moz-opacity = opacity/100;

try the following instead:

obj.style['-moz-opacity'] = opacity/100;

kind regards

[Dayo]

I have been searching everywhere like mad and came up with this http://www.thescripts.com/forum/thread626745.html.

Don't fully understand what they are saying but it seems to confirm my suspicion that the ?.complete test is not always answered truthfully.

Any assisstance will be greatly appreciated.

[Dayo]

YEEEEEHAAAAAAAA!!!!!!!!!!!!!!!!

It's the triumph of the noob.

After about 18 hours of Google and so forth, I finally found the solution.

It was function CheckIfComplete as I suspected and changing it to the following

function CheckIfComplete(ImageId,ImageNumber) {
    Window.onload = startFade(ImageId,ImageNumber);
}
 

gets it to works on all browsers including Opera which was totally snafued before...for now.

Got a few enhancements to apply and happy I have a fall back if those don't work.

Now for some sleep.