jquery-ui-resizable

I have an html table within a container. the container has a height, and its overflow y set to auto to create a scrollbar .table-container { height: 175px; border-bottom: 2px solid #EEEEEE; overflow-y: auto; } I have also made the container resizable using JQuery UI resizable. $(function () { $(".table-container").resizable({ handles: "s" }); }); unfortunately when I use the scrollbar my resizable handles moves. I would like for it to stay at the bottom of the container. here is the fiddle. https://jsfiddle.net/oyb3r6u8/1/ enter link description here You could use jquery to maintain the

Looks like that when resizing an HTML element, the windows' resize event gets fired as well. Since I want to execute different logic when resizing elements and when the window gets resized, is there a non-hackish way of dealing with this? http://jsfiddle.net/CPUwW/1/ $(function(){ $(window).on('resize', function(){ // This event gets fired when the #my_element div gets resized, event if // window doesn't get resized itself $('#text').text(++resizes); }); $('#my_element').resizable(); }); In other words, the problem is that when I resize an element, the resize event gets fired for all of it's

Is it possible to make the handle thicker, for easier grabbing? For example, in the link below, you will notice that I have a handle on a div at the bottom only, which is difficult to get hold of using the mouse as it seems to be 1px high. Is it possible to make the handle 10px heigh, so it looks and feels like the image is being grabbed? http://jsfiddle.net/rYFEY/25/ .ui-resizable-s { bottom: 0; height: 10px; } See: http://jsfiddle.net/thirtydot/rYFEY/376/ + rgba for clarity: http://jsfiddle.net/thirtydot/rYFEY/377/ + rgba - overflow: hidden with the default bottom: -5px : http://jsfiddle.net

I'll try to make it clear with words : I would like to know if there is a way with jquery-ui-resizable to resize an object on the 4 sides at the same time, so that the center of the object stay at the same position. Here is the sandbox http://jsfiddle.net/V79Ge/ So, it's quite like the aspectRatio=true, but while I resize the object from one side, it would control the 3 other sides Thank you for your clues! Is this the effect you're after: jsFiddle example . jQuery: $('#resizeMe').resizable({ aspectRatio: true, resize: function(event, ui) { $(this).css({ 'top': parseInt(ui.position.top, 10) +

I am using JQuery UI to implement resizable/draggable elements. Now I would like to define a containment for these elements that limits the resizing/dragging on exactly three(!) sides. E.g. have a look at this JSFiddle example . You can see that the contained element can only be resized/dragged inside the parent's area. What I would like to achieve is that the element can exceed the bottom threshold and be moved to beyond the bottom border of the parent. Nevertheless the resizing/dragging should still be limited at the top, right and left sides as is prescribed by the parent's according