What steps will reproduce the problem? 1. Put the crop image within a div that is hidden with display:none 2. Invoke Jcrop on crop image 3. Unhide the div and the crop image will not show

What is the expected output? What do you see instead?

Jcrop seems to work only if the container is visible on invocation. You cannot invoke Jcrop on an image within a hidden container and then unhide that container to display the crop tool. This somewhat limits the functionality of Jcrop within a rich dhtml application.

What version of the product are you using? On what operating system?

Jcrop v0.9.8, Windows Vista Professional, Recent versions of Firefox, Opera, Chrome and Internet Explorer

Please provide any additional information below.

Example html code to illustrate my point is attached. Save to disk and open in your favorite browser. The code hotlinks to image, stylesheet and script files on Jcrop author's demo site so you won't have to download these.

Hi, if you give the main photo a different id like id="jCrop" and then call something like this...

$("#jcrop").live("click", function(){ $(this).Jcrop({ etc... }); });

It should work, at least thats how I got it to work in a modal dialog!

This also worked for me, setting the 'click' event handler using "live()". However, as you might expect, it does require the user to click the image before the jCrop crop-frame is displayed. Anybody have any thoughts on a way around this minor annoyance, so that the jCrop cropping handles show up immediately upon the photo becoming visible?

You can also use

and then something like

$('div').css('height', '100%')

seems to work fine with FF, Chrome and even IE

Excellent fix. I'm using Jquery UI for the tabs of my backend and, of course, the images attached to jcrop didn't appear on the tabs that were not visible by default. Using the fix described by ivokund I changed the styles of the classes ui-tabs-hide and ui-tabs-show, changing the "display: none" hide style to the one described above. It worked perfectly.

I was just about taking out the crop functionality from my backend.

Thanks!

I would consider the solution in comment 3 a workaround, not really a fix. In order to be truly JQuery compatible I would expect it to work with native $jq.show() and $jq.hide().

I ran with the comment one fix - but instead of the user having to click on the image to activate - I ran live on click of my "Crop Image" button (the one that triggers the modal window in the first place). Thanks!

I got it working using the focus event of Jquery Dialog.

focus: function(event, ui) {
// Jcrop setup
$('#dialog_crop_image').Jcrop();
},

For those who need a good solution for such an issue, add an event listener for the jquery tabs once the desired tab has been hit, apply jcrop to the image. Here is the code: $('#tabs').bind('tabsshow', function (event, ui) { if (ui.index == 1) { // 1 stands for the second tab where I need to apply JCrop jQuery(function ($) {$('#target').Jcrop()} } });

Thanks Comment 8... $('#tabs').bind('tabsshow', function (event, ui) { if (ui.index == 1) { // 1 stands for the second tab where I need to apply JCrop jQuery(function ($) {$('#target').Jcrop()} } });

works perfect.

Comment deleted

One day of searching for that problem !! Thanxs for the code ...

Hi, I'm using jCrop within a symfony plugin (sfDoctrineJCroppablePlugin). I'm also using a backend theme plugin called sfAdminThemejRollerPlugin (which uses jqueryUI).

I had the exact same problem when using tabs and jcrop. The solution I found was based on the comments listed here.

Just locate or override the following jquery ui style: .ui-tabs .ui-tabs-hide (in my case it was in jquery-ui.custom.js). Be careful when overriding because it has the display property with '!important'.

And change the style for this values:

.ui-tabs .ui-tabs-hide { visibility: hidden; position: absolute; }

What I'm doing here is to use the visibility property (which still holds the item space), and use a position absolute so the item releases it's space. This dirty hack worked :P for me.

The height: 0px solution didn't do the trick for me, because the browser (FF & Chrome) showed it as a display:hidden style, and the plugin broke. Also had some style issues.