Positionning issue in Chrome about imgareaselect HOT 15 OPEN

We made some changes and problem has been resolved with "parent" property. You can can close this bug I guess. Thanks.

from imgareaselect.

When using "parent", solution we have found is the following by replacing :

while ($p.length) {
    zIndex = max(zIndex,
        !isNaN($p.css('z-index')) ? $p.css('z-index') : zIndex);
    if ($p.css('position') == 'fixed')
        position = 'fixed';

    $p = $p.parent(':not(body)');
}

with

while ($p.length) {
    zIndex = max(zIndex,
        !isNaN($p.css('z-index')) ? $p.css('z-index') : zIndex);
    if ($p.css('position') == 'fixed')
        position = 'absolute';

    $p = $p.parent(':not(body)');
}

from imgareaselect.

What is the "parent solution" ?

from imgareaselect.

hi notflip, sorry a long time ago, I really do not remember, only change I have seen here is position 'fixed' replaced with 'absolute' but....I do not know anymore ;)

from imgareaselect.

Hi! I just manage to solve the problem..

Bootstrap 2 was overriding some of the css that was causing this issue, in bootstrap.css

img {
    width: auto\9;
    height: auto;
    /* max-width: 100%; DISABLE FOR IMGAREASELECT */
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

from imgareaselect.

Integrating bootstrap (we all do now) means to be careful about its own css properties. But my fix was for environment with no bootstrap at that time.

from imgareaselect.

@notflip +1 You're awesome... I spent about half a day on this bug sifting my own code before I thought to check the docs.

from imgareaselect.

Thanks josephspens. I've also spent tons of time to get imgareaselect working. The trick is to not resize the image with css. Problem is when users upload images that are larger then your screen.

I managed to resize them first with php, before they are loaded in the imgareaselect window, so they're never larger then the users' screen

from imgareaselect.

What I ended up doing was leaving it 100% width (css resize), but pass into the plugin the original image dimensions. Plugin takes care of itself 👍

from imgareaselect.

Doesn't the user get a wrong idea of what the image will look like?

from imgareaselect.

If you just css resize and use the plugin, then yes. Lets say the resized image is 25% of the original image, and I select all of the newly resized image believing I'm selecting all of it, I would actually be selecting 25% of the image. In my code I'm using this for cropping, so when I would select the entire image (believing it wouldn't crop anything), I would only see the top left corner of my photo.

When you pass in the imageWidth and imageHeight parameters to the plugin, you're telling it what the original image's dimensions are, so the plugin scales everything for you. Now when you select 25% of the resized image, you're selecting 25% of the original image also, not 25% multiplied by the scaling factor.

from imgareaselect.

Hi josephspens,
did you managed to use the "imageWidth" and "imageHeight" option ?

I am currently having a problem with it, I am scaling the image with css (100% width), and I've called the original imageWidth and imageHeight in the option. But, I noticed that I always getting "infinity" on "Y" coordinates and NaN on "H" (height) (I set the hidden-field of "y" into a text-field, and set the option "onSelectEnd" to "setInfo") and the resulting image is not as it is on the previewed area.

Did anyone facing the same problem here ?

Preview :

from imgareaselect.

@bimo13 my issue was resolved by following the steps I outlined in my comment. I don't remember the situation exactly, but I don't recall getting any of the errors you're seeing.

Coincidentally I'm actually building a new feature which also requires photo cropping, so I may use this plugin. I'll see if I run into this problem again.

from imgareaselect.

@josephspens
Hi there, thanks in advance for your fast response, and sorry to bother you.
It seems like I've found the problem, yet I still can't resolve it.

The thing is, I'm trying to crop preview-selected image before uploading it (I generate a preview right after user browse the image from their computer and set this plugin on that image-preview). That's where the problem started. If I used the actual image (not scaling the image preview with CSS), it has no problem at all. Same thing when I used the image from uploaded image-directory on server, there's no problem at all.

Well, could anyone help me with this ?
Thanks.

from imgareaselect.

All problems solved, sorry to bother you all. Thanks in advance to @odyniec for this wonderful plugin :)

from imgareaselect.