SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast SanSui's Avatar
    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;
    	}
    
    }
    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?

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    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 better
    HTML 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?
    		}
    	}
    }
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Enthusiast SanSui's Avatar
    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

  4. #4
    SitePoint Enthusiast SanSui's Avatar
    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

  5. #5
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    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.

  6. #6
    SitePoint Enthusiast SanSui's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •