Friday, January 15, 2010

JCrop + Thickbox iframe + Internet Explorer 8 (Nasty IE bug fix)

Hello guys.
Before posting about .NET Framework 4.0, I have to tell you about an episode (another one) about the horrifying experience that is programming IE compatible javascript.
The scenario:

I have a web form with a input file, that I need to crop & resize the image (if it is one), on a thickbox iframe.

So I create submit my form to an iframe, and when the iframe is loaded, I run the JCrop plugin.
So far so good..on Firefox..
Then I test this on IE8, nothing, the image doesn't appear or the image appears, but no JCrop functionality whatsoever, and why? Because IE8 (an 7 as far as I know) doesn't load the image in a timely fashion, or when it's supposed to be loaded! Nothing works! window load event, image load event, document ready, document load, nothing!

The Trick: having the jcrop call inside a setTimeout, with 1 ms only...

setTimeout("$('imgEdit').JCrop();",1); //<- and voilá! it's working!

It's a shame on 2010 we still need to hack to get things working on IE.

Hope this save you a good couple of yours, like it would if I had it.

1 comment:

Jitu Saklani said...

Hi, I also spent time for this error. The Jcrop is not working in IE8. When I use ratio option which is "aspectRatio:" in Jcrop then it doesn't work. I removed this option, it works fine for me.

I know this is not the solution. We need to find some solution.