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>
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>
5 Answers
Reset to default 3Your 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.)
you don't need javascript for that in modern browsers. just a little html+css trick. encapsulate your iframe in a div with resize property enabled.
<div>
<iframe src="https://www.example./"></iframe>
</div>
<style>
div {
overflow: hidden;
resize: both;
}
iframe {
height: 100%;
width: 100%;
border: none;
}
</style>
demo: https://jsfiddle/k53a41ej/
I choose to avoid iFrames like a curse. I know this isnt exaclty what you asked for but check out jQueryUI's Resizable.
If you change your foundational structure you might find this a much more scalable/long term solution.
Note: Resizable can be applied to ANY DOM element!
Does this not work?
document.getElementById('wiki_frame').style.width = '300px';
$(function(){
$("table td").css({position:'relative'})
$("div.resizer").appendTo($("table td")).each(function(){
$(this).width(20);
$(this).height(20);
$(this).css({
position:"absolute",
top: $(this).parent().height() - 20,
left: $(this).parent().width() - 20
});
var resize = false;
var $td;
var pos;
$(this).mousedown(function(e){resize = true;$td =$(this).parent(); pos = {left:e.pageX,top:e.pageY});});
$(document).mousemove(function(e){
if( resize ){
$td.height( $td.height() + e.pageY - pos.top );
$td.width( $td.width() + e.pageX- pos.left);
}
});
$(document).mouseup(function(){
resize = false;
});
});
})();