Register  |  Login




Advertisement

Start Your Own Q&A Site

Create your own Q&A site easily, allowing you to quickly grow a new community around any subject matter or generate new organic traffic for your existing website.

Question

Status: Closed Points: 75 Time: 18:10 - Aug 11, 2006  

mary2

How do I vary the height on an inline frame based on the content inside?

I want to use inline frames on my site, but the problem is that the content pages that will be sourced into the frame's height will change depending on what data is displayed. Is there any way to change the inline frame's height depending on what page is showing inside?

Answer Discussion
Tutorials

 

jgivoni

Date:: Sep 16, 2006

Time:: 19:41

John, there seems to be no obvious way to achieve this, but I managed to get the following to work:

This is the iframe element in the body section of the mother page:
 <iframe name="iframetest" id="iframetest" src="test1.html" onload="size_iframe()"></iframe>

This is the javascript function that will be called when the page is loaded inside the iframe:
function size_iframe()
{
 x = document.getElementById("iframetest");
 y = frames.iframetest.document.getElementById("iframecontent");
 if (document.all) // IE problem; wont show clientHeight if style height hasn't been set
  y.style.height = "1px";
 margin = 30;
 x.style.height = parseInt(y.clientHeight + margin) + "px";
}
The script will set the HEIGHT of the iframe to that of the content of the child page. It has to add a margin (depends both of the child page and of the browser, but 30 should do).

The only thing you NEED to do is to fit the actual content of the child page (test1.html) inside a DIV tag like this:
<body>
 <div id="iframecontent">
  test file to load inside the iframe<br>
  can be of variable height
 </div>
</body>

Otherwise, I couldn't get it to work. The BODY element doesn't seem to want to report its clientHeight.
This example has been tested in IE6 and FF 1.5

Hope it is useful, - if you want me to change it according to your needs, please say so.

Jakob

jack751990

Date:: Jan 31, 2011

Time:: 13:00

It works great in IE but not in Mozilla...
any suggestions...?

jack7519901

Date:: Jan 31, 2011

Time:: 13:20

sorry it works fine in mozilla also...
but for some reason its not working inside my page, in IE it works with my webpage but not with mozilla...

Question Answered

This question has been closed, and points have been rewarded to the following experts:


jgivoni: 75

You're welcome however to comment or give additional information or if you wish, you have the ability to write a Tutorial in the Tutorial Area.

Answer this Question

New User

Email:

Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:

Forgot Your Password?

No tutorials have been submitted yet. Want to be the first?

Answer this Question

New User

Email:

Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:

Forgot Your Password?

Ask a Question

Have a new question? Ask!

You have 100 characters to use



Top Experts

View More

Rank

Expert

Points

1.

nidhi

10279

2.

oracleofDelphi

6493

3.

rcastagna

5596

4.

LAGM

4848

5.

PeterNZ

3487

6.

gonzalo

2840

7.

Mason

2770

8.

jgivoni

2303

9.

xarcus

1820

10.

Anpanman

917

Become an Expert

Register today to share your knowledge with the community and be recognized and rewarded for your contributions.


Register Here




"Psst, Quomon is a great site. Pass it on."     Tell a Friend  |   Link To Us  |   Save to Delicious  |   Digg! Digg it



Language Options

English:

www.quomon.com

Español:

www.quomon.es