PDA

View Full Version : Gradualfader problem



Scuba
02-26-2012, 09:59 AM
Good morning. I have a problem with the script gradualfader.js.

It is correctly installed on my website and works fine.

Only once when the mouse leaves the image it disappears ... we must return with the mouse to make it appear again ... But it does not do all the time. I tried with Internet Explorer, Firefox and Chrome and also .... This is the same on all browsers.

A solution?

Thank you in advance,

Scuba

vwphillips
02-26-2012, 12:28 PM
it works on the script home page

please post a link to your page

Scuba
02-26-2012, 12:45 PM
it works on the script home page

please post a link to your page
OK, here's my website address: http://www.securacces.fr

(Yes I am French and my site too ...)

Move your mouse quickly from one image to another multiple times (some times it does right now)

Thank you in advance

vwphillips
02-26-2012, 04:23 PM
I can not see anything wrong but fast mouseouts can be missed

so this ensures a fade out of the previous element on mouseover of another


<!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" lang="en">

<head>
<title></title>
</head>

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" class="gradualfader" />

<a href="http://www.dynamicdrive.com" class="anotherclass gradualfader"><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" /></a>

<div style="width: 300px; border: 1px solid gray; background: blue" class="gradualfader2">
Some text here
</div>
<script type="text/javascript">

zxcFader={

init:function(o){
var oop,min=o.MinOpacity,min=typeof(min)=='number'&&min>0&&min<100?min:50,ms=o.Duration,ms=typeof(ms)=='number'&&ms<2?ms:1000,reg=new RegExp('\\b'+o.ClassName+'\\b'),els=document.body.getElementsByTagName('*'),ary=[],img,z0=0;
oop=this[o.ClassName]={
min:min,
ms:ms,
group:o.Group===true
}
for (;z0<els.length;z0++){
if(reg.test(els[z0].className)){
img=els[z0].nodeName.toUpperCase()!='A'?els[z0]:els[z0].getElementsByTagName('IMG')[0];
if (img){
this.opacity(img,min);
this.addevt(img,'mouseover','fade',true,ary.length,oop);
this.addevt(img,'mouseout','fade',false,ary.length,oop);
ary.push([img,min,null])
}
}
}
oop.ary=ary
},

fade:function(ud,nu,oop){
var ary=oop.ary[nu],to=ud?100:oop.min;
clearTimeout(ary[2]);
if (ud&&this.lst&&ary[0]!=this.lst[2]){
this.fade(false,this.lst[1],this.lst[0]);
}
this.animate(ary,ary[1],to,new Date(),Math.max(oop.ms*Math.abs((to-ary[1])/(100-oop.min)),2));
if (ud){
this.lst=[oop,nu,ary[0]];
}
},

animate:function(ary,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
now=Math.min(Math.max(now,0),100);
ary[1]=now;
oop.opacity(ary[0],now);
}
if (ms<mS){
ary[2]=setTimeout(function(){ oop.animate(ary,f,t,srt,mS); },10);
}
else {
ary[1]=t;
oop.opacity(ary[0],t);
}
},

opacity:function(obj,opc){
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
},

addevt:function(o,t,f,p,p1,p2){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
}

}


zxcFader.init({
ClassName:'gradualfader', // the common class name of the elements to fade. (string)
Duration:2000, //(optional) the duration of the fade in milli seconds. (number, default == 1000)
MinOpacity:20 //(optional) minimum opacity. (number, default == 50)
});

zxcFader.init({
ClassName:'gradualfader2'
});

</script>

</body>

</html>