paradise_human paradise_human - 4 months ago 51
jQuery Question

Wrong position imgAreaSelect plugin in bootstrap modal window

I have a problem with imgAreaSelect plugin in Bootstrap.
I set parent in initializing imgAreaSelect to prevent scroll moving area :

thumb.imgAreaSelect({
handles: true,
aspectRatio: '1:1',
fadeSpeed: 300,
parent: "#thumbBox"
})


and this is my html :

<div class="modal-body">
<div class="row">
<div class="col-xs-12" style="font-weight:bold;">
Upload your picture and crop it.
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="thumbBox">
<img id="thumb" class="img-responsive" />
</div>
</div>
</div>


whene I trying to select an area,ImgAreaSelect selects an area outside the picture but points ( I mean x1,x2 etc) are exactly that I want(the functionality works correct but in interface there is problem).
In smaller devices's,ImgAreaSelect interface is nit but in some situation it mess up !
I used to search a lot but i didn't find anything useful.
How can i fix this problem ?

UPDATE :
I solved this My self...
Refer to this link :
github

We must remove these lines from code :

/* Also check if any of the ancestor elements has fixed position */
if ($p.css('position') == 'fixed')
position = 'fixed';


And we must position relative the parent box that we initialized ourselves( parent: "#thumbBox").

Answer

I mean the parent div of Image that you want to use image area select on it , must be position relative .

 <div id="thumbBox" style="position:relative;">
     <img id="thumb" class="img-responsive" />
   </div>

And We must remove these lines from jquery.imageareaselect.js :

/* Also check if any of the ancestor elements has fixed position */ 
        if ($p.css('position') == 'fixed')
           position = 'fixed';