ImgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).
I have a problem with position of area in modal window.
When I open modal window, box and outer boxes are positioned at a scrolled distance ( http://c2n.me/inJHEd ).
I fix it like this:
In update function (line 322) i change this:
$box.css({ left: viewX(selection.x1), top: viewY(selection.y1) })
.add($area).width(w = selection.width).height(h = selection.height);
to this:
$box.css({ left: viewX(selection.x1), top: viewY(selection.y1)-$(window).scrollTop() })
.add($area).width(w = selection.width).height(h = selection.height);
and this:
$($outer[0]).css({ left: left, top: top,
width: selection.x1, height: imgHeight });
$($outer[1]).css({ left: left + selection.x1, top: top,
width: w, height: selection.y1 });
$($outer[2]).css({ left: left + selection.x2, top: top,
width: imgWidth - selection.x2, height: imgHeight });
$($outer[3]).css({ left: left + selection.x1, top: top + selection.y2,
width: w, height: imgHeight - selection.y2 });
to this
I have a problem with position of area in modal window. When I open modal window, box and outer boxes are positioned at a scrolled distance ( http://c2n.me/inJHEd ). I fix it like this: In update function (line 322) i change this: $box.css({ left: viewX(selection.x1), top: viewY(selection.y1) }) .add($area).width(w = selection.width).height(h = selection.height); to this: $box.css({ left: viewX(selection.x1), top: viewY(selection.y1)-$(window).scrollTop() }) .add($area).width(w = selection.width).height(h = selection.height);
and this: $($outer[0]).css({ left: left, top: top, width: selection.x1, height: imgHeight }); $($outer[1]).css({ left: left + selection.x1, top: top, width: w, height: selection.y1 }); $($outer[2]).css({ left: left + selection.x2, top: top, width: imgWidth - selection.x2, height: imgHeight }); $($outer[3]).css({ left: left + selection.x1, top: top + selection.y2, width: w, height: imgHeight - selection.y2 }); to this
$($outer[0]).css({ left: left, top: top-$(window).scrollTop(), width: selection.x1, height: imgHeight }); $($outer[1]).css({ left: left + selection.x1, top: top-$(window).scrollTop(), width: w, height: selection.y1 }); $($outer[2]).css({ left: left + selection.x2, top: top-$(window).scrollTop(), width: imgWidth - selection.x2, height: imgHeight }); $($outer[3]).css({ left: left + selection.x1, top: top-$(window).scrollTop() + selection.y2, width: w, height: imgHeight - selection.y2 });
its help for me: http://c2n.me/inJLgg