Topic awaiting preservation: Dynamic IFRAME Height (WORKS!!) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8973" title="Pages that link to Topic awaiting preservation: Dynamic IFRAME Height (WORKS!!)" rel="nofollow" >Topic awaiting preservation: Dynamic IFRAME Height (WORKS!!)\$

Author	Thread
enoctis Obsessive-Compulsive (I) Inmate From: Atlanta, GA - USA Insane since: Dec 2003	posted 12-20-2003 17:48 I have managed to put together this code, which MANY of you were looking for. It only took me 30 minutes to throw this code together, figure out that it didn't work AFTER I posted the code saying it did, fix the code, & finally edit my posts... LOL. To the CODE! In your page where the iframe will be contained, use the following code (add attributes more as needed): <iframe id="dynamIframe"> --------------------------------------------- Now, in ANY page that is to be loaded into the iframe insert the following code (preferably between the <head> & </head> tags) <script> function resizeToContent(){ var x =0; var y =this.document.body.scrollHeight; while (x < y){ x+=1; } parent.document.getElementById("dynamIframe").style.height=x } </script> --------------------------------------------- Finally, use the following as the body tag in the same pages as the javascript above: <body onload="resizeToContent()"> --------------------------------------------- TADA! Hope this helped all of you guys out! Thanks, -os2 [This message has been edited by enoctis (edited 12-20-2003).] [This message has been edited by enoctis (edited 12-20-2003).] [This message has been edited by enoctis (edited 12-20-2003).]
enoctis Obsessive-Compulsive (I) Inmate From: Atlanta, GA - USA Insane since: Dec 2003	posted 12-20-2003 18:04 The original code I entered above didn't work, then I made this post (which I am now changing). The above code DOES work now... I edited the message. -os2 [This message has been edited by enoctis (edited 12-20-2003).]
Aquaricam Obsessive-Compulsive (I) Inmate From: UK Insane since: Jan 2004	posted 01-15-2004 00:28 Hi, firstly, I nearly hit the back button when I saw the site - not my colours, but boy, i'm glad I did I'm busy trying to port IPF 1.3f into phpnuke 6.9. i'm making progress slowly but nukewrap always left the old vertical scroll bars on longer pages (or the short pages became long). Anyways, to cut (an even longer story short) I popped your code into my IPB header, uploaded the changes and waited for the page to reload. My face sunk when I saw the scroll bar appear (I've tried many times before). BUT THEN as if by magic the code did its 'thang' and the scroll bar dissapeared leaving a perfectly formated page. MANY, MANY, MANY THANKS, you won't believe what I've been going through these last few days. Enoctis, if I can do/say this in here and if you have a paypal account - theres 10 bucks on its way to you for a beer! COBol is dead, long live COBol! [This message has been edited by Aquaricam (edited 01-15-2004).]
Yossi Admon Bipolar (III) Inmate From: Israel Insane since: Nov 2001	posted 01-15-2004 08:44 From one hand I understand the problem of determent the IFRAME height and width according to the IFRAME content but I must admit that I don't like the solution where the IFRAME inner page will force the container page its height and width. I?ve faced this problem in the past and the best solution I?ve found was to have the ability of notifying the IFRAME content page height and width to the IFRAME container page (only if asked). The solution is simple: the IFRAME content page should implement 2 methods, getPageHeight and getPageWidth and the container page will implement onLoad listener that will ask the page about its sizes and will fix the IFRAME according. The code for the IFRAME container page: ======================================================== <script language="javascript"> function resizeIframe(oIframe){ var innerHeight = oIframe.contentWindow.getActualHeight(); var innerWidth = oIframe.contentWindow.getActualWidth(); oIframe.height = innerHeight; oIframe.width = innerWidth; } </script> ? <iframe src="?" onLoad=' resizeIframe (this)'/> ======================================================== The code for the IFRAME content page: ======================================================== <script language="javascript"> function getActualHeight(){ ? } function getActualWidth(){ ? } </script> ======================================================== Regards, Yossi Admon
MajorFracas Nervous Wreck (II) Inmate From: Insane since: Jul 2003	posted 01-15-2004 17:44 I appreciate the 'only upon request' design you've chosen, Yossi. But there is a problem if the user selects a link from the hosted page that is larger. The iframe will not resize. To have the iframe resize as new pages are loaded, it really needs to be driven by the hosted page as the parent frame is not privy to events generated in the hosted page. Of course this all breaks down if the hosted page belongs to a different domain than the hosting page...

Topic awaiting preservation: Dynamic IFRAME Height (WORKS!!)\$

Author

Thread

enoctis
Obsessive-Compulsive (I) Inmate

From: Atlanta, GA - USA
Insane since: Dec 2003

posted 12-20-2003 17:48

I have managed to put together this code, which MANY of you were looking for. It only took me 30 minutes to throw this code together, figure out that it didn't work AFTER I posted the code saying it did, fix the code, & finally edit my posts... LOL. To the CODE!

In your page where the iframe will be contained, use the following code (add attributes more as needed):

<iframe id="dynamIframe">
---------------------------------------------
Now, in ANY page that is to be loaded into the iframe insert the following code (preferably between the <head> & </head> tags)

<script>
function resizeToContent(){
var x =0;
var y =this.document.body.scrollHeight;
while (x < y){
x+=1;
}
parent.document.getElementById("dynamIframe").style.height=x
}
</script>
---------------------------------------------
Finally, use the following as the body tag in the same pages as the javascript above:

<body onload="resizeToContent()">
---------------------------------------------
TADA! Hope this helped all of you guys out!

Thanks,

-os2

[This message has been edited by enoctis (edited 12-20-2003).]

[This message has been edited by enoctis (edited 12-20-2003).]

[This message has been edited by enoctis (edited 12-20-2003).]

enoctis
Obsessive-Compulsive (I) Inmate

From: Atlanta, GA - USA
Insane since: Dec 2003

posted 12-20-2003 18:04

The original code I entered above didn't work, then I made this post (which I am now changing). The above code DOES work now... I edited the message.

-os2

[This message has been edited by enoctis (edited 12-20-2003).]

Aquaricam
Obsessive-Compulsive (I) Inmate

From: UK
Insane since: Jan 2004

posted 01-15-2004 00:28

Hi, firstly, I nearly hit the back button when I saw the site - not my colours, but boy, i'm glad I did

I'm busy trying to port IPF 1.3f into phpnuke 6.9. i'm making progress slowly but nukewrap always left the old vertical scroll bars on longer pages (or the short pages became long). Anyways, to cut (an even longer story short) I popped your code into my IPB header, uploaded the changes and waited for the page to reload. My face sunk when I saw the scroll bar appear (I've tried many times before). BUT THEN as if by magic the code did its 'thang' and the scroll bar dissapeared leaving a perfectly formated page.

MANY, MANY, MANY THANKS, you won't believe what I've been going through these last few days. Enoctis, if I can do/say this in here and if you have a paypal account - theres 10 bucks on its way to you for a beer!

COBol is dead, long live COBol!

[This message has been edited by Aquaricam (edited 01-15-2004).]

Yossi Admon
Bipolar (III) Inmate

From: Israel
Insane since: Nov 2001

posted 01-15-2004 08:44

From one hand I understand the problem of determent the IFRAME height and width according to the IFRAME content but I must admit that I don't like the solution where the IFRAME inner page will force the container page its height and width.
I?ve faced this problem in the past and the best solution I?ve found was to have the ability of notifying the IFRAME content page height and width to the IFRAME container page (only if asked).
The solution is simple: the IFRAME content page should implement 2 methods, getPageHeight and getPageWidth and the container page will implement onLoad listener that will ask the page about its sizes and will fix the IFRAME according.

The code for the IFRAME container page:
========================================================
<script language="javascript">
function resizeIframe(oIframe){
var innerHeight = oIframe.contentWindow.getActualHeight();
var innerWidth = oIframe.contentWindow.getActualWidth();
oIframe.height = innerHeight;
oIframe.width = innerWidth;
}
</script>
?
<iframe src="?" onLoad=' resizeIframe (this)'/>
========================================================

The code for the IFRAME content page:
========================================================
<script language="javascript">
function getActualHeight(){
?
}

function getActualWidth(){
?
}
</script>
========================================================

Regards,
Yossi Admon

MajorFracas
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2003

posted 01-15-2004 17:44

I appreciate the 'only upon request' design you've chosen, Yossi. But there is a problem if the user selects a link from the hosted page that is larger. The iframe will not resize.

To have the iframe resize as new pages are loaded, it really needs to be driven by the hosted page as the parent frame is not privy to events generated in the hosted page.

Of course this all breaks down if the hosted page belongs to a different domain than the hosting page...