Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: js ie opacity

  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts

    js ie opacity

    hey

    i am working on an opacity changing function. it all works fine except in ie. after fading an item out, when i go to fade it back in, it just wont fade back in (even tho the condition that determines this is matched) and i really cant figure out why.

    heres my js
    Code:
    function fade(element,control,speed){
    	var obj = new fadeableObj(element,speed);
    	if(!obj.e){
    		return;
    	}
    	if(control == "auto"){
    		
    		if(!obj.e.style.opacity || !obj.e.style.filter){
    			obj.e.style.opacity = 1;
    			obj.e.style.filter = "alpha(opacity=100)" 
    		}
    		if(obj.e.style.opacity == 1 || obj.e.style.filter == "alpha(opacity=100)"){
    			obj.opacityTracker = 100;
    			obj.fadeOut();
    		}
    		if(obj.e.style.opacity == 0 || obj.e.style.filter == "alpha(opacity=0)"){
    			obj.opacityTracker = 0;
    			obj.fadeIn();
    		}
    	}
    	if(control == "fadeIn"){
    		obj.opacityTracker = 0;
    		obj.fadeIn();
    	}
    	if(control == "fadeOut"){
    		obj.opacityTracker = 100;
    		obj.fadeOut();
    	}
    }
    
    function fadeableObj(element,speed){
    	if(!element){
    		return;
    	}
    	else {
    		this.e = document.getElementById(element);
    		if(!this.e){
    			return;
    		}
    	}
    	if(!speed){
    		this.speed = speed;
    	}
    	else {
    		this.speed = 15;
    	}
    	this.opacityTracker = 0;
    }
    
    fadeableObj.prototype.fadeIn = function(){
    	var obj = this;
    	if(this.opacityTracker == 100){
    			clearTimeout;
    			return;
    		}
    	this.opacityTracker = this.opacityTracker + 10;
    	this.e.style.opacity = this.opacityTracker / 100;
    	this.e.style.filter = "alpha(opacity="+this.opacityTracker+")"; 
    	setTimeout( function(){ obj.fadeIn() } , this.speed );
    }
    
    fadeableObj.prototype.fadeOut = function(){
    	var obj = this;
    	if(this.opacityTracker == 0){
    			clearTimeout;
    			return;
    		}
    	this.opacityTracker = this.opacityTracker - 10;
    	this.e.style.opacity = this.opacityTracker / 100;
    	this.e.style.filter = "alpha(opacity="+this.opacityTracker+")"; 
    	setTimeout( function(){ obj.fadeOut() } , this.speed );
    }
    i have highlighted in red where i think the problem is (even tho i cant see why). even tho there is a filter and opacity set, it just doesnt want to work

    heres my html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    	<head>
    		<title>FX:Test</title>
    	<script src="fx.js"></script>
    	<style type="text/css">
    	.class1{
    		height:150px;
    		width:150px;
    		background-color:red;
    		margin:10px;
    		float:left;
    	}
    	</style>
    	</head>
    <body>
    <div id="div1" class="class1" onclick="fade('div1','auto')"></div>
    
    </body>
    </html>
    it must be staring right at me but i just cant see the problem

  • #2
    Banned
    Join Date
    Nov 2008
    Location
    not found
    Posts
    284
    Thanks
    0
    Thanked 53 Times in 51 Posts
    Code:
                    if(!obj.e.style.opacity || !obj.e.style.filter)
    		{
    			obj.e.style.opacity = 1;
    			obj.e.style.filter = "alpha(opacity=100)" 
    		}
    		if(obj.e.style.opacity == 1 || obj.e.style.filter == "alpha(opacity=100)")
    Following a fade, the above test is always true in I.E., since opacity==0 and I.E. treats it as a number, not a string. This causes the following test always to be true, so you get another fade out.

    If the test is
    if( obj.e.style.opacity==undefined || obj.e.style.filter==undefined)it will work (although still rubbish).

    I don't think you meant to do this:
    Code:
    if(!speed){
    		this.speed = speed;
    	}
    	else {
    		this.speed = 15;
    	}
    Last edited by randomuser773; 06-27-2009 at 03:27 AM.

  • #3
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts
    hey man thanks for that, that seemed to cure it.

    i still see why it wont work tho. i thought that (!opacity) was the same as opacity == undefind?

    Following a fade, the above test is always true in I.E., since opacity==0 and I.E. treats it as a number, not a string. This causes the following test always to be true, so you get another fade out
    so is ie not even looking at the filter comparison then? (instead its looking at the opacity comparison). and if it is only looking at the opacity comparison, it should still work coz this is set inline wether its ie or not.

    yeh the speed thing was the wrong way around cheers



    is there a better way to check for opacity rather than replying on the style being set?
    Last edited by mike182uk; 06-27-2009 at 09:36 AM.

  • #4
    Banned
    Join Date
    Nov 2008
    Location
    not found
    Posts
    284
    Thanks
    0
    Thanked 53 Times in 51 Posts
    If you assign opacity=0 to a browser that doesn't support the property, you create an integer variable with a value of 0, rather than "0". One evaluates false, the other true.

    I would re-write the code so that the constructor assigns the event handler, then there's only one constant object instance in use, whose .opacityTracker variable can record the opacity level throughout all transitions.

    new fadeableObj( "elementID" [, speed ] );

  • #5
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts
    hey randomuser773 thanx for the reply again.

    Code:
    I would re-write the code so that the constructor assigns the event handler, then there's only one constant object instance in use, whose .opacityTracker variable can record the opacity level throughout all transitions.
    i dont quite understand what you mean here.could you explain a little or even better provide an example? i appreciate your time and effort on this.

    thanx mike


  •  

    Posting Permissions

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