Changing the Height on an Iframe

[adamWeiler]

1. I have a Js function that loads content into an iframe without reloading the page. Can I use this same function to change the iframe's height to match the content? (My goal is to resize the iframe when the user clicks on a link, without reloading the page.)

2. How do I change the height of an iframe?

Additional:
My function is being called from inside a second frame. This is a working pointer to the first frame that is used in the Javascript. It returns the iframes' href.
what = top.myMain.location.href;

I tried this, but it doesn't work. Firebug says top.mymain.style has no properties:
what = top.myMain.style.height = '400px';

[rangana]

This might be of help:

<script type="text/javascript">
window.onload=function()
{
document.getElementById('mylink').onclick=function()
{
var iframe=document.getElementById('myframe');
iframe.style.width='800px';
iframe.style.height='500px';
}
}
</script>
<span id="mylink">Enlarge</span>
<br>
<iframe src="http://www.google.com" id="myframe"></iframe>

[adamWeiler]

Ah; I had to modify it to work with the 2 iframes, but this works. Thank you.

Additional: I have a different function reading the height of a page-div in the loading page, and this variable feeds into the code you gave me. Basically, the user clicks on a link and the iframe resizes to fit the loading page, which is what I was going for.

[rangana]

No problem, Glad I could help :)

[Cognocenti]

Ah; I had to modify it to work with the 2 iframes, but this works. Thank you.

Additional: I have a different function reading the height of a page-div in the loading page, and this variable feeds into the code you gave me. Basically, the user clicks on a link and the iframe resizes to fit the loading page, which is what I was going for.

~~~

Could you provide a URL or example of your code modifacation?

Thank you for any assistance you may provide.

May You Be Enriched.

[rangana]

Hi Cognocenti,

Welcome to the forums :agree:

What's this, a follow-up question?

[Cognocenti]

Hi Cognocenti,

Welcome to the forums :agree:

What's this, a follow-up question?


A follow-up question indeed! :rolleyes:

I am trying to convince myself that I need to adjust
your fine snippet of JavaScript to document.getElement
on window.onload instead of .onclick.

I have something very specific in mind that has been
an "on-again, off-again" project for about nine months
now...

Any "wanna do" can ask/beg for specifics but I know
the value of understanding the reason for the specifics
as well.

I am not far enough along with the actual design to
offer any live example but that is the direction I am
moving in.

The saga continues... :cool:

Thank you for your hospitable demeanor and it is my
wish that you rececive this exchange in good spirits.
.
.

[rangana]

Basing on the code i've given on post#2, you just need to have an id to your iframe.

This example takes for instance two (or more) iframes:

<script type="text/javascript">
window.onload=function()
{
document.getElementById('mylink').onclick=function()
{
var iframes=document.getElementsByTagName('iframe')
for(var i=0;i<iframes.length;i++)
{
iframes[i].style.width='800px';
iframes[i].style.height='500px';
}
}
}
</script>
<span id="mylink">Enlarge</span>
<br>
<iframe src="http://www.google.com" id="google"></iframe>
<iframe src="http://www.yahoo.com" id="yahoo"></iframe>


Hope it keeps you going :)

[Cognocenti]

Basing on the code i've given on post#2, you just need to have an id to your iframe.

This example takes for instance two (or more) iframes:

<script type="text/javascript">
window.onload=function()
{
document.getElementById('mylink').onclick=function()
{
var iframes=document.getElementsByTagName('iframe')
for(var i=0;i<iframes.length;i++)
{
iframes[i].style.width='800px';
iframes[i].style.height='500px';
}
}
}
</script>
<span id="mylink">Enlarge</span>
<br>
<iframe src="http://www.google.com" id="google"></iframe>
<iframe src="http://www.yahoo.com" id="yahoo"></iframe>


Hope it keeps you going :)




Time for me to get caught up a bit with this thread.


Here is my version of the first snippet...

http://33.nfshost.com/800px500px.htm


And here is a touch of the direction I
am wanitng to go with it...

http://33.nfshost.com/100x100.htm


My goal is to replace the .onclick with
window.onload so the enlarge action
is accomplish without user having to
click to resize.

I haven't had the time to sit down and
code this mod. out yet and this is all
I have time for at the moment.

Thank you kindly for you prompt replies
thus far and again, thank you for the
awesome little snippet of JavaScript.

Now the iframe can truly be considered
subordinate to the parent frame.

This is a good thing indeed!
.
.
.

[rangana]

Then, remove the highlighted:

<script type="text/javascript">
window.onload=function()
{
document.getElementById('mylink').onclick=function()
{
var iframe=document.getElementById('myframe');
iframe.style.width='100%';
iframe.style.height='100%';
}
}
</script>


...but what's the purpose of doing so, when you can just freely have width and height in your iframe without the touch of JS.