Search code examples
javascriptjquerycssjquery-uiresizable

Jquery UI - Resizable: alsoResize not accurate?

Ok I'm not using the 'alsoResize' but I've tested and it behaves the same.

When 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/

Solution

  • 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>