Collapsible DIV v2.4 - ClearType Bug

[ericdolson]

1) Script Title: Animated Collapsible DIV v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...?expanddiv=all

3) Describe problem: Hi. I know this is a widely discussed issue around the web about how IE loses its ClearType font styling when fading with jquery. It seems the common fix discussed everywhere is as follows:

$('#MyDiv').fadeIn(function(){
this.style.removeAttribute("filter");
});

Since this DD script does not use the simple fade technique that I think the above is supposed to be a fix for, it doesn't work. How would I modify or where would I place the above fix to work with the Collapsible DD script so that the font appears correctly after fading in? I have multiple DIVs on the page with ".expandable" as the class.

Thank you!

[jscheuer1]

Assuming that strategy actually works, it should probably go (untested) here (addition highlighted) like so:

slideengine:function(divid, action){
	var $divref=this.divholders[divid].$divref
	var $togglerimage=this.divholders[divid].$togglerimage
	if (this.divholders[divid] && $divref.length==1){ //if this DIV exists
		var animateSetting={height: action}
		if ($divref.attr('fade'))
			animateSetting.opacity=action
		$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500, function(){
			if ($togglerimage){
				$togglerimage.attr('src', ($divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
			}
			if (animatedcollapse.ontoggle){
				try{
					animatedcollapse.ontoggle(jQuery, $divref.get(0), $divref.css('display'))
				}
				catch(e){
					alert("An error exists inside your \"ontoggle\" function:\n\n"+e+"\n\nAborting execution of function.")
				}
			}
			/*@cc_on @*/
			/*@if(@_jscript_version >= 5)
			if(animateSetting.opacity){
				this.style.removeAttribute("filter");
			}
			@end @*/
		})
		return false
	}
},

[ericdolson]

YES!

That worked! Thank you jscheuer1!

As expected, the font is slightly skewed during the fade-in while the opacity is applied (in IE), but the final result is that the font is properly displayed. The fade-in moves quickly enough that the transition from skewed to correct at the end is barely noticeable an a non-issue.

I would recommend this mod be included in the script until the glorious day arrives that IE either dies or catches up to the standard of more modern browsers. Too many workarounds needed with IE.

Thanks again for the genius work and generous help!

The site this is used on is still in development, but when it launches I will post a link here as an example for those who would like to see this fix in action (hopefully by Dec. 31st, 2009).

[jscheuer1]

Great! Well this particular IE bug (or feature as MS die hards are wont to say), crept in gradually. IE 6 and less, those that support filter (IE 5.5+), only required that the element with a filter have a background other than transparent in order to avoid this messiness. With IE 7, that no longer works and it hasn't been corrected in IE 8. Oddly enough, Opera copied this behavior for a time as regards the more nearly standard opacity style property. But the Opera team has since fixed that. All others that support opacity of one kind or another, at least as far as I know, never had this issue.

[ericdolson]

For anyone who wants to see this fix in action go to RandomAbs.com/howto and click on any exercise in the list to expand and fade-in the content.