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,
});

/

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

/

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/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/digitaloutback/VDfpY/5/

• javascript
• jquery
• css
• jquery-ui
• resizable

2 Answers 2

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/VDfpY/1/

How about this? Let the CSS handle the sizes and not the JS http://jsfiddle/HerrSerker/uGr3w/5/

--edit added code

<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis./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./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>