Dynamically resize Iframe Height of External Blog

    Question by:
    On

    Topics:

    I have a website that I want to nest an external Google Blogger Blog in an Iframe on a .cfm container page. Have tried many solutions--no cross domain security warning but iframe just does not resize.

    Please: EZ to follow instructions, I am 80% designer, 20% coder....

    I do have access to website and html blogger code.

    Many, many thanks!

    CFM CONTAINER PAGE CODE:
     
    <body>
    <div id="maincontainer">
     
    <div id="topsection">
    <cfinclude template="header3_alt.cfm">
    </div>
     
    <div id="fullwidthcontentwrapper">
    <div id="blogcontentcolumn">
    		<img src="images/blog-title.jpg" width="1002" height="78" />
    <!--<div class="aboutMainText"> -->				
            		 <div class="center"><!-- BLOG -->
            		   <iframe id="idTopFrame" src="http://www.alexchingas.blogspot.com" height="1000" width="1000" scrolling="auto" frameborder="0"></iframe>
            		   <p></p>
    		</div>
          <!--</div> -->
    </div>
    </div>
    </div>
     
    <div id="footer">
    	<cfinclude template="footer.cfm">
    </div>
    </body>
    </html>
     
    BLOGGER BLOG CODE:
     
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
      <head>
        <b:include data='blog' name='all-head-content'/>
        <title><data:blog.pageTitle/></title>
        <b:skin><![CDATA[/*
    -----------------------------------------------
    Blogger Template Style
    Name:     Minima Black
    Designer: Douglas Bowman
    URL:      www.stopdesign.com
    Date:     26 Feb 2004
    Updated by: Blogger Team
    ----------------------------------------------- */
     
    /* Variable definitions
       ====================
       <Variable name="bgcolor" description="Page Background Color"
                 type="color" default="#000" value="#090b1d">
       <Variable name="textcolor" description="Text Color"
                 type="color" default="#ccc" value="#cccccc">
       <Variable name="linkcolor" description="Link Color"
                 type="color" default="#9ad" value="#99aadd">
       <Variable name="pagetitlecolor" description="Blog Title Color"
                 type="color" default="#ccc" value="#cccccc">
       <Variable name="descriptioncolor" description="Blog Description Color"
                 type="color" default="#777" value="#777777">
       <Variable name="titlecolor" description="Post Title Color"
                 type="color" default="#ad9" value="#aadd99">
       <Variable name="bordercolor" description="Border Color"
                 type="color" default="#333" value="#666666">
       <Variable name="sidebarcolor" description="Sidebar Title Color"
                 type="color" default="#777" value="#777777">
       <Variable name="sidebartextcolor" description="Sidebar Text Color"
                 type="color" default="#999" value="#999999">
       <Variable name="visitedlinkcolor" description="Visited Link Color"
                 type="color" default="#a7a" value="#aa77aa">
       <Variable name="bodyfont" description="Text Font"
                 type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 100% Trebuchet, Trebuchet MS, Arial, sans-serif">
       <Variable name="headerfont" description="Sidebar Title Font"
                 type="font"
                 default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 78% Trebuchet, Trebuchet MS, Arial, sans-serif">
       <Variable name="pagetitlefont" description="Blog Title Font"
                 type="font"
                 default="normal bold 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 290% Arial, sans-serif">
       <Variable name="descriptionfont" description="Blog Description Font"
                 type="font"
                 default="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal bold 86% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif">
       <Variable name="postfooterfont" description="Post Footer Font"
                 type="font"
                 default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
       <Variable name="startSide" description="Start side in blog language"
                 type="automatic" default="left" value="left">
       <Variable name="endSide" description="End side in blog language"
                 type="automatic" default="right" value="right">
    */
     
    /* Use this with templates/template-twocol.html */
     
    /* HIDE NAV BAR */
    #navbar {      
      height: 0px;      
      visibility: hidden;      
      display: none;}
    /* END HIDE NAV BAR */
     
    body {
      background:$bgcolor;
      margin:0;
      color:$textcolor;
      font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
      font-size/* */:/**/small;
      font-size: /**/small;
      text-align: center;
      }
    a:link {
      color:$linkcolor;
      text-decoration:none;
      }
    a:visited {
      color:$visitedlinkcolor;
      text-decoration:none;
      }
    a:hover {
      color:$titlecolor;
      text-decoration:underline;
    }
    a img {
      border-width:0;
      }
     
    /* Header
    -----------------------------------------------
     */
     
    #header-wrapper {
      width:660px;
      margin:0 auto 10px;
      border:1px solid $bordercolor;
      }
     
    #header-inner {
      background-position: center;
      margin-$startSide: auto;
      margin-$endSide: auto;
    }
     
    #header { 
      margin: 5px;
      border: 1px solid $bordercolor;
      text-align: left;
      color:$pagetitlecolor;
    }
     
    #header h1 {
      margin:5px 5px 0 300px;
      padding:15px 20px .25em;
      line-height:1.2em;
      text-transform:uppercase;
      letter-spacing:-.2em;
      font: $pagetitlefont;
    }
     
    #header a {
      color:$pagetitlecolor;
      text-decoration:none;
      }
     
    #header a:hover {
      color:$pagetitlecolor;
      }
     
    #header .description {
      margin:0 5px 5px 300px;
      padding:0 20px 15px;
      max-width:700px;
      text-transform:uppercase;
      letter-spacing:.2em;
      line-height: 1.4em;
      font: $descriptionfont;
      color: $descriptioncolor;
    }
     
    #header img {
      /*margin-$startSide: auto;*/
      /*margin-$endSide: auto;*/
    }
     
     
    /* Outer-Wrapper
    ----------------------------------------------- */
    #outer-wrapper {
      width: 660px;
      margin:0 auto;
      padding:10px;
      text-align:$startSide;
      font: $bodyfont;
      }
     
    #main-wrapper {
      width: 410px;
      float: $startSide;
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
      }
     
    #sidebar-wrapper {
      width: 220px;
      float: $endSide;
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
    }
     
     
    /* Headings
    ----------------------------------------------- */
     
    h2 {
      margin:1.5em 0 .75em;
      font:$headerfont;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.2em;
      color:$sidebarcolor;
    }
     
     
    /* Posts
    -----------------------------------------------
     */
    h2.date-header {
      margin:1.5em 0 .5em;
      }
     
    .post {
      margin:.5em 0 1.5em;
      border-bottom:1px dotted $bordercolor;
      padding-bottom:1.5em;
      }
    .post h3 {
      margin:.25em 0 0;
      padding:0 0 4px;
      font-size:140%;
      font-weight:normal;
      line-height:1.4em;
      color:$titlecolor;
    }
     
    .post h3 a, .post h3 a:visited, .post h3 strong {
      display:block;
      text-decoration:none;
      color:$titlecolor;
      font-weight:bold;
    }
     
    .post h3 strong, .post h3 a:hover {
      color:$textcolor;
    }
     
    .post-body {
      margin:0 0 .75em;
      line-height:1.6em;
    }
     
    .post-body blockquote {
      line-height:1.3em;  
    }
     
    .post-footer {
      margin: .75em 0;
      color:$sidebarcolor;
      text-transform:uppercase;
      letter-spacing:.1em;
      font: $postfooterfont;
      line-height: 1.4em;
    }
     
    .comment-link {
      margin-$startSide:.6em;
      }
    .post img {
      padding:4px;
      border:1px solid $bordercolor;
      }
    .post blockquote {
      margin:1em 20px;
      }
    .post blockquote p {
      margin:.75em 0;
      }
     
    /* Comments
    ----------------------------------------------- */
    #comments h4 {
      margin:1em 0;
      font-weight: bold;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.2em;
      color: $sidebarcolor;
      }
     
    #comments-block {
      margin:1em 0 1.5em;
      line-height:1.6em;
      }
    #comments-block .comment-author {
      margin:.5em 0;
      }
    #comments-block .comment-body {
      margin:.25em 0 0;
      }
    #comments-block .comment-footer {
      margin:-.25em 0 2em;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.1em;
      }
    #comments-block .comment-body p {
      margin:0 0 .75em;
      }
    .deleted-comment {
      font-style:italic;
      color:gray;
      }
     
    .feed-links {
      clear: both;
      line-height: 2.5em;
    }
     
    #blog-pager-newer-link {
      float: $startSide;
     }
     
    #blog-pager-older-link {
      float: $endSide;
     }
     
    #blog-pager {   
      text-align: center; 
     }
     
    /* Sidebar Content
    ----------------------------------------------- */
    .sidebar { 
      color: $sidebartextcolor;
      line-height: 1.5em;
     }
     
    .sidebar ul {
      list-style:none;
      margin:0 0 0;
      padding:0 0 0;
    }
    .sidebar li {
      margin:0;
      padding-top:0;
      padding-$endSide:0;
      padding-bottom:.25em;
      padding-$startSide:15px;
      text-indent:-15px;
      line-height:1.5em;
      }
     
    .sidebar .widget, .main .widget { 
      border-bottom:1px dotted $bordercolor;
      margin:0 0 1.5em;
      padding:0 0 1.5em;
     }
     
    .main .Blog { 
      border-bottom-width: 0;
    }
     
    /* Profile 
    ----------------------------------------------- */
    .profile-img { 
      float: $startSide;
      margin-top: 0;
      margin-$endSide: 5px;
      margin-bottom: 5px;
      margin-$startSide: 0;
      padding: 4px;
      border: 1px solid $bordercolor;
    }
     
    .profile-data {
      margin:0;
      text-transform:uppercase;
      letter-spacing:.1em;
      font: $postfooterfont;
      color: $sidebarcolor;
      font-weight: bold;
      line-height: 1.6em;
    }
     
    .profile-datablock { 
      margin:.5em 0 .5em;
    }
     
    .profile-textblock { 
      margin: 0.5em 0;
      line-height: 1.6em;
    }
     
    .profile-link { 
      font: $postfooterfont;
      text-transform: uppercase;
      letter-spacing: .1em;
    }
     
    /* Footer
    ----------------------------------------------- */
    #footer {
      width:660px;
      clear:both;
      margin:0 auto;
      padding-top:15px;
      line-height: 1.6em;
      text-transform:uppercase;
      letter-spacing:.1em;
      text-align: center;
    }
    ]]></b:skin>
      </head>
     
      <body>
      <div id='outer-wrapper'><div id='wrap2'>
     
        <!-- skip links for text browsers -->
        <span id='skiplinks' style='display:none;'>
          <a href='#main'>skip to main </a> |
          <a href='#sidebar'>skip to sidebar</a>
        </span>
     
        <div id='header-wrapper'>
          <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Alex Says... (Header)' type='Header'/>
    </b:section>
        </div>
     
        <div id='content-wrapper'>
     
          <div id='crosscol-wrapper' style='text-align:center'>
            <b:section class='crosscol' id='crosscol' showaddelement='no'/>
          </div>
     
          <div id='main-wrapper'>
            <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
          </div>
     
          <div id='sidebar-wrapper'>
            <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='Followers2' locked='false' title='Followers' type='Followers'/>
    <b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>
    <b:widget id='Profile2' locked='false' title='About Me' type='Profile'/>
    </b:section>
          </div>
     
          <!-- spacer for skins that want sidebar and main to be the same height-->
          <div class='clear'>&#160;</div>
     
        </div> <!-- end content-wrapper -->
     
        <div id='footer-wrapper'>
          <b:section class='footer' id='footer'/>
        </div>
     
      </div></div> <!-- end outer-wrapper -->
    </body>
    </html>
                                    
    1:
    2:
    3:
    4:
    5:
    6:
    7:
    8:
    9:
    10:
    11:
    12:
    13:
    14:
    15:
    16:
    17:
    18:
    19:
    20:
    21:
    22:
    23:
    24:
    25:
    26:
    27:
    28:
    29:
    30:
    31:
    32:
    33:
    34:
    35:
    36:
    37:
    38:
    39:
    40:
    41:
    42:
    43:
    44:
    45:
    46:
    47:
    48:
    49:
    50:
    51:
    52:
    53:
    54:
    55:
    56:
    57:
    58:
    59:
    60:
    61:
    62:
    63:
    64:
    65:
    66:
    67:
    68:
    69:
    70:
    71:
    72:
    73:
    74:
    75:
    76:
    77:
    78:
    79:
    80:
    81:
    82:
    83:
    84:
    85:
    86:
    87:
    88:
    89:
    90:
    91:
    92:
    93:
    94:
    95:
    96:
    97:
    98:
    99:
    100:
    101:
    102:
    103:
    104:
    105:
    106:
    107:
    108:
    109:
    110:
    111:
    112:
    113:
    114:
    115:
    116:
    117:
    118:
    119:
    120:
    121:
    122:
    123:
    124:
    125:
    126:
    127:
    128:
    129:
    130:
    131:
    132:
    133:
    134:
    135:
    136:
    137:
    138:
    139:
    140:
    141:
    142:
    143:
    144:
    145:
    146:
    147:
    148:
    149:
    150:
    151:
    152:
    153:
    154:
    155:
    156:
    157:
    158:
    159:
    160:
    161:
    162:
    163:
    164:
    165:
    166:
    167:
    168:
    169:
    170:
    171:
    172:
    173:
    174:
    175:
    176:
    177:
    178:
    179:
    180:
    181:
    182:
    183:
    184:
    185:
    186:
    187:
    188:
    189:
    190:
    191:
    192:
    193:
    194:
    195:
    196:
    197:
    198:
    199:
    200:
    201:
    202:
    203:
    204:
    205:
    206:
    207:
    208:
    209:
    210:
    211:
    212:
    213:
    214:
    215:
    216:
    217:
    218:
    219:
    220:
    221:
    222:
    223:
    224:
    225:
    226:
    227:
    228:
    229:
    230:
    231:
    232:
    233:
    234:
    235:
    236:
    237:
    238:
    239:
    240:
    241:
    242:
    243:
    244:
    245:
    246:
    247:
    248:
    249:
    250:
    251:
    252:
    253:
    254:
    255:
    256:
    257:
    258:
    259:
    260:
    261:
    262:
    263:
    264:
    265:
    266:
    267:
    268:
    269:
    270:
    271:
    272:
    273:
    274:
    275:
    276:
    277:
    278:
    279:
    280:
    281:
    282:
    283:
    284:
    285:
    286:
    287:
    288:
    289:
    290:
    291:
    292:
    293:
    294:
    295:
    296:
    297:
    298:
    299:
    300:
    301:
    302:
    303:
    304:
    305:
    306:
    307:
    308:
    309:
    310:
    311:
    312:
    313:
    314:
    315:
    316:
    317:
    318:
    319:
    320:
    321:
    322:
    323:
    324:
    325:
    326:
    327:
    328:
    329:
    330:
    331:
    332:
    333:
    334:
    335:
    336:
    337:
    338:
    339:
    340:
    341:
    342:
    343:
    344:
    345:
    346:
    347:
    348:
    349:
    350:
    351:
    352:
    353:
    354:
    355:
    356:
    357:
    358:
    359:
    360:
    361:
    362:
    363:
    364:
    365:
    366:
    367:
    368:
    369:
    370:
    371:
    372:
    373:
    374:
    375:
    376:
    377:
    378:
    379:
    380:
    381:
    382:
    383:
    384:
    385:
    386:
    387:
    388:
    389:
    390:
    391:
    392:
    393:
    394:
    395:
    396:
    397:
    398:
    399:
    400:
    401:
    402:
    403:
    404:
    405:
    406:
    407:
    408:
    409:
    410:
    411:
    412:
    413:
    414:
    415:
    416:
    417:
    418:
    419:
    420:
    421:
    422:
    423:
    424:
    425:
    426:
    427:
    428:
    429:
    430:
    431:
    432:
    433:
    434:
    435:
    436:
    437:
    438:
    439:
    440:
    441:
    442:
    443:
    444:
    445:
    446:
    447:
    448:
    449:
    450:
    451:
    452:
    453:
    454:
    455:
    456:
    457:
    458:
    459:
    460:
    461:
    462:
    463:
    464:
    465:
    

    Select allOpen in new window

     

    Verified Answer?

    The member who asked this question verified this comment provided the solution that solved their problem.

    by:Posted on 2009-01-15 at 06:29:05ID: 23383566

    > ... <iframe ... width="1000"
    is wrong syntax, as I already explained. needs to be width="1000px"

    This content is available to Experts Exchange members

    See the answer now
    with your Free 30 Day Trial

    Get unlimited access to solutions & experts

    • 4,169,477 solved questions
    • 3,805 articles & videos
    • 15,413 tech experts

    Get Access Now

    Ask Your Tech Question. Get Expert Solutions.We will email you when an expert has commented on your question.

    We will never share this with anyone. Privacy Policy Terms of Use

    Select topics

    You may select up to five topics.

    Top Expert Contributor

    Essential articles and videos from the Experts

    More valuable questions with Expert answers

    201508-LO-Qu-072

    EXPERT WHO ANSWERED

    ahoffmann

    ahoffmann has answered 5,019 questions on Experts Exchange and is an expert in Programming Languages, Apache Web Server and Scripting Languages.

    RELATED TOPICS view all topics

    1. Visual Basic Classic
      (162,175)
    2. Programming
      (50,778)
    3. Java
      (97,555)
    4. Scripting Languages
      (25,478)
    5. .NET Programming
      (129,753)
    6. C#
      (89,515)
    7. C++
      (56,573)
    8. VB Script
      (34,897)
    9. Visual Basic.NET
      (90,514)
    10. Windows XP
      (118,016)