Am incercat sa fac o pozitie pentru imagine prin click, dar nu-mi iese pozitia calculata la colturi sa nu depaseasca de 'width' si 'height' sau valori mai mici de zero la 'left','top','right' si 'bottom'.. Cum fac sa nu mai depaseasca pozitia id("wm_viewer") din interiorul lui id("image_image") de valoarea maxima sau valoare mai mica de zero la colturi cele patru ?
de exemplu: clickez in coltul de jos intre right si bottom... imi depaseste top-ul pozitiei id("wm_viewer") adica se vede.. iar la fel si in sus right-top depaseste de valoare zero cu negativ..
Cod: Selectaţi tot
<script src="/1.9.1.jquery.js"></script>
<script src="/1.10.3-ui-jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#image_image").click(function(event){
var El = $("#wm_viewer");
var elem = $(this);
var f = '';
var x = event.clientX;
var y = event.clientY;
var tox = x - (parseInt(30)); //left
var toy = y - (parseInt(30)); //top
if(x > 390 || tox > 390){
El.css({
'left':(parseInt(elem.css('width'))-parseInt(El.css('width')))+'px',
'top':toy+'px'
});
f = ('hmm la right');
} else
if(y > 390 || toy > 390){
El.css({
'left':tox+'px',
'top':(parseInt(elem.css('height'))-parseInt(El.css('height')))+'px',
'bottom':'0px'
});
f = ('hmm la bottom');
} else
if(x < 0 || tox < 0){
El.css({
'left':'0px',
'top':toy+'px'
});
f = ('hmm la left depasire de minus zero');
} else
if(y < 0 || toy < 0){
El.css({
'left':tox+'px',
'top':'0px'
});
f = ('hmm la top depasire de minus zero');
} else
if(x > 0 || tox > 0 || y > 0 || toy > 0){
El.css({
'left':tox+'px',
'top':toy+'px'
});
}
$('.tctt').html(f);
});
});
</script>
<style type="text/css">
#image_image {
border:1px solid black;
width:400px;
height:400px;
position:relative;
}
#wm_viewer {
border:1px solid red;
width:40px;
height:40px;
position:absolute;
}
</style>
<div class="tctt"></div>
<div id="image_image">
<div id="wm_viewer">
</div>
</div>
