SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Aug 11, 2003, 08:56 #1
- Join Date
- Jul 2003
- Location
- Virginia
- Posts
- 84
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Object properties between browsers - layer opacity/visibility problems
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.
Code://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; } }
-
Aug 11, 2003, 09:17 #2
- Join Date
- Jul 2002
- Location
- Dallas, TX
- Posts
- 2,900
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 betterHTML Code: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? } } }
-
Aug 11, 2003, 09:49 #3
- Join Date
- Jul 2003
- Location
- Virginia
- Posts
- 84
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Aug 11, 2003, 11:44 #4
- Join Date
- Jul 2003
- Location
- Virginia
- Posts
- 84
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Aug 11, 2003, 12:19 #5
- Join Date
- Jan 2003
- Location
- Calgary, Canada
- Posts
- 2,063
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It would be interesting to see how you did it, because I also have my own script which does this.
Who walks the stairs without a care
It shoots so high in the sky.
Bounce up and down just like a clown.
Everyone knows its Slinky.
-
Aug 11, 2003, 14:01 #6
- Join Date
- Jul 2003
- Location
- Virginia
- Posts
- 84
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Bookmarks