Welcome to Geeklog, Anonymous Saturday, December 21 2024 @ 11:08 am EST
Geeklog Forums
Dynamic IFRAME resizing cross browser issues in Static Pages
Well I think I have a workaround for the cross-browser compatibility issues with dynamic IFRAME resizing and the Static Pages plugin.
<head>
<script language="JavaScript">
function resize() {
var iframe = document.all.NAME;
iframe.height=document.frames("NAME").document.body.scrollHeight;
}
</script>
</head>
<body onload=resize();>
<iframe src="URL" name="NAME" scrolling="no" width="100%" height=100% frameborder="0" onload="this.height=this.contentDocument.height"></iframe>
</body>
Just replace the src=URL and the NAME wiith your own data and paste it into the Static Page block and it seems to work fine in both IE and Firefox and Opera (newest builds, IE complains a little about this.height but so what...). I have not tested it in other browsers yet but I'm happy with the resutls so far... So if you don't need to support old,old browsers this will make you a happy camper.
----------------------------------
Building the better weapon....
----------------------------------
Steve
Text Formatted Code
<head>
<script language="JavaScript">
function resize() {
var iframe = document.all.NAME;
iframe.height=document.frames("NAME").document.body.scrollHeight;
}
</script>
</head>
<body onload=resize();>
<iframe src="URL" name="NAME" scrolling="no" width="100%" height=100% frameborder="0" onload="this.height=this.contentDocument.height"></iframe>
</body>
Just replace the src=URL and the NAME wiith your own data and paste it into the Static Page block and it seems to work fine in both IE and Firefox and Opera (newest builds, IE complains a little about this.height but so what...). I have not tested it in other browsers yet but I'm happy with the resutls so far... So if you don't need to support old,old browsers this will make you a happy camper.
----------------------------------
Building the better weapon....
----------------------------------
Steve
28
23
Quote
kranthi
Anonymous
I tried your code , but its giving error while running scripts like
" Access is denied , Do you want to continue running scripts" and not resizing the height.
Do you have any idea about what the problem might be and have any solution for that?
Thank you very much
kranthi.
18
18
Quote
josh kotecha
Anonymous
Is it possible to do this with ID instead of name tag?
Also, is it possible to retrive the name tag of a frame
once you have the frame id ?
The reason why I ask is I have older code that does this with
iframe id. It doesn't work with opera. I'd like to leave the
main html page the same and make changes in the javascript
function to resize the way you are doing the resize.
Thanks!!!
Josh
p.s.
Nice job figuring this out ...
Also, is it possible to retrive the name tag of a frame
once you have the frame id ?
The reason why I ask is I have older code that does this with
iframe id. It doesn't work with opera. I'd like to leave the
main html page the same and make changes in the javascript
function to resize the way you are doing the resize.
Thanks!!!
Josh
p.s.
Nice job figuring this out ...
23
20
Quote
visitor
Anonymous
this line of syntax is wrong. might work in IE but not FF
here is the correct syntax
Text Formatted Code
iframe.height=document.frames("NAME").document.body.scrollHeight;here is the correct syntax
Text Formatted Code
iframe.height=window.frames["NAME"].document.body.scrollHeight;
23
22
Quote
mp
Anonymous
Thank you so much! ive been struggling to do this for days now.
Found loads of other tutorials how to do it with both JS and AJAX, tho none of em worked on a php generated webpage.
(a specified category of a forum, page doesn't really exist)
This one DOES work! YAY :banana:
A scrollbar does appear when its not needed tho im not really irritated by it, ill just play around with it to see if i can fix that, if not, its good like this.
(think mite have somthin to do with the margin i set up, but ill look into that later today.
Tnx again!
Found loads of other tutorials how to do it with both JS and AJAX, tho none of em worked on a php generated webpage.
(a specified category of a forum, page doesn't really exist)
This one DOES work! YAY :banana:
A scrollbar does appear when its not needed tho im not really irritated by it, ill just play around with it to see if i can fix that, if not, its good like this.
(think mite have somthin to do with the margin i set up, but ill look into that later today.
Tnx again!
27
23
Quote
Eugene
Anonymous
Hi the code works great in FF, I haven't been able to make it work in IE yet the way I'm using it,
My links are in a FLASH file.
I have on index file, with 2 iframes in it, with a flash header at the top and the other pages in the bottom iframe.
Any advice for the code to work in the flash??
here is the action script 1.0 I'm currently using:
on (press) {
getURL("gallerij.html", "main"
My links are in a FLASH file.
I have on index file, with 2 iframes in it, with a flash header at the top and the other pages in the bottom iframe.
Any advice for the code to work in the flash??
here is the action script 1.0 I'm currently using:
on (press) {
getURL("gallerij.html", "main"
15
38
Quote
swmasson
Anonymous
Hi there,
been looking for something like this for ages... and finally one that works... well nearly... if a link is used within the iframe then the iframe will not resize to the new content... the iframe height remains the same...
does anyone know how to fix this?
Thanks
Regards
SWM
been looking for something like this for ages... and finally one that works... well nearly... if a link is used within the iframe then the iframe will not resize to the new content... the iframe height remains the same...
does anyone know how to fix this?
Thanks
Regards
SWM
18
30
Quote
Barnz
Anonymous
THANK YOU SOOOO MUCH!
I've been googling for DAYS to find a solution to this. Thank you so much
I've been googling for DAYS to find a solution to this. Thank you so much
24
33
Quote
Anupam
Anonymous
THIS CODE DOESN'T WORK IN GOOGLE CROME, NETSCAPE 9 !!!!
DIDN'T CHECKED IN FIREFOX.
PLZ CHECK
25
25
Quote
Dade
Anonymous
damn yo this works great in safari 4 and it was easy!
THANK YOU
THANK YOU
25
25
Quote
Bret
Anonymous
looks like what i have been looking for... 1 issue it doesnt seem to make the iframe smaller when you reload to a shorter content -- at least not in opera, if this is what it is im fine with that but if there is a fix awesome... i wasnt able to make the code work as the OP made it
<html>
<head>
<script language="JavaScript">
function resize() {
var iframe = document.all.F1;
iframe.height=window.frames("F1").document.body.scrollHeight;
}
</script>
</head>
<body>
<center>
a bunch of other stuff
<iframe name="F1" src ="frame1.php?cat=0" scrolling="no" width="630" height=100% frameborder="0" onload="resize()"</iframe>
</body>
</html>
he had a
that did not work for me... could this be where the shorting problem is comming from?
do i put that onload into the parent body or the iframe body?
thanks for your help
Text Formatted Code
<html>
<head>
<script language="JavaScript">
function resize() {
var iframe = document.all.F1;
iframe.height=window.frames("F1").document.body.scrollHeight;
}
</script>
</head>
<body>
<center>
a bunch of other stuff
<iframe name="F1" src ="frame1.php?cat=0" scrolling="no" width="630" height=100% frameborder="0" onload="resize()"</iframe>
</body>
</html>
he had a
Text Formatted Code
<body onload="resize();>that did not work for me... could this be where the shorting problem is comming from?
do i put that onload into the parent body or the iframe body?
thanks for your help
20
20
Quote
Baggins
Anonymous
It doesn't work in Firefox.... did somebody fix it???
22
18
Quote
bob
Anonymous
hello everbody,
I've found this script (here -> "http://forum.jswelt.de/javascript/31676-iframe-dynamisch-h-he-anpassen.html" to change the iframe height dynamically.
it only works correctly in IE8 (other IE-browser not tested), other brother tested: mozFirefox, googleChrome and safari.
does anybody have an idea, how to make it work for the other browser?
function resizeMe(n, id) {
d=0;
ifObj=document.getElementsByName(n)[0];
p=(document.all)?'scroll':'offset';
eval("ifObj.style.height=window.frames[n].document.getElementsByTagName('body'[0]."+p+"Height+"+d);
}
the iframe looks like that:
<iframe id="MContenIFrame" name="main" onload="javascript:parent.resizeMe('MContenIFrame';" src="start.html"> </iframe>
I'm searching for days, but still hasn't found any working solution for any browser other than IE8...
..thank you for any help!
I've found this script (here -> "http://forum.jswelt.de/javascript/31676-iframe-dynamisch-h-he-anpassen.html" to change the iframe height dynamically.
it only works correctly in IE8 (other IE-browser not tested), other brother tested: mozFirefox, googleChrome and safari.
does anybody have an idea, how to make it work for the other browser?
function resizeMe(n, id) {
d=0;
ifObj=document.getElementsByName(n)[0];
p=(document.all)?'scroll':'offset';
eval("ifObj.style.height=window.frames[n].document.getElementsByTagName('body'[0]."+p+"Height+"+d);
}
the iframe looks like that:
<iframe id="MContenIFrame" name="main" onload="javascript:parent.resizeMe('MContenIFrame';" src="start.html"> </iframe>
I'm searching for days, but still hasn't found any working solution for any browser other than IE8...
..thank you for any help!
23
29
Quote
bob
Anonymous
sry for the smileys...it's my first entry in a forum!
the code again without (..hopefully)
d=0;
ifObj=document.getElementsByName(n)[0];
p=(document.all)?'scroll':'offset';
eval("ifObj.style.height=window.frames[n].document.getElementsByTagName('body')[0]."+p+"Height+"+d+31);
}
best regards
the code again without (..hopefully)
Text Formatted Code
function resizeMe(n, id) {d=0;
ifObj=document.getElementsByName(n)[0];
p=(document.all)?'scroll':'offset';
eval("ifObj.style.height=window.frames[n].document.getElementsByTagName('body')[0]."+p+"Height+"+d+31);
}
Text Formatted Code
<iframe id="MContenIFrame" name="main" onload="javascript:parent.resizeMe('MContenIFrame');" src="start.html"> </iframe>best regards
22
28
Quote
Guru
Anonymous
useless and hope less code
14
27
Quote
Hendy
Anonymous
this is the solution i've been looking for, nice, good, and work for my problem...thanks.. :banana:
22
19
Quote
ken
Anonymous
i ran that version without problems in firefox up to version 5 and ie
__________________________________________________________
<head>
<script language="JavaScript">
function resize() {
var iframe = document.all.NAME;
iframe.height=document.frames("NAME".document.body.scrollHeight;
}
</script>
</head>
<body onload=resize();>
<iframe src="URL" name="NAME" scrolling="no" width="100%" height=100% frameborder="0" onload="this.height=this.contentDocument.height"></iframe>
</body>
__________________________________________________________
now with new firefox 6 this doesn t function:
[21:42:51.597] document.all is undefined
can anyone help?
__________________________________________________________
<head>
<script language="JavaScript">
function resize() {
var iframe = document.all.NAME;
iframe.height=document.frames("NAME".document.body.scrollHeight;
}
</script>
</head>
<body onload=resize();>
<iframe src="URL" name="NAME" scrolling="no" width="100%" height=100% frameborder="0" onload="this.height=this.contentDocument.height"></iframe>
</body>
__________________________________________________________
now with new firefox 6 this doesn t function:
[21:42:51.597] document.all is undefined
can anyone help?
25
23
Quote
Status: offline
suprsidr
Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
My solution:
<script type="text/javascript">
function autoIframe(frameId, moreSpace){
try {
frame = document.getElementById(frameId);
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
frame.style.height = innerDoc.body.scrollHeight + moreSpace +"px";
document.getElementsByTagName("title")[0].innerHTML = innerDoc.getElementsByTagName("title")[0].innerHTML;
}
catch (err) {
window.status = err.message;
}
}
</script>
<iframe id="gallery_frame" src="/gallery2/embed_samples/inset.php" frameborder="0" width="100%" scrolling="auto" style="height:400px;" onload="if (window.parent && window.parent.autoIframe) {window.parent.autoIframe('gallery_frame',20);}">Your browser does not support inline frames</iframe>
@see it working here.
-s
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
Text Formatted Code
<script type="text/javascript">
function autoIframe(frameId, moreSpace){
try {
frame = document.getElementById(frameId);
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
frame.style.height = innerDoc.body.scrollHeight + moreSpace +"px";
document.getElementsByTagName("title")[0].innerHTML = innerDoc.getElementsByTagName("title")[0].innerHTML;
}
catch (err) {
window.status = err.message;
}
}
</script>
<iframe id="gallery_frame" src="/gallery2/embed_samples/inset.php" frameborder="0" width="100%" scrolling="auto" style="height:400px;" onload="if (window.parent && window.parent.autoIframe) {window.parent.autoIframe('gallery_frame',20);}">Your browser does not support inline frames</iframe>
@see it working here.
-s
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
23
29
Quote
Ryan
Anonymous
even though your site works in Chrome for me I cannot get the code to work in Chrome.
You code works in Safari however. Any ideas?
You code works in Safari however. Any ideas?
26
18
Quote
Status: offline
suprsidr
Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
you would have to provide url to offending page.
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
22
25
Quote
All times are EST. The time is now 11:08 am.
- Normal Topic
- Sticky Topic
- Locked Topic
- New Post
- Sticky Topic W/ New Post
- Locked Topic W/ New Post
- View Anonymous Posts
- Able to post
- Filtered HTML Allowed
- Censored Content