Dynamic iFrame Resize won't work in Safari?

[Twinster]

Hey!
Well, I have now resolved my previous matter. However, I have an iFrame that dynamically re-size to the content being loaded in to it.

The script works fine when content is added and the iFrame needs to get higher. However, when loading content that is smaller then the previous content the iFrame just won't size down in Safari. In all the other browsers it works fine.

Does anyone have a solution for this?

Best Regards,
R. Darell

 

[BabyJeffy]

I suggest you include a link to your current code/page, or that you create a (simple) test page that demonstrates this.

Also, what version of Safari (2 or 3) and what operating system (MacOSX or Windows) are you experiencing this with?

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[Twinster]

Thanks Jeff!

Ok, this error occurs in the latest Safari version, and OS is both Windows and OSX.

I can't reveal the project yet as it is due to customers request. However, I can maybe try to illustrate it underneath somehow.


Normal State:

iFrame 01 iFrame 02
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXCONTENTXXXX|XXCONTENTXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|


New content in iFrame 01 and back to lesser content in iFrame 01 makes the iFrames look like this in Safari. It doesn't go back to a size fitting the content.

iFrame 01 iFrame 02
iFrame 01 iFrame 02
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXCONTENTXXXX|XXCONTENTXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|XXXXXXXXXXXXXX|XXXXXXXXXXX|
|HHHHHHHHHHHHHH|
|HHHHHHHHHHHHHH|
|HHHHHHHHHHHHHH|
|HHHHHHHHHHHHHH|
|HHHHHHHHHHHHHH|
|HHHHHHHHHHHHHH|

X = Content, H = Blank


I hope this helps. I am using the "onload" expression to trigger the auto-size script.

Anyone have any idea how to solve this issue in Safari. It works fine in IE and FF but however not in Safari.

Best,
Richard

 

[BillyRayPreachersSon]

Can you at least post the code you are using to resize the iframes? I'm sure that that can't be top-secret.

Or, as Jeff suggested, a cut-down test harness.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Twinster]

Wow, I really in my honest belief thought I had included it in my top thread comment. But I hadn't. LOL

Sooo sorry! Here is the code I am using to autosize the iFrames.

<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;

if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}

document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>


Hope this helps. Really need a solution for this...

Thanks in advance!
Richard

 

[BillyRayPreachersSon]

Perhaps the space in the string "document .body" is causing issues?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

Ignoring your problem for a moment, how about reworking that function to be a little neater?

...
function autoResize(id) {
    if (element = document.getElementById(id)) {
        var mynode = element.contentWindow.document.body;
        element.height= mynode.scrollHeight + "px";
        element.width= mynode.scrollWidth + "px";
    }
}
...

It won't solve your Safari problem, though Still looking at that.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[BillyRayPreachersSon]

Hmm - after knocking up a test harness to resize iframes using several methods, it looks like this could be a Safari issue, as I can never get the frames to shrink, either!

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Hehe - having said that, I was working from the 'scrolllHeight' the same as you. Changing this to 'offsetHeight' fixes the issue for me.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Twinster]

YES!!!
Works like a charm! Thanks Dan!
Amazingly easy solution! Awesome!

/Richard