Resizing iframe's width dynamically

JavaScript
1

Hi all,

I am new to this site and new to javascript. I know that iframes have been beaten to death on this site as well as others… I already have the code to resize my iframe’s height… now I am trying to have it conform to the loaded images width… the website, once it is finished, will be for family so I have no need to worry about multiple browser accessibilty (everyone visiting will be using IE)- most of the people visiting will think mozilla is a type of cheese that you put on a pizza.

Anyway, I hope someone can help me out. I know that this is probably a really simple problem (again, I’m new and learning). I also know, from reading other threads, that I’ll probably get 10 different ways to skin this cat… I welcome that.

Here’s what I have:

<script language=“JavaScript”>
function resize() {
iframe = document.all.stretch;
iframe.height=document.frames(“stretch”).document.body.scrollHeight;
}
</script>
<script>
function calcw() {
iframe = document.all.stretch;
iframe.width=document.frame(“stretch”).document.body.scrollWidth;
}
</script>
<script>
function resizeALL () {
calcw();
resize();
}
</script>

<span style=“position: absolute; left: 250; top: 50; z-index: 1”><IFRAME src=“./select.jpg” name=“stretch”
scrolling=“no” frameborder=“0” onload=“resizeALL();” ALLOWTRANSPARENCY=“true”"></IFRAME>

What I want to do is if the user clicks a link and brings up a image of 300X400 and then clicks another link and brings up and image of 50X100, I do not want to see any whitespace from the loading of that first image.

Again, thanks in advance to whomever decides to help me out.

2

Instead of this:

iframe.width=document.frame(“stretch”).document.body.scrollWidth;

you need to use

iframe.style.width=document.frames(“stretch”).document.body.scrollWidth;

same for height - that should work.

3

The .style doesn’t appear to be working in IE?

Strange… any other ways to skin this cat?

4

The biggest problem with Internet Exploder is that if you code something incorrectly it trys to interpret what you meant and can produce crazy results with no easy way to figure out what is happening. That’s the main reason why it is always better to test your code first in a proper web browser that will tell you where the errors are so that you can fix them. Once you get it working on a proper web browser then it should work on IE as well.

5

It works just fine in IE, here is the test code:


<html>
<head>
<title>New Page</title>
<style type="text/css">

</style>
<script type="text/javascript">

function resize() {
iframe = document.all.stretch;
iframe.style.height=document.frames("stretch").document.body.scrollHeight;
}
</script>
<script>
function calcw() {
iframe = document.all.stretch;
iframe.style.width=document.frames("stretch").document.body.scrollWidth;
}
</script>
<script>
function resizeALL () {
calcw();
resize();
}
</script>
</head>
<body>
<span style="position: absolute; left: 250; top: 50; z-index: 1"><IFRAME src="bgnasty.jpg" name="stretch"
scrolling="no" frameborder="0" onload="resizeALL();" ALLOWTRANSPARENCY="true""></IFRAME></span>
<a href="bgnice.jpg" target="stretch">click me</a>
</body>
</html>
6

Thanks Jim,

I’ll try to figure out what was the hang up.

Fegall,

I agree that testing in another browser is the best plan of attack. I just wanted to start with the worse case scenario since I know that the only people who will visit my page are using IE…

I would like to see them use something else, but you know it is trying to get Windows users to migrate to something else… :slight_smile:

In the future, I’ll try to start with one of the other browsers.

7

Looks like a pesky IE thing…

If I set the bgcolor to some color, then the whitespace is still showing from the original iframe size…

<html>
<head>
<title>New Page</title>
<style type="text/css">
body{background:#faf7ec;}
</style>
<script type="text/javascript">

function resize() {
iframe = document.all.stretch;
iframe.style.height=document.frames("stretch").document.body.scrollHeight;
}
</script>
<script>
function calcw() {
iframe = document.all.stretch;
iframe.style.width=document.frames("stretch").document.body.scrollWidth;
}
</script>
<script>
function resizeALL () {
calcw();
resize();
}
</script>
</head>
<body>
<span style="position: absolute; left: 250; top: 50; z-index: 1"><IFRAME src="./big.jpg" name="stretch"
scrolling="no" frameborder="0" onload="resizeALL();" ALLOWTRANSPARENCY="true""></IFRAME></span>
<a href="./small.jpg" target="stretch">click me</a>
</body>
</html>
8