Object properties between browsers - layer opacity/visibility problems

[SanSui]

I'm not too experienced with javascript - if I'm using IE only I can get around just fine, but I haven't really had a lot of experience sniffing out other browsers and trying to create different code branches to create the same effect on a particular browser.

In this case I've got a series of layers that correspond to some links. When someone mouses over the link, the layer becomes visible. When someone mouses out, I want the layer to fade out.

//fades the layer out
ie5  = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);

//starts opacity at 100% and function stopper to 0
lopac = 100;
breaker=0;

//fades the layer out while opacity is greater than 0 and while function stopper is 0
function fadeOut(layerval)
{

	if(lopac > 0)
	{
	if(breaker==0)
	 {
		opac2-=10;
		if(ie5) document.getElementById('layerval').filters.alpha.opacity = lopac;
		else if (!ie5)
		 {
		  document.getElementById('layerval').style.MozOpacity = lopac/100;
		 }
		setTimeout('fadeOut()', 50);
 	 }
    else document.getElementById('layer1').filters.alpha.opacity = 100;
	}

}

It works perfectly in IE, but I want to get in working in Netscape and Mozilla. I've tried altering the code in many ways (ignore the rudimentary attempt at detection, which I've removed to test Netscape/Mozilla) but the function doesn't seem to work with Netscape and Mozilla. The layer will go visible when mousing over, and then just stay there... hurray. Nothing I've tried will animate the opacity. Can anyone help me?

[beetle]

First of all, some javascript tips

1) Store references.
2) Make sure to assert literals, not strings, when you need to
3) Always object-test for the objects you are using, don't rely on generic sniffing
4) Try to avoid implementing setTimeout with a string

Here's a better version of your function, but you may still have a problem or two. I suspect you will need to get rid of the global variables, unless this is to be used for only one image. I also don't really understand the function of breaker. Anyhow, this can be a starting point towards something better

lopac = 100;
breaker=0;
function fadeOut(layerval)
{
	var elem = document.getElementById( layerval );
	if( lopac > 0 )
	{
		if( breaker == 0 )
		{
			opac2 -= 10;
			if( typeof elem.filters != 'undefined' )
			{
				elem.filters.alpha.opacity = lopac;
			}
			else if ( typeof elem.style.MozOpacity != 'undefined' )
			{
				elem.style.MozOpacity = lopac/100;
			}
			setTimeout( function() { fadeOut( layerval ) }, 50);
		} else {
			elem.filters.alpha.opacity = 100;
			// Okay for IE, what about Gecko?
		}
	}
}

[SanSui]

Thanks for the response. I like the idea of testing for each object - I need to get myself a reference so I can check these things more easily.

I use the breaker variable to tell when to stop the fade. If the user mouses over another link, or even the same link, I want the fading to stop and the opacity returned to 100 (or hidden entirely if not the same layer).

My first hurdle is to get Netscape/Mozilla to recognize that I'm telling it to change the layer opacity. The browsers seem to completely ignore MozOpacity

[SanSui]

I think I've finally got it working. Netscape/mozilla sure does freak out when it thinks you should have something enclosed in single quotes. I'll post an online example with code for what I've done by the end of the day hopefully, just in case anyone else is interested in producing the same type of effect for both IE/Netscape

[Jeff Lange]

It would be interesting to see how you did it, because I also have my own script which does this.

[SanSui]

Actually, I think I'll post it tomorrow so I can add a few things to it. It was interesting because netscape/mozilla was messing up the opacity animation for the background part of the layer that had no direct content in it. The area that had content would fade away correctly, but the 'unused' background area would lose visibility immediately, which was quite annoying.