jQuery and the IE ClearText bug

So, I am all excited about the simple animations available in jQuery (i.e - show("fast") ), and when I go to use it, the text inside the element being shown is all ugly, or garbled, or whatever you want to call it... it's not the text I wanted...

Before applying the animation my page looks like this (in Internet Explorer 7):

After hiding and showing the wrapper div my text is not as smooth as it was before...

In Firefox, everything looks fine.  What's up?  It appears to be related to an issue with ClearType in Internet Explorer.

This is something to do with how jQuery sets the styles on elements that are being animated.  I think the culprits are "filter" and/or "opacity" styles that are set.

One, easy solution for me has been to use the jQuery .slideDown() and .slideUp() animations instead of .show("fast") and .hide("fast").  Apparently slideUp() and slideDown() apply different styles.. I don't think they animate the opacity or filters.

Some resources I found online...

IE7, ClearType, DXImageTransforms and Fade Animation Fuzziness - Matt Berseth

ClearType with DXTransforms in IE7 - the IE Blog

 

 

Tags:

 

Good jQuery Articles, Tutorials, and Other Resources

This post is mostly for my own reference, but maybe you'll find it useful, too.

Typically, most of my time involves writing server side code, but lately I have been force myself to get better with my client-side scripting.  Up until now, I have put a lot of faith in the ASP.NET AJAX libraries and Control Toolkit.  But, I am a skeptic of just dropping a control on the page and thinking everything is okay.  When I view the HTML source, I usually end up with a bunch of really long .axd urls in the header of the page, and several $create() functions at the bottom of the page to link the controls to the javascript.  The real problem comes when you are adding Ajax Controls inside of a GridView or Repeater.

So, I started reading about object oriented javascript.  Of course, I needed a good library to help out, and like many others, I have found jQuery to be pretty powerful, but it alone is a little tricky to figure out at first. I am making progress, and below are some of the resources that have proved helpful.

Books

Ajax In Action (Crane/Pascarello) - I had this book nearby and it got me started thinking about how to do object-oriented programming (appendix is a good start).

Tutorials

An Introduction to jQuery - a two part in-depth tutorial by Rick Strahl.  I like this one because he explains how jQuery is built, and why it is significant.

How To Author jQuery Plugins - on the jQuery website.  I'm not ready to write my own yet, but want my simple tests to model the plugin architecture.

Working With jQuery Part 1 - 3-part article on IBM's site. 

Useful jQuery Plugins

Tooltip - author: jquery - Once I learned some jQuery basics the first thing I wanted to do was create a tooltip for some  links.

Tags:

 

Visual Studio Intellisense for jQuery

I am a late arriver to the wonders of jQuery, but now the word is out that Microsoft will be supporting jQuery in Visual Studio.  It looks like it is going to fully integrated into Visual Studio in newer versions.

Currently, though, using jQuery syntax makes all javascript intellisense go away.

Today, I found a blog describing how to add intellisense for jQuery...
Rich Intellisense For jQuery - basically they provide a jQuery file with a .vsdoc extension.  Add it in your project next to the original jQuery library file.  Then install the below hotfix for Visual Studio. 

There is also a Visual Studio Hotfix available....  
JScript Editor support for “-vsdoc.js” IntelliSense doc. files

Now, in your project you just need two files, and Visual Studio will do the rest...
jquery-1.3.2.js  (original jQuery library)
jquery-1.3.2-vsdoc.js  (required for intellisense only) 

 

More information available from Scott Gu: jQuery in VS

 

Tags: