How can I cleanly resize an iFrame with dragging functionality?

Question

I have an iFrame and I want the user to be able to grab one side of it and drag it to resize it. I don't want it to resize realtime, but rather use an indicator line and when the user releases, it'll resize.

I'm using jQuery.

Any help?

Place some DIV's at the edges of the IFRAME. Implement dragging functionality on those DIV's. At the mouseup-handler, determine the DIV position and set the IFRAME dimensions accordingly. — Šime Vidas, May 31 '11 at 22:34

score 6 · Answer 1 · answered May 07 '20 at 19:52

6

As of 2020 you can simply add the CSS property resize: both or resize: vertical to the iframe element.

answered May 07 '20 at 19:52

Sebastián Grignoli

32,444
17
71
86

score 6 · Accepted Answer · answered May 31 '11 at 22:33

Iirc, the classical method is to put the IFrame inside of a div and make that div re-sizable; also make the iFrame's width and height at 100%.

If you're using JQuery though, can you not use jQuery.load('uri') instead of an iFrame ? I believe it's preferable in many situations.

Matthew Nessworthy · Answer 3 · 2011-05-31T22:41:05.457

0

~~jQuery Resizable with an indicator as to the eventual dimensions as per your request.~~ See Russ C's comment and link to a better solution

edited May 31 '11 at 22:41

answered May 31 '11 at 22:35

Matthew Nessworthy

1,428
10
19

1

That plugin has/had problems with raw iFrames: http://stackoverflow.com/questions/509118/trouble-using-jquery-ui-resizable-and-ui-draggable-with-an-iframe – Russ Clarke May 31 '11 at 22:37
Thanks Russ, that's a far better solution. – Matthew Nessworthy May 31 '11 at 22:39
What about the drag / snap functionality? – Shamoon Jun 01 '11 at 16:53

score 0 · Answer 4 · answered Jun 02 '11 at 16:37

0

http://jqueryui.com/demos/resizable/#visual-feedback

That seems to do the trick with an iFrame inside a DIV

answered Jun 02 '11 at 16:37

Shamoon

41,293
91
306
570

How can I cleanly resize an iFrame with dragging functionality?

4 Answers4

Linked