IE problems with JCrop

Question

I am using jcrop with my aspx page:

<script type="text/javascript" src="../../Scripts/js/jquery.Jcrop.min.js"></script>
<link rel="Stylesheet" href="../../Scripts/css/jquery.Jcrop.min.css" />

Here is my JCrop declaration:

 <script type="text/javascript">
    $(document).ready(function () {
        $('#' + options.ImageID).Jcrop({
            onChange: function (coords) {
                $('#' + options.HiddenID).val(coords.x + ',' + coords.y + ',' + coords.w + ',' + coords.h);
            },
            aspectRatio: 1
        });
    });
</script>

Here is my .NET image:

<asp:Image runat="server" ID="PhotoPreviewImage" />

The options variable is an object created in the code behind to pass the ClientID of PhotoPreviewImage to the JS.

This works great in Chrome, it doesn't work in IE9 (I don't even get the crosshairs).

I am using jquery.Jcrop.min.js v0.9.10 (build:20120429) and jQuery v1.7.1 jquery.com

How can I make this work in IE?

Answer 1

I ended up having to detect IE and use one of two formats to initialize:

        var is_msie = /msie/.test(navigator.userAgent.toLowerCase());
        var jcrop_obj;

        if (is_msie) {
            jcrop_obj = jQuery.Jcrop('#img', {
                onSelect: jcrop_onEndCrop,
                minSize: [ 20, 20 ],
                setSelect: [ x, y, x2, y2 ],
                allowSelect: false
            });
        }
        else {
            jQuery('#img').Jcrop({
                onSelect: jcrop_onEndCrop,
                minSize: [ 20, 20 ],
                setSelect: [ x, y, x2, y2 ],
                allowSelect: false
            },function(){jcrop_obj = this;});
        }