Can't invoke Jcrop on a image that resides in a hidden div

[GoogleCodeExporter]

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.

Original issue reported on code.google.com by eklund.t...@gmail.com on 26 Sep 2009 at 10:03

Attachments:

• jcrop.htm

[GoogleCodeExporter]

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!

Original comment by php.alls...@gmail.com on 2 Oct 2009 at 10:29

[GoogleCodeExporter]

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?

Original comment by dwdani...@gmail.com on 21 Jan 2010 at 9:33

[GoogleCodeExporter]

You can also use 
<div style="overflow:hidden; height:0px;"> [jcrop pictures]</div>

and then something like 

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

seems to work fine with FF, Chrome and even IE

Original comment by ivok...@gmail.com on 6 Jul 2010 at 12:45

[GoogleCodeExporter]

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!

Original comment by comforta...@gmail.com on 19 Jul 2010 at 12:19

[GoogleCodeExporter]

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().

Original comment by harlequi...@styk.net on 9 Dec 2010 at 6:17

[GoogleCodeExporter]

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!

Original comment by stead.ha...@gmail.com on 17 Dec 2010 at 6:22

[GoogleCodeExporter]

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

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

Original comment by Bibliote...@gmail.com on 11 Mar 2011 at 10:23

[GoogleCodeExporter]

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

Original comment by da3...@gmail.com on 6 Sep 2011 at 9:15

[GoogleCodeExporter]

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.

Original comment by emaildoluc on 19 Sep 2011 at 7:11

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

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

Original comment by montagne...@gmail.com on 22 Sep 2011 at 9:13

[GoogleCodeExporter]

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.

Original comment by emanuel....@gmail.com on 21 Feb 2012 at 7:49