Cannot drag selection in Jcrop, what could break it?

Question

I'm at a loss. I'm using JQuery 1.4.2 and JCrop 0.98. Everything else works fine, but I cannot move a selection once created. When I mouse over the selection and click, nothing happens.

I have the JQuery library, the JCrop library and the JCrop css file all included. It's a pretty clean page without much else on it. I don't know if I'm accidentally overriding something in my own javascript and css in such a way that it breaks JCrop, there's quite a bit of both. But Firebugs isn't turning anything up.

The tutorials work fine with my browse and on my server, though they do use a different version of jquery. However, when I replace the version they originally used with the version I use they continue to work just fine. So it has to be something to do with my javascript or css.

I'm at a completely loss here, I'm looking at everything I can think of for where an issue might be, but I don't even know where to look. Has anyone else ever run into this issue before? What was the problem and how did you solve it? Where should I look for an error or bad override?

Mesh

Answer 1

Problem solved:

* { margin: 0; padding: 0; position: relative; }

The position: relative; was overriding JCrop's need for absolute positioning. Once removed, it worked beautifully. I'd needed it for other stuff, but I just applied it on a more precise basis.

Took me forever to find it though, had to take both my javascript and css into one of their demo files and check each piece for conflict. Pain in the butt.

If you experience a similar problem, check to see if you have a similar conflict of positioning.

Mesh

You probably saved me hours of useless debugging. +1 – Ejective

Kudos to you sir. Saved the rest of my afternoon. – Aric

Answer 2

Another reason this could happen is if you forget to include the css.

Fecundity

Turns out that was my problem! – Foretop

Same here. Feel so dump now. – Zoochemistry

Answer 3

I ran into the problem in a project where someone had declared position relative on all divs in the CSS. Unfortunately it would have required too much work to fix it, so I had to dig through the code a bit to find a fix.

With the latest jCrop library (Jcrop-0.9.12 at the time of this posting) there is a minor change to the script that fixed the issue for me.

At around line 1122 in jquery.Jcrop.js looks like this:

       if (Touch.support) {
            $track.bind('touchstart.jcrop', Touch.createDragger('move'));
        }

        $img_holder.append($track);
        disableHandles();

By changing the $img_holder.append($track) to $hdl_holder.append($track) and ensuring that the $hdl_holder is position absolute, it resolved this issue for me. Something with the relative positioning and zindexing was killing it for me.

The two changes to the script I made are:

Line 350 jquery.Jcrop.js:

$hdl_holder = $('<div />').width('100%').height('100%').css('zIndex', 320), 

Changed to:

$hdl_holder = $('<div />').width('100%').height('100%').css({
    zIndex: 320,
    position: 'absolute'
}),

Line 1122 jquery.Jcrop.js:

$img_holder.append($track);

Changed to:

$hdl_holder.append($track);

Carvey

$img_holder = $('<div />').width('315px').height('315px').css({ zIndex: 310, position: 'absolute', overflow: 'hidden' }), $hdl_holder = $('<div />').width('100%').height('100%').css({ zIndex: 320, position: 'absolute' }), $sel = $('<div />') .css({ position: 'relative', zIndex: 600 }).dblclick(function(){ var c = Coords.getFixed(); options.onDblClick.call(api,c); }).insertBefore($img).append($img_holder, $hdl_holder); ........... AND ALSO DONE ON LINE 1122 AS YOU SAID ... BUT DRAGER NOT MOVE ALL SIDE OF IMAGE. ANY IDEA? – Rabush

Could be a z-index issue. I would play around with the z-index values in firebug or chrome developer tools to try and determine the source of the issue. – Carvey