Struggling with setting iframe height dynamically

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • DL

    Struggling with setting iframe height dynamically

    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

    #2
    Re: Struggling with setting iframe height dynamically

    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.

    Comment

    • DL

      #3
      Re: Struggling with setting iframe height dynamically

      On Aug 31, 11:36 am, john6630 <john6...@hotma il.comwrote:
      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="documen t.frames['frame1'].document.desig nMode='on';"
      contenteditable ="true" style="width:60 0px; 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.

      Comment

      • john6630

        #4
        Re: Struggling with setting iframe height dynamically

        On Aug 31, 2:24 pm, DL <tatata9...@gma il.comwrote:
        On Aug 31, 11:36 am, john6630 <john6...@hotma il.comwrote: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="documen t.frames['frame1'].document.desig nMode='on';"
        contenteditable ="true" style="width:60 0px; 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

        Comment

        • DL

          #5
          Re: Struggling with setting iframe height dynamically

          >
          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">
          #projectautosug gest {
          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.

          Comment

          • Bart Van der Donck

            #6
            Re: Struggling with setting iframe height dynamically

            DL wrote:
            [...]
            <iframe id="frame1" name="frame1"
            onload="documen t.frames['frame1'].document.desig nMode='on';"
            contenteditable ="true" style="width:60 0px; 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 'contenteditabl e' and
            'document.desig nMode'. I would probably do something like this:

            <iframe id="frame1" height="100"></iframe>
            <input type="button" value="Resize"
            onClick="docume nt.getElementBy Id('frame1').he ight='200px';">

            Hope this helps,

            --
            Bart

            Comment

            • DL

              #7
              Re: Struggling with setting iframe height dynamically

              On Sep 1, 11:31 am, Bart Van der Donck <b...@nijlen.co mwrote:
              DL wrote:
              [...]
              <iframe id="frame1" name="frame1"
              onload="documen t.frames['frame1'].document.desig nMode='on';"
              contenteditable ="true" style="width:60 0px; 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 'contenteditabl e' and
              'document.desig nMode'. I would probably do something like this:
              >
                 <iframe id="frame1" height="100"></iframe>
                 <input type="button" value="Resize"
                  onClick="docume nt.getElementBy Id('frame1').he ight='200px';">
              >
              Hope this helps,
              >
              --
               Bart
              Bart,

              I've tried your following approach before to no avail.
              <input type="button" value="Resize"
              onClick="docume nt.getElementBy Id('frame1').he ight='200px';">
              Debugging out = {empty string}
              Have also tried a similar one like
              <input type="button" value="Resize"
              onClick="docume nt.frames('fram e1').height='20 0px';">
              Debugging out = undefined

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

              Thanks.



              Comment

              • Bart Van der Donck

                #8
                Re: Struggling with setting iframe height dynamically

                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="docume nt.getElementBy Id('frame1').he ight='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="docume nt.frames('fram e1').height='20 0px';">
                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="docume nt.getElementsB yTagName('ifram e')
                [0].height='200px' ;">

                Hope this helps,

                --
                Bart

                Comment

                • totalstranger

                  #9
                  Re: Struggling with setting iframe height dynamically

                  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=samp le>
                  </script>

                  The PHP script generates javascript:
                  function SetDiv()
                  {
                  document.getEle mentById('Conte ntDiv').innerHT ML = '<p>whatever you want</p>'
                  }

                  Comment

                  • DL

                    #10
                    Re: Struggling with setting iframe height dynamically

                    On Sep 2, 3:53 am, Bart Van der Donck <b...@nijlen.co mwrote:
                    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="docume nt.getElementBy Id('frame1').he ight='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="docume nt.frames('fram e1').height='20 0px';">
                    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="docume nt.getElementsB yTagName('ifram e')
                    [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...

                    Comment

                    Working...