jquery-ui-resizable

How to resize ONLY horizontally or vertically with jQuery UI Resizable?

孤街醉人 提交于 2019-11-27 10:04:12
问题 The only solution I've found is to set the max and min height or width with the current value. Example: foo.resizable({ maxHeight: foo.height(), minHeight: foo.height() }); But this is really ugly, especially if I have to change the element's height programmatically. 回答1: You could set the resize handles option to only show on the left and right (or east/west), like this: foo.resizable({ handles: 'e, w' });​ You can give it a try here. 回答2: While the poster was mainly asking for a horizontal

Jquery Draggable AND Resizable

泄露秘密 提交于 2019-11-27 07:37:40
function makeResourceDrag(arrIndexID) { $('#imgA' + arrIndexID).resizable(); $('#imgA' + arrIndexID).draggable({ start: function(event, ui) { isDraggingMedia = true; }, stop: function(event, ui) { isDraggingMedia = false; // Set new x and y resourceData[arrIndexID][4] = Math.round($('#imgA' + arrIndexID).position().left / currentScale); resourceData[arrIndexID][5] = Math.round($('#imgA' + arrIndexID).position().top / currentScale); } }); } This works fine if the resizeable line is taken out, but I want these images to be draggable and resizeable, I get funny behaviours if I try and make the

on click make SVG resizable

笑着哭i 提交于 2019-11-27 06:28:03
问题 How to set SVG resizable "on click" by jQuery UI ? jsfiddle Example HTML <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" x="0.00000000" y="0.00000000" width="480.00000" height="480.00000" id="svg1"> <path d="M 574.28571 350.93362 A 230.00000 230.00000 0 1 1 114.28571,350.93362 A 230.00000 230.00000 0 1 1 574.28571 350.93362 z" transform="translate(-95.71429,-108.5714)" style="opacity:1.0000000;fill:#ffffff;fill-opacity:1.0000000;stroke:none;stroke

jQuery UI Resizable alsoResize reverse

≯℡__Kan透↙ 提交于 2019-11-27 04:02:59
How to make the jQuery UI Resizable alsoResize reverse direction. suppose in the html there is two div tag is there, if i resize in upward means the other thing has to resize downward <script> $(function() { $("#resizable").resizable({alsoResize: ".myiframe"}); }); </script> <div id = "resizable"> This is the resizable content... </div> <div class="myframe"> This must resize in reverse direction... </div> i tried it but of no use please guide to solve this By modifying the code jQuery uses to implement the alsoResize option, we can make our own alsoResizeReverse option. Then we can simply use

A full page layout with resizable panes using jQuery UI

南楼画角 提交于 2019-11-27 00:17:54
问题 I'm trying to create the overall layout of a webapp. The app is full-screen and has a fixed header and three columns/panes. The center pane consists of two rows: The panes should be resizable through dragging the pane edges with the mouse (see arrows in image above). The individual panes have should have vertical scrollbars in case of overflowing content, that is, no global browser window scrollbar. Using jQuery and jQuery UI Resizable, I've created this (partly working) JSFiddle. HTML: <div