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

    Good Question?
    0
     

    ?

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

    Accepted Solution on 2009-01-15 at 06:29:05ID: 23383566

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

    Top Expert Contributor

    Essential articles and videos from the Experts

    More valuable questions with Expert answers

    201511-LO-Qu-074

    Extend your technology team with the Experts Exchange community.

    — trusted by —

    Who answers my questions?Our community has technology experts around the world.

    BillBach

    1,012

    Solutions

    Expert in:

    • Databases-Other
    • Internet Protocols
    • MS Access
    • MS SQL Server
    • Networking Protocols

    Marco Gasi

    5

    Articles

    1,064

    Solutions

    Expert in:

    • PHP
    • CSS
    • HTML
    • JavaScript
    • MySQL Server

    Loganathan Natarajan

    3

    Articles

    2,334

    Solutions

    Expert in:

    • PHP
    • JavaScript
    • Web Applications
    • Web Development-Other
    • HTML

    Ray Paseur

    47

    Articles

    13,952

    Solutions

    Expert in:

    • PHP
    • MySQL Server
    • Web Development-Other
    • HTML
    • JavaScript

    Scott Fell

    1

    Articles

    3,584

    Solutions

    Expert in:

    • ASP
    • HTML
    • Web Development-Other
    • CSS
    • JavaScript

    Eirman

    1

    Articles

    1,012

    Solutions

    Expert in:

    • Android
    • Hardware-Other
    • MS Access
    • MS Excel
    • MS Office

    Matthew Richardson

    4

    Articles

    6

    Solutions

    Amitkumar Panchal

    460

    Solutions

    Expert in:

    • Java
    • Java EE
    • JSP
    • Oracle Database

    slobaray

    33

    Articles

    189

    Solutions

    Expert in:

    • Oracle Database
    • Databases-Other
    • Python

    RELATED TOPICS view all topics

    1. Visual Basic Classic
      (162,830)
    2. Programming-Other
      (51,631)
    3. Java
      (98,168)
    4. Scripting Languages
      (25,845)
    5. .NET Programming
      (131,146)
    6. C#
      (90,430)
    7. C++
      (56,719)
    8. VB Script
      (35,499)
    9. Visual Basic.NET
      (91,458)
    10. Windows XP
      (118,086)