CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-resizable
castillo.io
castillo.io

Reputation: 942

jQuery UI Resizable - Synchronous with grid

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

});

Upvotes: 1

Views: 3885

Answers (2)

Jason Lee
Jason Lee

Reputation: 1

This can get really ugly if you have say 10 or more elements that you need to resize. Instead lets point the resize to the class shared by all the elements you want to resize. You can resize like this from any of the elements.

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

http://jsfiddle.net/CbYtT/240/

Upvotes: 0

RoboKozo
RoboKozo

Reputation: 5062

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/

Upvotes: 5

Related Questions