Forum Moderators: open

Message Too Old, No Replies

iframe auto resize

         

vindaug

4:18 pm on Mar 26, 2004 (gmt 0)

10+ Year Member


I am attempting to make an iframe automatically resize for the page displayed in it. A menu bar with links to different pages, all of which have the iframe as the target is on the main page.

The script I have only works on reload, not when the buttons are clicked. I have put

onclick="dyniframesize()"

inside the tag for the button links. The script is as follows:

<script type="text/javascript">

var iframeids=["main"]

function dyniframesize() {

var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){

if (document.getElementById){ //begin resizing iframe procedure

dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
if (dyniframe[i] &&!window.opera){

dyniframe[i].style.display="block"
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //ns6 syntax
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //ie5+ syntax
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}

}

document.main.style.height=dyniframe;

}

if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize

</script>

ajkimoto

6:05 pm on Mar 26, 2004 (gmt 0)

10+ Year Member



vindaug,

It might be that when a user clicks a button to change the src of the iframe, the resize function fires before the page loads.

In IE it is pretty easy to counter this using a while loop at the beginning of the dyniframesize() function:

while(document.frames['myframe'].document.readyState!='complete'){
}

However, this syntax is not supported by NS 6+ or Mozilla. A cross browser method is to put the resize function call in body tag each page that is loaded into the iframe:

<body onload="this.parent.dyniframesize()">

This should make sure that the iframe source page is loaded before the resize function fires.

ajkimoto

vindaug

6:31 pm on Mar 26, 2004 (gmt 0)

10+ Year Member



Good idea, but now it only works the second time you click the button. For example, you click on the contact info button and the iframe keeps the same dimensions as it had for the content of the last iframe. But, once you reclick the contact info button the iframe resizes.

Upon further inspection . . . it seems to simply use the dimensions of the page last displayed in the iframe, which is why clicking the same button twice appears to work.

vindaug

6:41 pm on Mar 26, 2004 (gmt 0)

10+ Year Member



actually the above results were with the onclick still in the link tag, when that is removed it goes back to only functioning upon reload.

ajkimoto

7:31 pm on Mar 26, 2004 (gmt 0)

10+ Year Member



vindaug,

I have the following in my button:

<button onclick="document.getElementById('hidFrame').src=framesource1.htm'">Load Another Frame</button>

and

<body onload="this.parent.dyniframesize()">

as the body tag for each of the pages that I load as the iframe source.

My iframe scales just fine in IE6 and Mozilla when I click the buttons.

I did remove the:

document.main.style.height=dyniframe;

code since it did not apply to my document (but shouldn't this be):

document.main.style.height=dyniframe[i].height?

ajkimoto

MarRup

10:19 pm on Apr 2, 2004 (gmt 0)

10+ Year Member



I was really glad to see your suggestions that's actually got me to finish this pain I had for a long time. It's working fine now, but still I have problems with Mozilla.

I saw you got it working.....some speciall trick to get it to work in other browser than IE?

ajkimoto

10:49 pm on Apr 2, 2004 (gmt 0)

10+ Year Member



MarRup,

First of all: Welcome to Webmaster World

As for any tricks, the most important thing that I found was to call the function in the parent page from the body onload event of the iframe source page.

From then on, it is a matter of using the correct syntax to resize the window correctly, since IE and NS/Mozilla use different syntax.

BTW, The usual procedure around here is to post the code with which you are having problems so that we can check it out.

ajkimoto

MarRup

11:18 pm on Apr 2, 2004 (gmt 0)

10+ Year Member



Thanks and I'm glad being here. Actually I'm a member on a similar site like this, but only for webmasters in Sweden.

Anyway, I missed some small things and got it to work, but:

Do you know why it doesn't work in Opera?

I guess I will be forced to use a script that recognize the browser and in the case of Opera will put scrollbars in the iFrame. Easy to do that when I'm using php I guess.