Jquery UI - Resizable: alsoResize not accurate?
Ok I'm not using the 'alsoResize' but I've tested and it behaves the same.
Wh开发者_JAVA技巧en you resize the main element, the black border from the bottom element 'marquee' often nudges out of line with the dashed white border from the top element.
$(".layer").resizable({
//alsoResize: '.marquee',
resize: function(event, ui) {
$('.marquee').css({
width : ui.size.width + "px",
height : ui.size.height + "px",
left : ui.position.left + "px",
top : ui.position.top + "px",
});
},
handles: 'all',
aspectRatio: true,
});
http://jsfiddle.net/digitaloutback/uGr3w/3/
Using firebug on a local demo, at the stage they go out of line, you can see the inline element styles for left, top and width, height are different.
I wonder if a work around would be to send the position and size stats to function which outputs an exact measurement to both elements? Any simpler options? Thanks
UPDATE:
I've got a workaround which works cleanly.. it is to pass the resizable-calculated dimensions to a function which sets the top layer to these dimensions also.
I'm sure there's a more efficient method to do this, feel free to offer an optimised version..
http://jsfiddle.net/digitaloutback/VDfpY/5/
There seems to be a discrepancy in the size and position reported by the ui parameter to the resize event, and the actual sizes and positions. This is possibly due to a delay between the ui parameter being built and the event being fired.
I experimented using the actual position and size reported at the time of the event running:
$('.marquee').css({
'left' : $(this).position().left,
'top' : $(this).position().top,
'width' : $(this).width(),
'height' : $(this).height()
});
This seems to match much more precicely the actual dimensions. http://jsfiddle.net/VDfpY/1/
How about this? Let the CSS handle the sizes and not the JS http://jsfiddle.net/HerrSerker/uGr3w/5/
--edit added code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".layer").resizable({
handles: 'all',
aspectRatio: true,
});
});
</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />
<link type="text/css">
#canvas {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
background: #999}
.marquee {
border: 1px dashed #fff;
position: absolute;
left: -1px; top: -1px;
width: 100%; height: 100%;
display: block;
z-index: 2500;
}
.layer {
border: 1px solid black;
position: absolute;
left: 150px; top: 150px;
width: 250px; height: 226px;
display: block;
z-index: 2501;
}
</link>
<body>
<div id="canvas">
<a class="layer" href="#"><span class="marquee"></span></a>
</div>
</body>
加载中,请稍侯......
精彩评论