I just want to protect aspect ratio from one handle. I tried to run it with this code but it doesn't helped me. Do you have any solutions?

  $( "#resizable").resizable({
   handles: 'se,e,w',
   aspectRatio: true,
    start: function(e,ui) {
      if (jQuery(e.originalTarget).hasClass("ui-resizable-se")) {
         aspectRatio: false;
      }
    }
      });

Special thanks to any solution..

EDIT: Problem SOLVED. You can see solution here:

I just want to protect aspect ratio from one handle. I tried to run it with this code but it doesn't helped me. Do you have any solutions?

  $( "#resizable").resizable({
   handles: 'se,e,w',
   aspectRatio: true,
    start: function(e,ui) {
      if (jQuery(e.originalTarget).hasClass("ui-resizable-se")) {
         aspectRatio: false;
      }
    }
      });

Special thanks to any solution..

EDIT: Problem SOLVED. You can see solution here: https://stackoverflow./a/18101710/2572291

• javascript
• jquery
• jquery-ui
• resize
• jquery-ui-resizable

Share Improve this question Follow edited May 23, 2017 at 10:09 CommunityBot 111 silver badge asked Aug 2, 2013 at 11:50 Adam CrothAdam Croth 9522 silver badges1111 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

There are many unanswered questions about this bug.

Here is the solution that works for you :)

http://jsfiddle/882k9/

    <script>
    var changedRatio  = "DK"; //DK->dont keep
    var nowResizing   = "NO";
    $(function() {
      $('#resizable').resizable({
          start:function(event,ui){
            nowResizing = "YES";
          },
          stop:function(event,ui){
            nowResizing = "NO";
          }
        });
      $(document).on('mouseenter', '.ui-resizable-e', function(){
          if(changedRatio!="DK"){
            if(nowResizing!="YES"){
              var targetDiv = $(this).parent().attr("id");
              dontKeep(targetDiv);
            }
          }
      });

      $(document).on('mouseenter', '.ui-resizable-se', function(){
          if(changedRatio!="K"){
            if(nowResizing!="YES"){
              var targetDiv = $(this).parent().attr("id");
              keep(targetDiv);
            }
          }
      });
      $(document).on('mouseenter', '.ui-resizable-s', function(){
          if(changedRatio!="DK"){
            if(nowResizing!="YES"){
              var targetDiv = $(this).parent().attr("id");
              dontKeep(targetDiv);
            }
          }
      });
    });

function dontKeep(val){
    $("#"+val).resizable("destroy");
    $("#"+val).resizable({
      aspectRatio:false,
      start:function(event,ui){
          nowResizing = "YES";
        },
      stop:function(event,ui){
          nowResizing = "NO";
      }
    });
    changedRatio  = "DK";
  }
  function keep(val){
    $("#"+val).resizable("destroy");
    $("#"+val).resizable({
      aspectRatio:true,
      start:function(event,ui){
          nowResizing = "YES";
        },
      stop:function(event,ui){
          nowResizing = "NO";
      }
    });
    changedRatio  = "K";
  }
    </script>


<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable</h3>
</div>

A slight variation that worked for me, perhaps because of newer version of jQuery. The handles at the four corners will maintain the aspect ratio, while the handles on the sides won't.

$elements.resizable({
  handles: "all",

  start: function(event, ui) {
    var handle = $(this).data('ui-resizable').axis;

    // We should maintain the aspect ratio for corners, not for sides
    var maintain_aspect_ratio = (["n", "e", "s", "w"].indexOf(handle) == -1);

    $(this).resizable( "option", "aspectRatio", maintain_aspect_ratio )
      .data('ui-resizable')
      ._aspectRatio = maintain_aspect_ratio;
  }, 

  ...

A simple solution that worked for me

var is_se = ($(this).data('uiResizable').axis == "se");
$(this).resizable( "option", "aspectRatio", is_se ).data('uiResizable')._aspectRatio = is_se;

I think you should provide an aspect ratio rather than true.

aspectRatio: 16 / 9 

OR

aspectRatio: 4 / 3 

Refer http://jqueryui./resizable/#aspect-ratio

OR

$( "#resizable:not(ui-resizable-se)").resizable({
   handles: 'se,e,w',
   aspectRatio: 16/9
});