jQuery UI Resizable - Synchronous with grid

Question

I have two resizable elements and I need them to resize Synchronously maintaining the grid. It seems that these two option do not work together. Any ideas?

Demo: http://jsfiddle.net/CbYtT/2/ (Try resizing horizontally)

$(function() {

    $( "#this" ).resizable({
        alsoResize: "#that", 
        grid: 100

    });

    $( "#that" ).resizable({
        alsoResize: "#this", 
        grid: 100
    });

});

Answer 1

It's not pretty, but it works.

    $( "#this" ).resizable({
        handles: "e",
        resize: function(event, ui) {
            $( "#that" ).width($(this).width());
            $( "#that" ).height($(this).height());
        },
        stop: function(event, ui) {
            $( "#that" ).width($(this).width());
            $( "#that" ).height($(this).height());
        },
        grid: 100
    });

    $( "#that" ).resizable({
        handles: "e",
        resize: function(event, ui) {
            $( "#this" ).width($(this).width());
            $( "#this" ).height($(this).height());
        },
        stop: function(event, ui) {
            $( "#this" ).width($(this).width());
            $( "#this" ).height($(this).height());
        },
        grid: 100
    });

The working version of your JS fiddle

http://jsfiddle.net/Robodude/CbYtT/3/