I am trying to resize a div with jquery and have the alsoResize trigger: I tried changing the width and then triggering the resize event, but it doesnt work.
fiddle: http://jsfiddle.net/Ns3yn/2/
Thanks!
Asked
Active
Viewed 2,190 times
0
-
What's not working? Looks right to me. – BZink Dec 06 '11 at 15:07
-
The picture isnt being resized (updated fiddle to make it more clear) – chacham15 Dec 06 '11 at 15:09
-
you're declared the resizable correctly, as you can see when you use the mouse to resize. The way you're trying to trigger it programatically doesn't work. – BZink Dec 06 '11 at 15:20
-
@BZink why does the `width()` function not fire a resize event ? i would have thought it should work without the `trigger('resize')` ? – Manse Dec 06 '11 at 15:23
-
Found my answer -> http://stackoverflow.com/questions/229010/jquery-resize-not-working-at-firefox-chrome-and-safari resize doesnt work on DIVs - works on Windows / Frames ... this is why its not working – Manse Dec 06 '11 at 15:24
-
Yeah. Me too. It seems that the UI widget is binding the control to mouse related event handlers, and not the CSS change. – BZink Dec 06 '11 at 15:26
-
@BZink yep - got to the same conclusion .... – Manse Dec 06 '11 at 15:28
-
@BZink how do i do this then? – chacham15 Dec 06 '11 at 15:29
-
@chacham15 have a look at my answer - add the IMG to the selector on the width change – Manse Dec 06 '11 at 15:30
-
@ManseUK is there any way to do it the way that I want though? – chacham15 Dec 06 '11 at 15:32
-
@chacham15 yes CSS - updated my answer ... – Manse Dec 06 '11 at 15:48
3 Answers
2
This issue is an interesting one. My need required me to resize many "alsoResize" objects along with resizing the original object.
For one, it is a requested jQuery UI feature:
Resizable: Expose an API for programatically triggering a resize
But, until that is implemented, in lieu of creating this feature myself, I have found a pretty decent quick solution. The solution comes from here:
Programmatically Resize a resizable element
The solution uses some jquery unit testing libraries that simulate a mouse drag. You can find the necessary libraries here:
jquery.simulate.js
resizable_test_helpers.js
So include those two files above, then you can run code like this:
var handle = ".ui-resizable-se";
TestHelpers.resizable.drag(handle, 50, 50);
This will programatically resize your object by 50 pixels right and down.
bunkscene
- 69
- 8
-
I think it's actually the best solution for unit testing resizable event. – Grégory Jul 24 '15 at 07:37
0
Because nowhere says that the resizable plugin use the resize event to trigger changes. All you need is add .add('img') after window selector to have the expected result
Thanh Trung
- 3,566
- 3
- 31
- 42
-
thats not the point, the point is seperating the code which resizes all the subelements and the code that resizes the whole – chacham15 Dec 06 '11 at 15:16
0
.trigger("resize") doesn't actually trigger the resize event.
If you bind explicitly to the event you'll see this...
$(".window").bind("resize", function(){
alert("resize event");
});
BZink
- 7,687
- 10
- 37
- 55
-
seems that you're incorrect: http://jsfiddle.net/Ns3yn/7/ To be more specific, as I read in the doc: divs can still receive the event if they are manually triggered. – chacham15 Dec 06 '11 at 15:37