jQuery resizable centered div with grid producing unexpected results

Question

I have a div that is centered on the page using css - margin: 0 auto; This is essential

jQuery resizeable is connected to the div so that it can be resized horizontally.

The 'grid' option for resizeable has also been added as other functions are triggered during resize and these functions were being called too many times without the grid option activated.

i have also added a jquery position to the resizable div to keep it centered during resize otherwise when you drag the left edge it loses it's center position.

The problem is that the mouse moves further and further away from the left edge the wider you drag the div to the left or right. The left/right edge of the div should always be snapping to the mouse position.

Also the ui.size.width is reporting a value much higher than the actual width of the div.

I have tried numerous fixes but nothing seems to work.

Here's the code with a jsfiddle link below it:

The HTML:

<div id="container">
    <div class="resize">
        Lorem
        <br/>ipsum
        <br/>dolor
        <br/>sit
        <br/>amet
        <br/>Consectetuer
        <br/>Lorem
        <br/>magna
        <br/>mi
        <br/>wisi
     </div>
</div>

<div id="width-output"></div>
<div id="ui-width-output"></div>

The CSS:

#container {
    width:100%;
    background-color:#999999;
}
.resize {
    width:240px;
    margin:0 auto;
    background-color:#ccc;
    text-align:center;
}

#ui-width-output, #width-output  {
    text-align:center;
}

The jQuery:

$(document).ready(function () {
    $(".resize").resizable({
        grid: [80, 80],

        handles: 'e, w',
        resize: function (event, ui) {

            ui.size.width += ui.size.width - ui.originalSize.width;

            var container =  $('#container');

            var position = $(this).position();
            var container_position = container.position();
            var top_position = position.top - container_position.top;

            var offset = 'center top+' + top_position;
            $(this).position({
                of: $(container),
                my: offset,
                at: "center top",
                collision: "fit none"
            });

            $('#width-output').html('actual width: ' +  $(this).width() );            
            $('#ui-width-output').html('ui.size.width: ' +  ui.size.width);

        }

    });
});

I have created a test case so that all this makes more sense!

http://jsfiddle.net/bennyticklez/S5tN8/51/

Thanks in advance.

I just added it to the jsfiddle example and it still has the same issue — BennyTicklez, Dec 11 '13 at 12:58
Ok, look here http://jsfiddle.net/S5tN8/67/. I use the containment property of the resizable jquery UI plugin. I also add a min-width css property on your .resize div — Fab, Dec 11 '13 at 13:15
Thanks for your input but the left edge is not resizing and there is no longer a grid. — BennyTicklez, Dec 11 '13 at 13:28
The mouse is still moving further and further away from the edge of the resizeable. Also if you resize the window/container the div is no longer centered. If you make the window bigger you will see that the mouse gets further and further away from the resizeable edge the wider you make it — BennyTicklez, Dec 11 '13 at 14:05
I add some code in the window resize event. It looks pretty good on Chrome http://jsfiddle.net/S5tN8/135/ — Fab, Dec 11 '13 at 16:48

score 3 · Accepted Answer · answered Dec 11 '13 at 14:19

ui.size.width += ui.size.width - ui.originalSize.width; is giving you half of what you would need. It might help if you were to double the changes to accomodate each side, something more like:

$(".resize").resizable({
    grid: [80, 80],
    handles: 'e, w',
    resize: function(event, ui) {
        var newWidth = ui.originalSize.width+((ui.size.width - ui.originalSize.width)*2);
        $(this).width(newWidth).position({
            of: $("#container"),
            my: "center center",
            at: "center center"
        });
    }
});

I made a fiddle: http://jsfiddle.net/filever10/fYQ58/

Although I also found this, so the way that you had it used to do what you want it to: http://jsfiddle.net/xhAU4/2/

It works!! Thanks so much for your answer. It's been bugging me for ages. Once my rep is higher I will come back and vote this up. You are awesome! — BennyTicklez, Dec 11 '13 at 20:34

score 0 · Answer 2 · answered Feb 17 '16 at 15:09

Bit of a hack, but wrote a small function to do do a very simple calc to keep the position centered. The rotatable element is in a parent element for simplicity.

HTML:

<div id="container">
    <div id="resize-me"></div>
</div>

JS:

$( '#resize-me' ).resizable 
    (   {
            handles:        {   'se': '#resize-handle'  },
            aspectRatio:    true,
            resize:         function(){ positionObject( $( this ) );    }
    }   );

function    positionObject( resizeElement )
{
    resizeElement.css( 'left', ( resizeElement.css( 'width' ).replace( 'px', '' ) / -2 ) );
    resizeElement.css( 'top', ( resizeElement.css( 'height' ).replace( 'px', '' ) / -2 ) );

    // console.log(resizeElement.css( 'left' ) );
    // console.log(resizeElement.css( 'top' ) );
}

NOTE: This has issues if not using aspect Ratio, for the project I needed this for it's not an issue — el-Cheeso, Feb 17 '16 at 16:35

jQuery resizable centered div with grid producing unexpected results

2 Answers2