ClearType on Featured Content Slider v2.4

[2005]

1) Script Title: Featured Content Slider v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

3) Describe problem: ClearType is not rendering on the featured content slider.

Could something similar to these solutions be worked into the script properly to ensure it does?

http://blog.bmn.name/2008/03/jquery-...artype-glitch/
http://mattberseth.com/blog/2007/12/...transform.html

Thanks!

[ddadmin]

Based on the URLs you had posted, it seems the solution is simply to remove the "filter" attribute from the fading element each time the fade animation is over. If so, try the below modified contentslider.js file, which does this.

[jscheuer1]

Edit: I just tried again, removing the filter from the contentslider.css file, and your method worked, but still looked pretty ugly during the transition

Hey DD, I just tried your updated code, and earlier today I had tried my own versions. I was disappointed to see that in all cases, including your code just now unless I got something wrong, that even if the filter was technically removed, the unpleasant negation of Clear Type still persisted. In fact, with your version it appears that the filter isn't even removed. This all may have something to do with the filter not being set via javascript to begin with, or it may be a larger issue.

Notes: I had tried:

element.style.removeAttribute("filter");

And, in IE 7's developer toolbar, that didn't even technically remove the filter. I then tried another method:

element.runtimeStyle.filter = '';

That at least technically removed the filter as far as the developer toolbar was concerned. However, as I say, the lack of Clear Type persisted.

I have dealt with this issue in other scripts, my approach has always been to simply reserve IE filters (they all do this to Clear Type in IE 7, at least as far as I can tell) exclusively for images or containers with only images in them. How to do that with Content Slider would be a little tricky, but not impossible. We would just need to have two or more divs in the class="contentdiv" areas, only one of which would fade, that one containing the image(s). The text could go outside that div.

One clue that these filters are intended only for images anyway can be found in their name(s), ex:

filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);

[ddadmin]

That's very interesting John. To be honest I've never really researched this issue, as for me, the text in the default Featured Content Slider demos look clear/normal to me as they are.

Now, using the modified .js code I posted above, what's interesting is that the text in IE7 looks the same/ equally clear to me. However, if I remove the "filter" property from the .css file itself, the text becomes slightly fuzzy during/post animation:

.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
background: white;
width: 390px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

So to me, the only time the text looks bad is when I remove the "filter" property from the .css file, and not if I leave things alone or use the modified .js file.

To the OP poster then, you may want to try actually removing the "filter" property from your .css file on top of using the modified .js file if the default text isn't clear for you (which it is for me as mentioned).

[jscheuer1]

. . . to me, the only time the text looks bad is when I remove the "filter" property . . .

That's quite understandable. It really depends upon personal preference and/or your system (monitor/graphics card in particular, I imagine). One can disable Clear Type in IE, then all the text will always look like you say you prefer it to in that browser. What Clear Type does is anti-alias characters. Depending upon the font and the system, this can make text look fatter and more blurry, or it can make it look more substantial and clearer.

Just for your information, on my system, this is how it looks in FF or in IE without the filter:



Here it is in IE with the filter:



Even with removing the filter via javascript after the transition in IE (and removing it from the css file), it looks like that during the transition. This is a fairy well known issue in IE 7. In IE 6, one can just add a background color to overcome this, in IE 5.5, it isn't a problem at all, but of course there are far fewer filters to choose from and you are limited to a more arcane method for scripting them. Interestingly enough, although the mechanism is probably entirely different, some versions of Opera exhibit the same sort of issue with faded/fading text.