Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

iFrame size

Status
Not open for further replies.
tsdragon

tsdragon

Programmer
Dec 18, 2000
5,133
US
I know how to do it in Explorer, but how do you resize an iframe in Firefox? I don't care WHAT size I resize it to right now, just ANY size aside from the default or the one originally specified. Here's what I've tried:
Code: 
window.frames['theFrame'].height = 400;
// and //
document.getElementById('theFrame').style.height = 400;
Neither one has any effect.

(Note that I used window.frames instead of document.frames. Firefox doesn't like the latter.)


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Sort by date Sort by votes
Firefox is fussy when setting values with no unit specifier. I've not tried it with iframes, but adding it has helped me out in the past with Firefox:

Code: 
document.getElementById('theFrame').style.height = '400px';

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
One of the catch of iframe implementation in ff is to distinct [1] the frame reference attached to window, namely, window.frames[index] or window.frames["iframename"] and [2] the frame reference as a document element document.getElementById("iframeid"), document.getElementsByName("iframename")[index]. For the reference [1], id is not recognized (see the demo). The frame sizing is done via frame reference as document element. The obstacle is coming from passing the reference of type [1] to the handler whereas the handler has to retrieve a reference of type [2] to do the resizing.
[tt]
[blue]<!-- test targetted for firefox, only not for ie -->[/blue]
<html>
<head>
<script>
function setiframesize(oframe) {
//alert(typeof(oframe)+"\n"+oframe.id+"\n"+oframe.name); //[blue]id is here undefined<<<important[/blue]
var ofrmelem;
ofrmelem=document.getElementsByName(oframe.name)[0];
//alert(ofrmelem.id+"\n"+ofrmelem.name); //[blue]here id is found[/blue]
ofrmelem.style.height="250pt";
ofrmelem.style.width="250pt";
}
</script>
</head>
<body>
<!-- case id != name more tricky -->
<iframe id="ifrmtest" name="ifrmname" src="testpage.htm" style="height:350pt;width:350pt;"><a href="testpage.htm"></a></iframe>
<br />
<button onclick="setiframesize(window.frames['ifrmname']);">set frame size</button>
</body>
</html>
[/tt]
 
Upvote 0 Downvote
The above demo of functionality is actually cross-browser (ie & moz) and working with ie6 with pages load into the frame in compatMode in both BackCompat or CSS1Compat. The cross-browser might break for older browsers or many others that I am not in a position to study it nor especially interested in looking into it. Here is a slight enhancement to consolidate the idea in applying it. (I change the metric to px, but that is not important.)
[tt]
<html>
<head>
<script language="javascript">
function setiframesize(oframe) {
var ofrmelem;
ofrmelem=document.getElementsByName(oframe.name)[0];
ofrmelem.style.height="150px";
ofrmelem.style.width="150px";
}
function incrementalsize(oframe) {
var ofrmelem;
var incx=20; var incy=20;
ofrmelem=document.getElementsByName(oframe.name)[0];
ofrmelem.style.height=parseInt(ofrmelem.style.height,10)+incy+"px";
ofrmelem.style.width=parseInt(ofrmelem.style.width,10)+incx+"px";
}
</script>
</head>
<body>

<!-- try load test page with different compatMode in ie language-->
<iframe id="ifrmtest" name="ifrmname" src="testpage.htm" style="height:350px;width:350px;"><a href="testpage.htm"></a></iframe>

<br />
<button onclick="setiframesize(window.frames['ifrmname']);">shrink frame to fixed size</button>
<br />
<button onclick="incrementalsize(window.frames['ifrmname']);">incremental frame sizing</button>
</body>
</html>
[/tt]
 
Upvote 0 Downvote
Thanks for all that people, I'll try to digest it when I'm a little more alert. I'm aware of the difference between referring to the frame through getElementById and thru the windows.frames collection. Somethings work with one method, some with others. It seems to matter most when you're referring to the document within the iframe (you have to use the windows.frames collection) and when you're referring to the iframe element itself.

I finally found something what works in Firefix on my own, and Explorer is forgiving enough to accept it:
Code: 
document.getElementById(theFrame).width = 450;
For some reason Firefox doesn't like style.width, although that would seem to be the proper way to do it. Specifying units doesn't seem to matter - it's using pixels regardless.

What I'm working on is a decent, flexible and cross-browser compatible routine to resize an iframe to fit it's contents neatly. It's not nearly as easy as it sounds, but I'm getting there.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

noodles57
  • Locked
  • Question
reset select box from within an iframe?
Replies
1
Views
180
ChrisHirst
ChrisHirst
c0deM0nK424
  • Locked
  • Question
auto detect viewport or screen size and load different images for flexslider carosel ?
Replies
0
Views
166
c0deM0nK424
c0deM0nK424
1DMF
  • Locked
  • Question
disable back button when navigating an iframe
Replies
1
Views
445
1DMF
1DMF
Enkrypted
  • Locked
  • Question
Auto refresh iFrame
Replies
2
Views
312
1DMF
1DMF
peterpann
  • Locked
  • Question
detect child page in iframe
Replies
1
Views
168
jpadie
jpadie

Part and Inventory Search

Sponsor

Back
Top