Question : Modify tinyAccordian javascript to fix ClearType IE issue

Hello Everyone,
I am using a nice js accordian script: tinyAccordian. http://www.leigeber.com/2009/03/accordion/
There is just one small problem...according to the developer, "Whenever a filter is applied to an element Microsoft disables ClearType.". The filter is at around line 30 of the code.
The developer suggests some workarounds, but I do not know how to implement them:
Disable ClearType for the menu from the start by adding the alpha filter with opacity set to 100 in the CSS for the sections.

- Set the filter to an empty string on line 30 after the animation is complete to reset the ClearType.

- Remove the filter references from the script to disable the opacity tween in IE only, only the size animation will remain.

Can you take a look and provide the modified script?

Thanks!

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:



var TINY={};

function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}

TINY.accordion=function(){
	function slider(n){this.n=n; this.a=[]}
	slider.prototype.init=function(t,e,m,o,k){
		var a=T$(t), i=s=0, n=a.childNodes, l=n.length; this.s=k||0; this.m=m||0;
		for(i;i<l;i++){
			var v=n[i];
			if(v.nodeType!=3){
				this.a[s]={}; this.a[s].h=h=T$$(e,v)[0]; this.a[s].c=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(0,'+s+')');
				if(o==s){h.className=this.s; c.style.height='auto'; c.d=1}else{c.style.height=0; c.d=-1} s++
			}
		}
		this.l=s
	};
	slider.prototype.pr=function(f,d){
		for(var i=0;i<this.l;i++){
			var h=this.a[i].h, c=this.a[i].c, k=c.style.height; k=k=='auto'?1:parseInt(k); clearInterval(c.t);
			if((k!=1&&c.d==-1)&&(f==1||i==d)){
				c.style.height=''; c.m=c.offsetHeight; c.style.height=k+'px'; c.d=1; h.className=this.s; su(c,1)
			}else if(k>0&&(f==-1||this.m||i==d)){
				c.d=-1; h.className=''; su(c,-1)
			}
		}
	};
	function su(c){c.t=setInterval(function(){sl(c)},20)};
	function sl(c){
		var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+(Math.ceil(d/5)*c.d)+'px';
		c.style.opacity=h/c.m; c.style.filter='alpha(opacity='+h*100/c.m+')';
		if((c.d==1&&h>=c.m)||(c.d!=1&&h==1)){if(c.d==1){c.style.height='auto'} clearInterval(c.t)}
	};
	return{slider:slider}
}();

Answer : Modify tinyAccordian javascript to fix ClearType IE issue

Yes, that probably would be the first opacity filter. Just remove it like so:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:



var TINY={};

function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}

TINY.accordion=function(){
        function slider(n){this.n=n; this.a=[]}
        slider.prototype.init=function(t,e,m,o,k){
                var a=T$(t), i=s=0, n=a.childNodes, l=n.length; this.s=k||0; this.m=m||0;
                for(i;i<l;i++){
                        var v=n[i];
                        if(v.nodeType!=3){
                                this.a[s]={}; this.a[s].h=h=T$$(e,v)[0]; this.a[s].c=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(0,'+s+')');
                                if(o==s){h.className=this.s; c.style.height='auto'; c.d=1; c.style.filter='';}else{c.style.height=0; c.d=-1} s++
                        }
                }
                this.l=s
        };
        slider.prototype.pr=function(f,d){
                for(var i=0;i<this.l;i++){
                        var h=this.a[i].h, c=this.a[i].c, k=c.style.height; k=k=='auto'?1:parseInt(k); clearInterval(c.t);
                        if((k!=1&&c.d==-1)&&(f==1||i==d)){
                                c.style.height=''; c.m=c.offsetHeight; c.style.height=k+'px'; c.d=1; h.className=this.s; su(c,1)
                        }else if(k>0&&(f==-1||this.m||i==d)){
                                c.d=-1; h.className=''; su(c,-1)
                        }
                }
        };
        function su(c){c.t=setInterval(function(){sl(c)},20)};
        function sl(c){
                var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+(Math.ceil(d/5)*c.d)+'px';
                c.style.opacity=h/c.m; c.style.filter='alpha(opacity='+h*100/c.m+')';
                if((c.d==1&&h>=c.m)||(c.d!=1&&h==1)){if(c.d==1){c.style.height='auto'} clearInterval(c.t)}
                c.style.filter='';
        };
        return{slider:slider}
}();