#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 )
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 9 years ago by
Resolution: | → duplicate |
---|---|
Status: | new → closed |
comment:2 Changed 5 years ago by
Description: | modified (diff) |
---|
Note: See
TracTickets for help on using
tickets.
Duplicate of #6844.