CODEWITHSUNDEEP
javascripthtmlcssiframe
KPO
KPO

Reputation: 880

How do I only get a container to show up from a page in an IFRAME?

Let's use an example:

Say I have a webpage that contains lots of DIVs. Now I want to render one DIV and its children DIVs into an IFrame.

If you render the code below you will see that it contains a black box with the page being red. What I need is to get that black box and if it's displaying to show up in an Iframe. Using the code below I am able to accomplish 80% of these requirements. The only problem is that when rendering the IFrame the background color of the webpage shows up. So it seems that the IFrame is giving a margin-left gap and then filling it with the red background color. I am unsure what to do.

Here's the code: 

 <html>
     <head>
        <link rel="stylesheet" type="text/css" href="/psy/render.css" />
        <script type="text/javascript" src="http://www.domain.com/psy/given.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="http://www.domain.com/psy/redaf.js"></script>
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

     /*
        This one makes the javascript functionality work when in iframe and supposedly 
        was also suppose to render this page correctly.  I got it from here:  
        http://css-tricks.com/snippets/jquery/fit-iframe-to-content/
    */

    <script type='text/javascript'>
        $(function(){
            var iFrames = $('iframe');

            function iResize() {
            for (var i = 0, j = iFrames.length; i < j; i++) {
                iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
            }

            if ($.browser.safari || $.browser.opera) {

               iFrames.load(function(){
                   setTimeout(iResize, 0);
               });

               for (var i = 0, j = iFrames.length; i < j; i++) {
                    var iSource = iFrames[i].src;
                    iFrames[i].src = '';
                    iFrames[i].src = iSource;
               }

            } else {
               iFrames.load(function() {
                   this.style.height = this.contentWindow.document.body.offsetHeight + 
                   'px';
               });
            }
        });

       </script>

       <title>Demo</title>
        <meta charset="utf-8" />
</head>
<body onload="countdown(year,month,day,hour,minute)">
   <div id="entire">
        <div id="text1">Text Sample 1</div>
       <div id="text2">Text Sample 2</div>
       <div id="countdown_script"></div>
  </div>
  <div class="other_stuff">
    <p class="titler">Title</p>
    <p>text block.</p>
  </div>

The CSS:

  body {
 background-color: #990000;
 }

 #text1 {
 color: #FFFFFF;
 font-family: 'Helvetica Neue',Helvetica,Arial;
 font-size: 20px;
 margin-left: 20px;
 margin-top: 30px;
 padding-top: 40px;

 }
 .sampler {
 color: #FFFFFF;
 font-family: 'Helvetica Neue',Helvetica,Arial;
 margin-left: 450px;
 margin-top: 130px;
 text-shadow: 2px 2px 2px #000000;
 width: 500px;
 }
 p.titler {
 color: #ffffff;
 font-size: 30px;
 margin-bottom: -10px;
 }
 ul {
 list-style-type: none;
 }
 span {
 color: #FFFFFF;
 margin-left: 10px;
 }
 a {
 text-decoration: none;
 }
 #entire {
 background-color: #000000;
 height: 350px;
 margin-left: auto;
 margin-right: auto;
 width: 200px;
 -moz-box-shadow: 0 2px 15px #990000;
 -webkit-box-shadow: 0 2px 15px #990000;
 }
 #text2 {
 color: #FFFFFF;
 font-family: 'Helvetica Neue',Helvetica,Arial;
 font-size: 20px;
 letter-spacing: 5px;
 margin-left: 20px;
 margin-top: 15px;
 }
 .other_stuff {
 color: #FFFFFF;
 font-family: 'Helvetica Neue',Helvetica,Arial;
 margin-left: 450px;
 margin-top: 130px;
 width: 500px;
 }

Upvotes: 1

Views: 378

Answers (1)

Amogh Talpallikar
Amogh Talpallikar

Reputation: 12184

TRY THIS

  window.frames['yourIframe'].document.body.innerHTML = document.getElementById("yourContainerDiv").innerHTML;

Upvotes: 1

Related Questions