How to make an iFrame that adjusts to the content's height?

  • 2
  • Question
  • Updated 4 years ago
  • Answered
I embed a few other web pages in my Yola website using iFrames. Right now the iFrames have a fixed height. However, I would prefer if the iFrames were able to adjust based on the content (dynamic height).

See: http://jfotography.yolasite.com/ and http://jfotography.yolasite.com/tutor...

I've tried embedding various JavaScript scripts via the HTML widget and it hasn't worked. The codes I've found all need access to and I don't know how to access that, which may be what's causing the problem but I'm really not sure.

Does anyone know any way to dynamically change the height of iFrames with JavaScript on Yola? Or with CSS? Or if it's possible to access the and not just the ?

I really don't want to just set the height of the iFrame to something really big.

Thanks for the help.
Photo of JFotography

JFotography

  • 16 Posts
  • 0 Reply Likes
  • frustrated

Posted 10 years ago

  • 2
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi JF

We cannot access the head. What people have done is simply paste the code into an HTML widget and place as high as they can on their page. Then, paste the body code into another HTML widget and place below it.

I don't believe that iframes can dynamically change to accomodate the height. If you happen to do find one, I'd be interested in learning about this.

What exactly are you trying to do? Perhaps we can think of alternatives?
Photo of JFotography

JFotography

  • 16 Posts
  • 0 Reply Likes
Hello again littleus,

Sorry for the late reply. I've been on vacation without internet for the past month.

Dynamic iframes are definitely possible. The most popular script for this is here: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm
However, I've tried it and it has not worked. I think it's because the code requires access to the head.

The code I'm currently working from is very buggy but for the most part functional. The first time it loads, the height is either correct or a bit short. When I access another webpage via the embedded site, the iframe's height adjusts but appears to add onto the previous iframe's height. So the more sites I access from within the iframe, the bigger the iframe height becomes. I've only tried it on FF so I don't know if it works at all on IE, etc.

<script language="JavaScript">
function resize_iframe()
{
document.getElementById("tut").height = document.body.offsetHeight-document.getElementById("tut").offsetTop-30;
}

window.onresize=resize_iframe;
</script>

<iframe id='tut' src="http://jfotography-tutorials.synthasite.com/" width="860" frameBorder="0" scrolling="no" onload='resize_iframe()'></iframe>
Photo of JFotography

JFotography

  • 16 Posts
  • 0 Reply Likes
Wait, sorry. The javascript code isn't showing up.

<script language="JavaScript">
function resize_iframe()
{
document.getElementById("tut").height = document.body.offsetHeight-document.getElementById("tut").offsetTop-30;
}

window.onresize=resize_iframe;

</script>

<iframe id='tut' src="http://jfotography-tutorials.synthasite.com/" width="860" frameBorder="0" scrolling="no" onload='resize_iframe()'></iframe>
Photo of JFotography

JFotography

  • 16 Posts
  • 0 Reply Likes
Whoa strange, it's not letting me put the code in properly.

< s c r i p t l a n g u a g e = " J a v a S c r i p t " >
f u n c t i o n r e s i z e _ i f r a m e ( )
{
d o c u m e n t . g e t E l e m e n t B y I d ( " t u t " ) . h e i g h t = d o c u m e n t . b o d y . o f f s e t H e i g h t - d o c u m e n t . g e t E l e m e n t B y I d ( " t u t " ) . o f f s e t T o p - 3 0 ;
}

w i n d o w . o n r e s i z e = r e s i z e _ i f r a m e ;

< / s c r i p t >

< i f r a m e i d = ' t u t ' s r c = " h t t p : / / j f o t o g r a p h y - t u t o r i a l s . s y n t h a s i t e . c o m / " w i d t h = " 8 6 0 " f r a m e B o r d e r = " 0 " s c r o l l i n g = " n o " o n l o a d = ' r e s i z e _ i f r a m e ( ) ' > < / i f r a m e >
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Hi JF,

Does this iFrame code not work for you:

<!--
<iframe src ="http://www.google.com" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
-->

Replace the Google URL with your own and you can adjust the height and width dimensions to ones that suit you.

<!-- and --> are there to stop the code from being interpreted, please don't paste them into the HTML widget.

I'm sorry if I've misunderstood your question!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi JF

Very cool script from Dynamic Drive. My suggestion still stands! Paste the "head" code into an HTML widget. Then, paste the "body" code into another HTML widget and place under the 1st HTML widget. The script should work. Please try this on a test page first.
Photo of JFotography

JFotography

  • 16 Posts
  • 0 Reply Likes
Hi littleus,

I tried your method and it has not worked. I'll test it out again with some other codes I've found. Thanks.

This website also uses dynamic iframes fairly well: http://www.mardescha-arabians.nl/ The source script is fairly similar to the one I already had, so I'll probably just work from that.

This seems to work as long as you don't keep reloading the same page within the iframe:
<!--
<script language="JavaScript">

function resize_iframe()
{
document.getElementById("tut").height = document.body.offsetHeight-document.getElementById("tut").offsetTop-30;
}

window.onresize=resize_iframe;

</script>

<iframe id='tut' src="http://jfotography-tutorials.synthasi..." width="860" height="100%" frameBorder="0" scrolling="no" onload='resize_iframe()'></iframe>
-->

------------------

Sorry Marije, you seem to have misunderstood my question. I'm looking for a way to adjust the iframe's height automatically according to its content every time I reload the iframe's contents. Thanks anyway.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Sorry JF that it did not work out. I'm going to try it out and see if I can't make it work somehow. =)
Photo of jen.yount.baker

jen.yount.baker

  • 1 Post
  • 2 Reply Likes
In case anyone else needs help with this, I was able to fix my issue of only a tiny part of an embedded Google Doc showing by adding

width="100%" height="300" after the link & before the >

It made the document large enough to read without taking up too much of the page.
Photo of jscypinski

jscypinski

  • 1 Post
  • 0 Reply Likes
jen.yount.baker - This is just what I was looking for! Thank you so much!!!
Photo of Lyric.Smith

Lyric.Smith

  • 1 Post
  • 1 Reply Like
Instead of having the code width="100%" height="300"

I changed the 300 to a 100% also, and it copied the page nicely. I hope this is what you're looking for, or that it help someone!