FireFox/NS experts: <iframe> inside <div> question -- help pls!

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

    FireFox/NS experts: <iframe> inside <div> question -- help pls!

    How do I construct a <iframe> or equivalent for FireFox/NS browsers,
    inside a screen centered <div> tag? Can it be done?
  • mscir

    #2
    Re: FireFox/NS experts: &lt;iframe&g t; inside &lt;div&gt; question -- help pls!

    Julia Briggs wrote:
    [color=blue]
    > How do I construct a <iframe> or equivalent for FireFox/NS browsers,
    > inside a screen centered <div> tag? Can it be done?[/color]

    Does this work for you?

    <style type="text/css">
    ..inline {
    background-color: #FFAABB;
    text-align: center;
    height: 520px;
    width: 520px;
    }
    ..if1{
    width: 500px;
    height: 500px;
    }
    </style>


    <div class="inline">
    <iframe class="if1" SRC="http://www.google.com" >
    </iframe>
    </div>

    Comment

    • RobB

      #3
      Re: FireFox/NS experts: &lt;iframe&g t; inside &lt;div&gt; question -- help pls!

      mscir <mscir@access4l ess.net> wrote in message news:<10p8oamtg ijt00@corp.supe rnews.com>...[color=blue]
      > Julia Briggs wrote:
      >[color=green]
      > > How do I construct a <iframe> or equivalent for FireFox/NS browsers,
      > > inside a screen centered <div> tag? Can it be done?[/color]
      >
      > Does this work for you?
      >
      > <style type="text/css">
      > .inline {
      > background-color: #FFAABB;
      > text-align: center;
      > height: 520px;
      > width: 520px;
      > }
      > .if1{
      > width: 500px;
      > height: 500px;
      > }
      > </style>
      >
      >
      > <div class="inline">
      > <iframe class="if1" SRC="http://www.google.com" >
      > </iframe>
      > </div>[/color]

      Since this is a JS group, I assume you meant programmaticall y...

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
      <title>foo</title>
      <style type="text/css">

      html, body {
      width: 100%;
      height: 100%;
      }
      #container {
      width: 70%;
      height: 70%;
      margin: 40px auto;
      background: pink;
      }

      </style>
      <script type="text/javascript">
      //<![CDATA[

      function IFramePopulate( ctr_id, src)
      {
      var ctr;
      if (ctr = document.getEle mentById(ctr_id ))
      {
      while (ctr.hasChildNo des())
      ctr.removeNode( ctr.lastChild);
      var ifrm = document.create Element('IFRAME ');
      //ifrm.frameBorde r = 0; //optional
      ifrm.style.widt h = String(ctr.offs etWidth + 'px');
      ifrm.style.heig ht = String(ctr.offs etHeight + 'px');
      ctr.appendChild (ifrm);
      ifrm.src = src;
      }
      }

      //]]>
      </script>
      </head>
      <body>
      <div id="container"> </div>
      <div style="text-align:center;"> <a href="#null"
      onclick="IFrame Populate('conta iner',
      'http://www.google.com' )">go</a></div>
      </body>
      </html>

      Comment

      • Randy Webb

        #4
        Re: FireFox/NS experts: &lt;iframe&g t; inside &lt;div&gt; question -- help pls!

        RobB wrote:[color=blue]
        > mscir <mscir@access4l ess.net> wrote in message news:<10p8oamtg ijt00@corp.supe rnews.com>...
        >[color=green]
        >>Julia Briggs wrote:
        >>
        >>[color=darkred]
        >>>How do I construct a <iframe> or equivalent for FireFox/NS browsers,
        >>>inside a screen centered <div> tag? Can it be done?[/color]
        >>
        >>Does this work for you?
        >>
        >><style type="text/css">
        >>.inline {
        >> background-color: #FFAABB;
        >> text-align: center;
        >> height: 520px;
        >> width: 520px;
        >>}
        >>.if1{
        >> width: 500px;
        >> height: 500px;
        >>}
        >></style>
        >>
        >>
        >><div class="inline">
        >><iframe class="if1" SRC="http://www.google.com" >
        >></iframe>
        >></div>[/color]
        >
        >
        > Since this is a JS group, I assume you meant programmaticall y...[/color]

        Why rely on a JS dependency when its not needed?

        --
        Randy
        comp.lang.javas cript FAQ - http://jibbering.com/faq
        Answer:It destroys the order of the conversation
        Question: Why?
        Answer: Top-Posting.
        Question: Whats the most annoying thing on Usenet?

        Comment

        • Julia Briggs

          #5
          Re: FireFox/NS experts: &lt;iframe&g t; inside &lt;div&gt; question -- help pls!

          Ok, how can I get that to auto-center as an absolute layer? I've tried
          different ways, but can only get it to display in a fixed position.

          Julia

          Comment

          • mscir

            #6
            Re: FireFox/NS experts: &lt;iframe&g t; inside &lt;div&gt; question -- help pls!

            Julia Briggs wrote:
            [color=blue]
            > Ok, how can I get that to auto-center as an absolute layer? I've tried
            > different ways, but can only get it to display in a fixed position.[/color]

            If you mean how can you center the div on the page using CSS, while this
            might not be the best newsgroup for a CSS inquiry, did you try:

            margin: auto;

            maybe something like:

            ..div1{
            width: 420px;
            height: 420px;
            margin: auto; /* center div on page */
            text-align: center; /* center iframe in div */
            }

            <div class='div1'>
            <iframe>
            </iframe>
            </div>

            Comment

            • Toby Inkster

              #7
              Re: FireFox/NS experts: &lt;iframe&g t; inside &lt;div&gt; question -- help pls!

              Julia Briggs wrote:
              [color=blue]
              > Ok, how can I get that to auto-center as an absolute layer?[/color]

              div.layer {
              position: absolute;
              left: 50%;
              width: 200px;
              margin-left: -100px;
              }

              --
              Toby A Inkster BSc (Hons) ARCS
              Contact Me ~ http://tobyinkster.co.uk/contact

              Comment

              • RobB

                #8
                Re: FireFox/NS experts: &lt;iframe&g t; inside &lt;div&gt; question -- help pls!

                Toby Inkster <usenet200411@t obyinkster.co.u k> wrote in message news:<pan.2004. 11.13.14.30.54. 655632@tobyinks ter.co.uk>...[color=blue]
                > Julia Briggs wrote:
                >[color=green]
                > > Ok, how can I get that to auto-center as an absolute layer?[/color]
                >
                > div.layer {
                > position: absolute;
                > left: 50%;
                > width: 200px;
                > margin-left: -100px;
                > }[/color]
                [color=blue]
                > Randy Webb wrote:
                >
                > Why rely on a JS dependency when its not needed?[/color]

                Thought I covered that: "Since this is a JS group, I assume you meant
                programmaticall y..."

                Took the meaning of "construct" as signifying "after load" as
                otherwise it's simply an HTML-related query. Could be incorrect,
                although this:
                [color=blue]
                > Ok, how can I get that to auto-center...[/color]

                ....didn't help elucidate the issue. fwiw...

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
                <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
                <head>
                <title>foo</title>
                <style type="text/css">

                html, body {
                width: 100%;
                height: 100%;
                }
                #container {
                position: relative;
                width: 600px;
                height: 400px;
                margin: 40px auto;
                border: 3px #000 double;
                background: pink;
                }

                </style>
                <script type="text/javascript">
                //<![CDATA[

                function IFramePopulate( ctr_id, src)
                {
                var ctr;
                if (ctr = document.getEle mentById(ctr_id ))
                {
                while (ctr.hasChildNo des())
                ctr.removeNode( ctr.lastChild);
                var ifrm = document.create Element('IFRAME ');
                ctr.appendChild (ifrm);
                ifrm.frameBorde r = 0; //optional
                ifrm.style.widt h = '450px';
                ifrm.style.heig ht = '300px';
                ifrm.style.posi tion = 'absolute';
                ifrm.style.left = String((ctr.off setWidth - ifrm.offsetWidt h) * .5)
                + 'px';
                ifrm.style.top = String((ctr.off setHeight - ifrm.offsetHeig ht) * .5)
                + 'px';
                ifrm.src = src;
                }
                }

                //]]>
                </script>
                </head>
                <body>
                <div id="container"> </div>
                <div style="text-align:center;"> <a href="#null"
                onclick="IFrame Populate('conta iner',
                'http://www.google.com' )">go</a></div>
                </body>
                </html>

                Yes. I know, it's JS....

                Comment

                • Randy Webb

                  #9
                  Re: FireFox/NS experts: &lt;iframe&g t; inside &lt;div&gt; question -- help pls!

                  RobB wrote:[color=blue]
                  > Toby Inkster <usenet200411@t obyinkster.co.u k> wrote in message news:<pan.2004. 11.13.14.30.54. 655632@tobyinks ter.co.uk>...
                  >[color=green]
                  >>Julia Briggs wrote:
                  >>
                  >>[color=darkred]
                  >>>Ok, how can I get that to auto-center as an absolute layer?[/color]
                  >>
                  >>div.layer {
                  >> position: absolute;
                  >> left: 50%;
                  >> width: 200px;
                  >> margin-left: -100px;
                  >>}[/color]
                  >
                  >[color=green]
                  >>Randy Webb wrote:
                  >>
                  >>Why rely on a JS dependency when its not needed?[/color]
                  >
                  >
                  > Thought I covered that: "Since this is a JS group, I assume you meant
                  > programmaticall y..."[/color]

                  Does that mean if they ask how to set the color of an element, in a JS
                  group, then you will give them a JS solution instead of an HTML/CSS
                  solution?

                  Just because a question is asked in a particular group does not mean
                  that the answer is necessarily the topic of that group.

                  But this message is not posted solely to c.l.j, it is also posted to
                  alt.html

                  Again, why rely on a JS dependency when its not needed?

                  --
                  Randy
                  comp.lang.javas cript FAQ - http://jibbering.com/faq

                  Comment

                  • RobB

                    #10
                    Re: FireFox/NS experts: &lt;iframe&g t; inside &lt;div&gt; question -- help pls!

                    Randy Webb <HikksNotAtHome @aol.com> wrote in message news:<B_udnZXqL 8RAgwXcRVn-3A@comcast.com> ...[color=blue]
                    > RobB wrote:[color=green]
                    > > Toby Inkster <usenet200411@t obyinkster.co.u k> wrote in message news:<pan.2004. 11.13.14.30.54. 655632@tobyinks ter.co.uk>...
                    > >[color=darkred]
                    > >>Julia Briggs wrote:
                    > >>
                    > >>
                    > >>>Ok, how can I get that to auto-center as an absolute layer?
                    > >>
                    > >>div.layer {
                    > >> position: absolute;
                    > >> left: 50%;
                    > >> width: 200px;
                    > >> margin-left: -100px;
                    > >>}[/color]
                    > >
                    > >[color=darkred]
                    > >>Randy Webb wrote:
                    > >>
                    > >>Why rely on a JS dependency when its not needed?[/color]
                    > >
                    > >
                    > > Thought I covered that: "Since this is a JS group, I assume you meant
                    > > programmaticall y..."[/color]
                    >
                    > Does that mean if they ask how to set the color of an element, in a JS
                    > group, then you will give them a JS solution instead of an HTML/CSS
                    > solution?
                    >
                    > Just because a question is asked in a particular group does not mean
                    > that the answer is necessarily the topic of that group.
                    >
                    > But this message is not posted solely to c.l.j, it is also posted to
                    > alt.html
                    >
                    > Again, why rely on a JS dependency when its not needed?[/color]

                    This is silly. Here's the original Q:
                    [color=blue]
                    > How do I construct a <iframe> or equivalent for FireFox/NS browsers,
                    > inside a screen centered <div> tag? Can it be done?[/color]

                    When I read that, it seemed unlikely that anyone would be asking if
                    they could 'construct' an iframe (HTML) inside a div (HTML) - that's
                    like posting "can I put a image inside a paragraph?" Not impossible,
                    but unlikely. I interpreted it as a request for a dynamic solution.
                    But, you're right, I am deeply ashamed, and I'll never post here again
                    after this unforgiveable lapse.
                    [color=blue]
                    > Does that mean if they ask how to set the color of an element, in a JS
                    > group, then you will give them a JS solution instead of an HTML/CSS
                    > solution?[/color]

                    Maybe. :D

                    Comment

                    Working...