jquery-ui-resizable

I was trying to turn the aspect ratios on/off dynamically in JQueryUI resizable, however even after setting the option to false, it keeps maintaining the aspect ratio. Below is the code I am currently working with: $('#aspect_check').click( function() { var ischecked = $('#aspect_check').prop('checked'); if (ischecked) { $( "#resizable" ).resizable( "option", "aspectRatio", .75); } else { $( "#resizable" ).resizable( "option", "aspectRatio", false ); } }); I found a bug report from 3 years ago, which looks like it still hasn't been fixed despite marking it critical. http://bugs.jqueryui.com

Im trying to get a custom handle work with jquery ui resizable widget, but when I use the handles option to pass in a jquery reference to another element, it fails. From what Iv read from the documentation and other examples on the web, this should work just fine. <div class="layer"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div> ​ $('.layer').resizable({ handles: { 'e': $('.right') } }); ​ Here's a fiddle: http://jsfiddle.net/MatteS75/3dwVp/ MatteS I found a workaround. By setting the handles option to null, and setting the classes myself,

Synopsis: If you center a resizable element and expand it left/right, it has the illusion that it is only expanding half of the mouse movement. Reason: This happens because the object is centered. Question: How would you increase the rate that the object is being resized compared to the mouse movement? For centered elements, I'd like the object to expand twice the size of the mouse distance. Given a centered DIV, the best I could think of would be to set the width in the callback. $('#divID').resizable({ handles : 'e,w' , resize : function (event,ui){ ui.position.left = ui.originalPosition

After multiple elemens are selected and dragged, some of them are no more resizable: resize icon disappear from right corner. Resizable icon remains in old place and does not move which moved elements. To reproduce, run code below, select all elements using lasso and drag selected elements. After that resize icon disappers from random elements and those elements are no more draggable. How to fix this ? i tried to fix this by adding $(".designer-verticalline, .designer-rectangle, .designer-field, .designer-image").resizable(); to end of drag() methos but problem persists Reported also in https:

Is there a way to constrain the resizing of a element so that you cannot cover another element? I know you can set the containment to a parent element, but here I just want to stop the user from obstructing the view of another sibling element. If resizing the dialog box on the left, I want the plugin to prevent the user from covering the dialog box on the right: The jQuery UI Resizable control has a number of events available to it, including the " resize " event. This possibly isn't the only way to accomplish this, or even necessarily the best, but it might be one approach. When resizing

I am having some issue with making resizable and draggable work together on an image in chrome. My page has a list of (draggable) images on the side, which can be dropped on a div(the images are cloned). The dropped images should be resizable and draggable. I've written the following Javascript: $(function() { $(".scrollable").scrollable(); $(".draggable").draggable({ helper: 'clone', appendTo: 'body' }); $("#canvas").droppable({ accept: '.draggable', drop: function(e, ui){ if (ui.draggable.attr("class").indexOf('item') == -1){ var clone = $(ui.draggable).clone(); clone.removeClass("ui