Skip to main content

Search and Top Navigation

#9577 closed bug (duplicate)

Opened September 28, 2013 05:57AM UTC

Closed September 28, 2013 02:51PM UTC

Last modified May 02, 2018 05:45AM UTC

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

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.

Attachments (0)
Change History (2)

Changed September 28, 2013 02:51PM UTC by scottgonzalez comment:1

resolution: → duplicate
status: newclosed

Duplicate of #6844.

Changed May 02, 2018 05:45AM UTC by rjollos comment:2

description: \ 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. \ 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 \ \ {{{#!js \ $('#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.