Solved

Resizing iframe height to fit page contents

Posted on 2004-05-01
6
8,371 Views
Last Modified: 2012-06-21
hello,

is there a way (using javascript or another language), to get my <iframe height=""> to change dynamically as a new page is loaded in it?

I want the iframe height to change dynamically so that i don't have to use another set of scrollbars inside the iframe...

please check this website to see what i mean: http://69.194.150.152/calendar.asp

you can see that the calendar changes while the rest of the page remains the same size... for example, when you press the "view" button, the page changes, yet i want the iframe to be resized so that you don't get a large white space underneath.

----------------------HOW I THINK IT CAN BE DONE---------------------------
have a function on the calendar.asp that can change the height of the iframe (in javascript)

then for each page that is loaded in the iframe, it will contain an embedded variable that tells it the height, and calls the function calendar.asp to resize it...
------------------------------------------------------------------------------------

Can anyone provide me some code to do this?

thanks very much
0
Comment
Question by:selagea
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 3

Expert Comment

by:Sleepyhead_NO
ID: 10967437
i was unable to load your page, but i think this will work for you:

in calender.asp:
<iframe name="myiframe" src="iframe.asp"></iframe>
<script type="text/javascript">
function ChangeIframeHeight(NewHeight)
{
    document.frames.myiframe.style.height = NewHeight;
}
</script>

in iframe.asp:
<body onload="parent.ChangeIframeHeight('400px');">
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 10967459
Just do the body tag to the calendar pages this way:

<body onload="resizeTo(document.body.scrollWidth,document.body.scrollHeight)">

When the calendar loads in it will resize the iframe

Cd&
0
 

Author Comment

by:selagea
ID: 10967666
thanks you very much, it works perfectly, and is easy to install
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10967942
Glad we could help.  Thanks for the A. :^)

Cd&
0
 

Expert Comment

by:phylasv
ID: 12055723
OOps! wait a minute! There is a problem to this code: Why does the iframe shrink down after browsing many pages?
0
 
LVL 9

Expert Comment

by:Sar1973
ID: 37500066
What about iframed .html pages which contains autoexpanding/compressing menus?
Is there a way in the containing page to dynamically fit the height to the variable source page height?
0

Featured Post

Ready to get started with anonymous questions?

It's easy! Check out this step-by-step guide for asking an anonymous question on Experts Exchange.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

622 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question