...

View Full Version : js ie opacity



mike182uk
06-27-2009, 01:36 AM
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


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


<!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

randomuser773
06-27-2009, 03:47 AM
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:


if(!speed){
this.speed = speed;
}
else {
this.speed = 15;
}

mike182uk
06-27-2009, 10:16 AM
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?

randomuser773
06-27-2009, 03:41 PM
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 ] );

mike182uk
06-27-2009, 09:55 PM
hey randomuser773 thanx for the reply again.



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum