Results 1 to 5 of 5

Thread: Collapsible DIV v2.4 - ClearType Bug

  1. #1
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Collapsible DIV v2.4 - ClearType Bug

    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!
    Last edited by ericdolson; 11-25-2009 at 11:23 PM. Reason: Typo and complete script title.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Code:
    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
    	}
    },
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ericdolson (11-27-2009)

  4. #3
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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).

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Example

    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.

Bookmarks

Posting Permissions

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