ansaurus

Question

jqueryui resizable Unable to set iframe as resizable

Answer 1

+2 A:

That resizable doesn't work could be considered a bug. (Hint maybe file one?). But it is certainly disputable.

For elements which don't support child nodes there is a special check in the plugin

if(this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i)) {

if this matches a wrapper div is automatically generated for you by the plugin.

If you append iframe to this list

if(this.element[0].nodeName.match(/canvas|textarea|input|select|button|img|iframe/i)) {

The sample would work like provided by you.

But iframe accepts children, the problem is you only seem them when your browser doesn't support inline frames. You can check the following if your browser allows you to turn of iframe support (e.g. Opera)

e.g. when your browser doesn't understand iframes you would see a resizable element which says "hello"

#iframeid { background-color:green; height:200px; width:400px}
$("#helloiframe").resizable();
<iframe id="iframeid" src="http://google.com" ><p>hello</p></iframe>

But as most browsers understand iframes you don't get to see the children of the iframe. The handles used by jquery resizable are a div which gets appended to the element so you don't get see the handles.

In the end I conclude that the resizable plugin in the special case iframe behaves correctly and you should just wrap your iframe in a div.

Hope I was clear.

The div showed the resizable controls for me. Only the iframe did not show the controls.

The following works for me:

wrapped iframe in a div
made div resizable
wrapper div and iframe initial same width and height
pass iframe id in as option to resizable() {alsoResize: '#iframeid'}

Check out http://jsbin.com/arato/ or the following.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;
    <title>Sandbox</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style type="text/css" media="screen">
      body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
      #test { background-color: red; height: 200px; width: 400px; }
      #hello { background-color: blue; height: 200px; width: 400px; }
      #helloiframe { height: 200px; width: 400px; }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#test").resizable();
        $("#hello").resizable({ alsoResize: '#helloiframe' });
      });
    </script>
  </head>
  <body>
    <div id="test">Hello from JS Bin</div>
    <div id="hello">
      <iframe id="helloiframe" src="http://google.com"&gt;&lt;/iframe&gt;
    </div>
  </body>
</html>

jitter 2009-10-31 23:26:13

Thanks a lot, this is the same conclusion I came on in terms of how to get around the problem. However I would still like to hear about why the problem exists, and whether or not this is a bug.

Jourkey 2009-10-31 23:32:18

Expanded on answer

jitter 2009-11-01 00:38:14

Great answer, thanks. Upped and accepted.

Jourkey 2009-11-01 01:23:58

ansaurus

tags:

views:

answers:

jqueryui resizable Unable to set iframe as resizable

related questions