Home/ Questions/Q 6698239
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:33:18+00:00

I have the following HTML page in which I have three iframes. I would

  • 0

I have the following HTML page in which I have three iframes. I would like to allow users to resize the height and width of the iframes manually using Javascript.

<body>
<table>
    <tr>
        <td colspan="2" id = "freebase_td">
        <iframe id = "freebase_frame" src="" width="100%" height="400px"></iframe>
        </td>
    </tr>
    <tr>
        <td align="left" id = "wiki_td">
        <iframe id = "wiki_frame" src="" width="100%" height="400px"></iframe>
        </td>
        <td align="right" id = "imdb_td">
        <iframe id = "imdb_frame" src="" width="100%" height="400px"></iframe>
        </td>
    </tr>
</table>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your best bet really is to use a library to do this, such as jQueryUI Resizable — there are a lot of inter-browser quirks with doing this right. Especially when you need to allow the user to specify an arbitrary size/resize, and a draggable resize handle is almost always the most intuitive way to allow users to resize an element. Setting the width/height of the iframe directly should be okay if you are just resizing the iframe, but that doesn’t do anything to get the new width/height from the user in an intuitive way.

    Also see Resizing iFrame with jQuery UI — you need to wrap the iframe in a div, set the iframe to height=100% width=100%, and make the div resizable. Drag-to-resize will not work correctly if you make the bare iframe Draggable. (This is an event bubbling limitation in some browsers, not a jQuery bug per se.)

    • 0