Jcrop - Issues with croppable area and image size - css

Question

I have some problems with Jcrop's croppable area size. In my own, simple application I used Jcrop without any problem but now I'm using Jcrop inside another web application (Virtual Viewer Snowbound). Here is a screenshot of my problem-free application:
I added all Jcrop js and css files to the other website's folders into the right paths. I think there is no problem about file locations. But probably something inside that website's css and Jcrop's css conflicts and prevents it from working properly.
Firstly I added these libraries to the most below side of the head tags (I commented out the first one because website has Jquery 1.9.1 version so it conflicts:
<!-- <script src="js/jquery.min.js" type="text/javascript"></script>-->
<script src="js/jquery.Jcrop.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
Then Jcrop functions are written:
jQuery(document).ready(function(){
jQuery(function ($) {
$('#vvImageCanvas').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
setSelect: [100,100,200,200],
bgColor: 'black',
allowSelect: true,
allowMove: true,
allowResize: true,
aspectRatio: 0
});
function updatePreview(c) {
if (parseInt(c.w) > 0) {
// Show image preview
var imageObject = $("#vvImageCanvas")[0];
var canvas = $("#previewMyCanvas")[0];
var context = canvas.getContext("2d");
if (imageObject != null && c.x != 0 && c.y != 0 && c.w != 0 && c.h != 0) {
context.drawImage(imageObject, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
}
}
};
}
);
});
As you see the vvImageCanvas is the canvas which holds the image and I Show the preview inside previewMyCanvas canvas. The problem is croppable area size. If I add that below code:
style="width:auto!important; height:auto!important;"
into the
<canvas id="vvImageCanvas" class="vvCanvas">
tags then I have the below view:
As you see in the preview I can crop where I want but the croppable area does not have the same size with picture. I think that is the jcrop-holder div but I'm not proffesional in css issues.
If I don't add these style options then I have that:
The croppable area has same size with picture but the picture gets smaller and as you see in the preview, cropped area is different from where I crop. Maybe it crops from the actual size of image.
So, how can I use Jcrop functions without conflictions. I added
jQuery.noConflict(true);
but it didn't help.
Thanks.
EDIT:
Ok I realized the problem.
The Jcrop functions should work after the page load. But I cannot achieve that by writing these codes into document.ready or window.load blocks. That was the reason of asking this question.
Then I ran the code by a button click. It worked. But I don't know why it does not work inside document.ready and works in button click event. Also I have to make it work on page load automatically not by clicking a button.
Any advise?

Answer 1

It's a wild guess, since you didn't provide any demo, but I've come across similar issues in following cases:
Jcrop element was animated using CSS3 transitions
There was a CSS rule applied to the parent of jcrop element manipulating width, height, max-width or max-height of all img tags inside
Fix for the second case is obvious - you need to apply your custom rules only to the images you need adjusted - don't forget Jcrop creates its own elements in DOM in the same container as your initial image.
In case of using CSS3 transitions, you need to call Jcrop after all transitions for your element has finished:
$("#image").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
// your Jcrop code
});
You may encounter similar issues when using scripts to preload images.