jump on initial click after animateTo (docOffset must be reset when checking mouseAbs)

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Initialize jcrop image beneath a resizeable DIV
2. hide/shrink the resizeable div
3. animage jcrop selection
4. select the jcrop box to move (drag)

pseudo-code:

<div id="header" style="height:500;width=100%">&nbsp;</div>
<img id="crop_image" src="...." ... />
<script>
jQuery('#header').slideToggle();
jQuery('#crop_image').JCrop....
</script>

What is the expected output? What do you see instead?
The box jumps, instead of smoothly dragging. Subsequent clicks (or, in fact, 
clicking once before the click-drag) produces the proper smooth drag.

Please provide any additional information below.
I was able to fix this by placing:

docOffset = getPos($img);

in the first line of "mouseabs". It causes the docOffset to be re-set when 
determining dragging mouse position, instead of assuming that it is the same as 
when first initialized.

Original issue reported on code.google.com by prattbon...@gmail.com on 20 Jul 2010 at 2:48

[GoogleCodeExporter]

I had the same issue and I fixed it by adding that call to createDragger(), 
before the line that contains the mouseAbs(e) call. That way, it is not called 
for every mouseAbs(e) call that is done. Since I only had the issue with 
dragging the selection box around, this solved things sufficiently.

Maybe there is a scenario where a resizeable div is resizing during the 
dragging of the selection, but it doesn't seem a very likely scenario to me 
(and above all a menace to the user ;-).

Original comment by mmakaa...@gmail.com on 14 Oct 2010 at 1:28

[GoogleCodeExporter]

Hi,
I am also facing the same problem and the above solution does not work for me. 
I get the issue if I scroll the page down before clicking on the image to crop 
it. If I click on the image anywhere before scrolling the page, then it works 
fine. Normally the image in my web page is not on top of the page, I require to 
scroll the page down a little and then start cropping. Please suggest something.

Original comment by raoufat...@gmail.com on 23 May 2011 at 7:41

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I'm stuck on the same issue, I have multiple croppers on a vertical page, the 
topmost and bottommost croppers work, but any in between them jump on the 
initial click, and then do as required on the secondary click.

The first method didn't work for me, and I'm not sure how to implement the 
second one, I'm a newbie with JQuery. Can anyone give me a nudge in the right 
direction?

Forgot to mention this only happens on Safari and Chrome for me.

Original comment by guy.armi...@gmail.com on 15 Nov 2011 at 1:53

[GoogleCodeExporter]

Hi,

Here's the diff showing how we fixed it:

diff jquery.jcrop.min.js.original jquery.jcrop.min.js
189c189
< {if(options.keySupport){$keymgr.show();$keymgr.focus();}}
---
> {if(options.keySupport){$keymgr.show();}}

Hope it helps!

Rich

Original comment by googlea...@formoda.co.uk on 16 Nov 2011 at 12:04

[GoogleCodeExporter]

I know how inadequate what I am about to say is but I can't stop myself.

I love you Rich.

Problem solved, the key events no longer work but thats something I am ready to 
leverage for a working cropper.

Thanks again!

Original comment by guy.armi...@gmail.com on 16 Nov 2011 at 1:40

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Hi,

problem solved without losing the key events.

Only change:
------------------------
      var $keymgr = $('<input type="radio" />').css({
        position: 'fixed',
-------------------------

to:
------------------------
      var $keymgr = $('<input type="radio" />').css({
        position: 'absolute',
-------------------------

Andre.

Original comment by alsprude...@gmail.com on 4 Dec 2012 at 3:57

[GoogleCodeExporter]

Thanks Rick

Original comment by sagars...@gmail.com on 6 Jun 2014 at 6:08