Opened 6 years ago

Closed 6 years ago

Last modified 16 months ago

#9577 closed bug (duplicate)

jquery resizable not working properly at 90 and 270 angles

Reported by: suganthibalaji Owned by:
Priority: minor Milestone: none
Component: ui.resizable Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by Ryan J Ollos)

I'm using jquery resizable plugin to resize elements using resizable handles but it doesn't working after rotating element.

resizable handles and its subsequent resize operations not working properly after rotation exactly at 90 and 270 degrees because resizable not aware of rotation angle.

In following code i just find the rotation angle and changed handles direction according to rotation angle but it doesn't working properly at 90 and 270 due to height and width problem i tried to fix but i couldn't,help me

    $('#screenlayer_'+count+ ' .polaroid').resizable({
    handles:'se, sw, ne, nw',
    zIndex : 10000,
    delay: 0,
    create:function() {

    },
    start:function(event, ui){


    },  //start:function(event, ui)
    resize:function(event, ui){
                       var matrix = $(this).css("-webkit-transform") ||
      $(this).css("-moz-transform")    ||
      $(this).css("-ms-transform")     ||
      $(this).css("-o-transform")      ||
      $(this).css("transform");
      if(matrix !== 'none') {
          var values = matrix.split('(')[1].split(')')[0].split(',');
          var a = values[0];
          var b = values[1];
          var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
      } 
      else { 
          var angle = 0; 
      }
      if(angle < 0) 
          angle +=360;

        console.log(angle)

         if((angle >= 0 && angle  < 45 ) || (angle < 361 && angle >= 315))
      {
          $(this).parent().find('.ui-resizable-sw').css({
              'bottom':'-10px','left':'-10px','top':'','right':''
          });
          $(this).parent().find('.ui-resizable-nw').css({
              'top':'-10px','left':'-10px','bottom':'','right':''
          });
          $(this).parent().find('.ui-resizable-se').css({
              'bottom':'-10px','right':'-10px','top':'','left':''
          });
          $(this).parent().find('.ui-resizable-ne').css({
              'top':'-10px','right':'-10px','bottom':'','left':''
          });
      }
      else if(angle >= 45 && angle < 135)
      {
          $(this).parent().find('.ui-resizable-nw').css({
              'bottom':'-10px','left':'-10px','top':'','right':''
          });
          $(this).parent().find('.ui-resizable-sw').css({
              'bottom':'-10px','right':'-10px','top':'','left':''
          });
          $(this).parent().find('.ui-resizable-ne').css({
              'top':'-10px','left':'-10px','bottom':'','right':''
          });
          $(this).parent().find('.ui-resizable-se').css({
              'top':'-10px','right':'-10px','left':'','bottom':''
          });   
      }
      else if(angle >=135 && angle < 225)
      {
          $(this).parent().find('.ui-resizable-ne').css({
              'bottom': '-10px','left':'-10px','top':'','right':''
          });
          $(this).parent().find('.ui-resizable-nw').css({
              'bottom': '-10px','right':'-10px','top':'','left':''
          });
          $(this).parent().find('.ui-resizable-se').css({
              'top': '-10px','left':'-10px','bottom':'','right':''
          });
          $(this).parent().find('.ui-resizable-sw').css({
              'top': '-10px','right':'-10px','left':'','bottom':''
          });               
      }
      else if(angle >=225 && angle < 315)
      {
          $(this).parent().find('.ui-resizable-se').css({
              'bottom':'-10px','left':'-10px','top':'','right':''
          });
          $(this).parent().find('.ui-resizable-ne').css({
              'bottom':'-10px','right':'-10px','top':'','left':''
          });
          $(this).parent().find('.ui-resizable-sw').css({
              'top': '-10px','left': '-10px','bottom':'','right':''
          });
          $(this).parent().find('.ui-resizable-nw').css({
              'top':'-10px','right':'-10px','left':'','bottom':''
          });   

      }


    },
    stop:function(event , ui) 
    {


    }
}); 

appreciating any help,Thanks.

Change History (2)

comment:1 Changed 6 years ago by Scott González

Resolution: duplicate
Status: newclosed

Duplicate of #6844.

comment:2 Changed 16 months ago by Ryan J Ollos

Description: modified (diff)
Note: See TracTickets for help on using tickets.