A Width Changable Iframe

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • WH
    #1

    A Width Changable Iframe

    While the whidth of the table can be set as 80%, the size of the iframe can
    not be changed once set.

    I am looking for a solution which the iframe's width can be set according to
    the IE/Firefox/Opera's width. Is that possible?


    Tags: None
    • Yann-Erwan Perio
      #2
      Re: A Width Changable Iframe

      WH wrote:
      [color=blue]
      > I am looking for a solution which the iframe's width can be set according to
      > the IE/Firefox/Opera's width. Is that possible?[/color]

      Well, you can grab a reference to the frame element, and change its
      style properties - this should work on recent versions (IE5+, Mozilla,
      Opera7+).

      ---
      <iframe id="foo" src="http://jibbering.com/faq/"></iframe>
      <input type="button" onclick="bar('f oo')" value="100%">

      <script type="text/javascript">
      function bar(frameId) {
      var frame;
      if(document.get ElementById) {
      frame=document. getElementById( frameId);
      frame.style.wid th="100%";
      frame.style.hei ght="100%";
      }
      }
      </script>
      ---

      If this does not help, then please post a short test case demonstrating
      your issue, and state the environment/browser you've executed the test in.

        Comment

        • Andrew Thompson
          #3
          Re: A Width Changable Iframe

          On Sat, 18 Sep 2004 06:54:43 GMT, WH wrote:
          [color=blue]
          > While the whidth of the table can be set as 80%, the size of the iframe can
          > not be changed once set.
          >
          > I am looking for a solution which the iframe's width can be set according to
          > the IE/Firefox/Opera's width. Is that possible?[/color]

          <style type='text/css'>
          iframe {
          width: 100%;
          }
          </style>

          --
          Andrew Thompson
          http://www.PhySci.org/codes/ Web & IT Help
          http://www.PhySci.org/ Open-source software suite
          http://www.1point1C.org/ Science & Technology
          http://www.lensescapes.com/ Images that escape the mundane

            Comment

            • SanJoseWebGuy
              #4
              Re: A Width Changable Iframe

              'In line' with Andrew's suggestion, (ha, no pun intended re:styles), may I
              recommend setting the body style too and set the margin & padding to 0px to
              avoid application of default settings which may not allow the i-frame to
              expand:
              <body style="margin:0 px; padding:0px;">
              <iframe style="width:10 0%; height:100%; border:0; margin:0; padding:0;"
              src="http://www.google.com" >
              </iframe>

              -Jim

                Comment

                • Thomas 'PointedEars' Lahn
                  #5
                  Re: A Width Changable Iframe

                  WH wrote:
                  [color=blue]
                  > While the whidth of the table can be set as 80%, the size of the iframe
                  > can not be changed once set.[/color]

                  It can be changed, both explicitely and implicitely.
                  [color=blue]
                  > I am looking for a solution which the iframe's width can be set according
                  > to the IE/Firefox/Opera's width. Is that possible?[/color]

                  Sure.

                  <iframe src="..." ... width="80%" height="...">
                  alternative
                  </iframe>

                  The "iframe" element above will always take 80% of the width of
                  the viewport or its parent element; only in working UAs, of course.


                  PointedEars
                  --
                  There never was a good war or a bad peace. -- B. Franklin

                    Comment

                    Previous template Next
                    Working...