Home/ Questions/Q 443975
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T21:13:28+00:00

I’m trying to use jquery ui resizable with iframe. It simply does not work,

  • 0

I’m trying to use jquery ui resizable with iframe.

It simply does not work, I don’t see any handles at all. However the class ui-resizable is added.

Sample:
http://jsbin.com/uyolu

Is this normal? How do I fix? Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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">
<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"></script>
    <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"></script>
    <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"></iframe>
    </div>
  </body>
</html>
    • 0