Struggling with setting iframe height dynamically

[DL]

That is, for an iframe with onload attribute to preset a width and
height then depending on the length of its content to auto-expand
instead of scrolling. The following URL is quite interesting,
http://www.phpmix.org/iframe_height_auto_resize,
however, it failed to work for me, OS = XP w/ sp2; brower = IE7, but
my app is quite complicated... it load the iframe inside a javascrip-
driven window...

And their forum has been closed, so, I have to post the question here,
the thrown js error is, "DYNIFS not defined". Any idea on a solution
would be appreciated.

tia.

[john6630]

The obvious question is did you download the JS file and reference it
properly in your code?

John

DL wrote:

That is, for an iframe with onload attribute to preset a width and
height then depending on the length of its content to auto-expand
instead of scrolling. The following URL is quite interesting,
http://www.phpmix.org/iframe_height_auto_resize,
however, it failed to work for me, OS = XP w/ sp2; brower = IE7, but
my app is quite complicated... it load the iframe inside a javascrip-
driven window...

And their forum has been closed, so, I have to post the question here,
the thrown js error is, "DYNIFS not defined". Any idea on a solution
would be appreciated.

tia.

[DL]

On Aug 31, 11:36*am, john6630 <[e-mail]:

The obvious question is did you download the JS file and reference it
properly in your code?

John

Yes, but on "reference it properly" it could be an issue, the IFRAME
that I have IS NOT reloaded, the code is like this
<iframe id="frame1" name="frame1"
onload="document.frames['frame1'].document.designMode='on';"
contenteditable="true" style="width:600px; height:280px;"><font
size="-1"></font></iframe>

And it has to be this way to accomodate some wysiwug editor that I
'cook' up.

Further thoughts? Thanks.

[john6630]

On Aug 31, 2:24 pm, DL <[e-mail]:

On Aug 31, 11:36 am, john6630 <[e-mail]:The obvious question is did you download the JS file and reference it

properly in your code?

John

Yes, but on "reference it properly" it could be an issue, the IFRAME
that I have IS NOT reloaded, the code is like this
<iframe id="frame1" name="frame1"
onload="document.frames['frame1'].document.designMode='on';"
contenteditable="true" style="width:600px; height:280px;"><font
size="-1"></font></iframe>

And it has to be this way to accomodate some wysiwug editor that I
'cook' up.

Further thoughts? Thanks.

I do not see any call to the javascript

"DYNIFS.resize('frame1')"

I think you need this in the onload event to allow it to resize. Not
sure how it works with respect to the style settings you are using.
But you should be able to use trial and error to work it out.

John

[DL]

>

I do not see any call to the javascript

"DYNIFS.resize('frame1')"

I think you need this in the onload event to allow it to resize. Not
sure how it works with respect to the style settings you are using.
But you should be able to use trial and error to work it out.

John- Hide quoted text -

Sorry, I forgot to mention that I did add the call element of
"DYNIFS.resize('frame1')" inside the onload event to no avail.
Interesting thought on interaction with style settings.

The main page has the following inline style settings:
<style type="text/css">
#projectautosuggest {
z-index:10;
}
body, p, div, th, td
{
font-family: Verdana,Tahoma, sans-serif,Arial, Helvetica;
font-size: 10pt;
}
</style>
while the page that hosts the iframe has not any. My concern is this
app has quite a bit of third party js libraries, maybe they cause
confusion... A thought of trying it with Firefox's Firebug is quickly
abandoned because current FireFox (v2 or v3) does not support the
onload event for iframe. hmm, am I stuck?

Thanks.

[Bart Van der Donck]

DL wrote:

[...]
<iframe id="frame1" name="frame1"
onload="document.frames['frame1'].document.designMode='on';"
contenteditable="true" style="width:600px; height:280px;"><font
size="-1"></font></iframe>
[...]
A thought of trying it with Firefox's Firebug is quickly
abandoned because current FireFox (v2 or v3) does not support the
onload event for iframe. *

And it also doesn't support 'contenteditable' and
'document.designMode'. I would probably do something like this:

<iframe id="frame1" height="100"></iframe>
<input type="button" value="Resize"
onClick="document.getElementById('frame1').height= '200px';">

Hope this helps,

--
Bart

[DL]

On Sep 1, 11:31*am, Bart Van der Donck <[e-mail]:

DL wrote:

[...]
<iframe id="frame1" name="frame1"
onload="document.frames['frame1'].document.designMode='on';"
contenteditable="true" style="width:600px; height:280px;"><font
size="-1"></font></iframe>
[...]
A thought of trying it with Firefox's Firebug is quickly
abandoned because current FireFox (v2 or v3) does not support the
onload event for iframe. *

And it also doesn't support 'contenteditable' and
'document.designMode'. I would probably do something like this:

* *<iframe id="frame1" height="100"></iframe>
* *<input type="button" value="Resize"
* * onClick="document.getElementById('frame1').height= '200px';">

Hope this helps,

--
*Bart

Bart,

I've tried your following approach before to no avail.
<input type="button" value="Resize"
onClick="document.getElementById('frame1').height= '200px';">
Debugging out = {empty string}
Have also tried a similar one like
<input type="button" value="Resize"
onClick="document.frames('frame1').height='200px'; ">
Debugging out = undefined

Isn't there a way to call the named or IDed frame within the current
window?

Thanks.

[Bart Van der Donck]

DL wrote:

Bart,

I've tried your following approach before to no avail.
( <iframe id="frame1" height="100"></iframe)
<input type="button" value="Resize"
* * onClick="document.getElementById('frame1').height= '200px';">

Not sure why this would not work for you. Please make sure that there
is only one id="frame1" and that the <iframeis also present on the
web page.

Debugging out = {empty string}
Have also tried a similar one like
*<input type="button" value="Resize"
* * onClick="document.frames('frame1').height='200px'; ">
Debugging out = undefined

The document.frames object doesn't have a 'height'-property, so this
approach cannot be used. FireFox seems to have a 'innerHeight', but
MSIE doesn't.

By the way, you cannot refer to a frame in this way. It should be:

frames['iframe1']

and not

document.frames('frame1')

Isn't there a way to call the named or IDed frame within the current
window?

Sure. For ID: please see my previous example with 'getElementById'.
For name: it makes no sense to refer by name using document.frames,
because it has no height-property that is well supported.

Here is a way without ID or name:

<iframe height="100"></iframe>
<input type="button" value="Resize"
onClick="document.getElementsByTagName('iframe')
[0].height='200px';">

Hope this helps,

--
Bart

[totalstranger]

On or about 8/30/2008 17:37, it came to pass that DL wrote:

That is, for an iframe with onload attribute to preset a width and
height then depending on the length of its content to auto-expand
instead of scrolling. The following URL is quite interesting,
http://www.phpmix.org/iframe_height_auto_resize,
however, it failed to work for me, OS = XP w/ sp2; brower = IE7, but
my app is quite complicated... it load the iframe inside a javascrip-
driven window...

And their forum has been closed, so, I have to post the question here,
the thrown js error is, "DYNIFS not defined". Any idea on a solution
would be appreciated.

tia.

I struggled with this issue a few years back and eventually gave up. I
had it working if it was within the same domain, but when it was across
two separate domains I bumped into browser cross domain restrictions and
it refused to work, even for something (IMHO) as innocuous as setting
the IFrame height.

Since my site was supposed to provide the Iframe to numerous foreign
sites, I wrote a PHP script that generates Javascript filling in a Div
eliminating all the Iframe issues.

Quick example on how to do this

On source page on any domain: www.foobar.com/extermalcontent.html

<div id='ContentDiv'>
<noscript><b>*****WARNING JAVASCRIPT IS DISABLED, IT MUST BE ENABLED TO
PROPERLY VIEW THIS PAGE*****</b>
</noscript>
....Loading content from EXAMPLE.ORG...
</div>
<script type="text/javascript"
src="http://www.example.org/ExternalContent.php?parm1=sample>
</script>

The PHP script generates javascript:
function SetDiv()
{
document.getElementById('ContentDiv').innerHTML = '<p>whatever you want</p>'
}

[DL]

On Sep 2, 3:53*am, Bart Van der Donck <[e-mail]:

DL wrote:

Bart,

I've tried your following approach before to no avail.
( <iframe id="frame1" height="100"></iframe)
<input type="button" value="Resize"
* * onClick="document.getElementById('frame1').height= '200px';">

Not sure why this would not work for you. Please make sure that there
is only one id="frame1" and that the <iframeis also present on the
web page.

Debugging out = {empty string}
Have also tried a similar one like
*<input type="button" value="Resize"
* * onClick="document.frames('frame1').height='200px'; ">
Debugging out = undefined

The document.frames object doesn't have a 'height'-property, so this
approach cannot be used. FireFox seems to have a 'innerHeight', but
MSIE doesn't.

By the way, you cannot refer to a frame in this way. It should be:

* frames['iframe1']

and not

* document.frames('frame1')

Isn't there a way to call the named or IDed frame within the current
window?

Sure. For ID: please see my previous example with 'getElementById'.
For name: it makes no sense to refer by name using document.frames,
because it has no height-property that is well supported.

Here is a way without ID or name:

* *<iframe height="100"></iframe>
* *<input type="button" value="Resize"
* * onClick="document.getElementsByTagName('iframe')
[0].height='200px';">

Hope this helps,

--
*Bart

I truly appreciate your efforts but it won't work. I have long
suspected the bloated YUI etc. etc. third party js libararies mess
things up (the app can't do without them). At this point I'll give it
up for now... this feature would be nice to have but not super
Critical...