CODEWITHSUNDEEP
jqueryasp.netinternet-explorerjcrop
Liath
Liath

Reputation: 10191

IE problems with JCrop

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?

Upvotes: 3

Views: 6171

Answers (3)

DMDJ
DMDJ

Reputation: 1

This definitely fixed initialization for IE 10 Compatibility mode.

Upvotes: -1

Jeff Widmer
Jeff Widmer

Reputation: 4876

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;});
        }

Upvotes: 7

zgood
zgood

Reputation: 12581

I had some issues with JCrop in IE in the past. I solved it by adding the "onSelect" and "onRelease" events to the options object. I don't know if this will help you in your situation but its worth a shot. My code looked like this:

.Net

<asp:Image ID="cropbox" runat="server" ImageUrl="Assets/images/blank.gif" />

Javascript:

<script>
$(document).ready(function () {
    var api = $.Jcrop('#cropbox', {
        aspectRatio: 1,
        onSelect: update,
        onChange: update,
        onRelease: update
    });
});

function update(c) {
    //Store coords here
}
</script>

Upvotes: 3

Related Questions