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>
    

    Open in new window

    Good Question?
    0

    Featured Post

    Course: AWS Professional Certification

    These classes are designed to help you pass the AWS Certified Solutions Architect – Associate, AWS Certified Developer, and AWS Certified SysOps Administrator Associate exams—all essential to a career as an AWS professional.

    Top Expert Contributor

    Essential articles and videos from the Experts

    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    Windows Script Host (WSH) has been part of Windows since Windows NT4. Windows Script Host provides architecture for building dynamic scripts that consist of a core object model, scripting hosts, and scripting engines. The key components of Window…
    The goal of the video will be to teach the user the difference and consequence of passing data by value vs passing data by reference in C++. An example of passing data by value as well as an example of passing data by reference will be be given. Bot…
    The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

    More valuable questions with Expert answers

    Question: Here's the code: txn.truncateddescription = (txn.description.length <= 40 ? txn.description : txn.description.substring(0,37) + '...'); Here's the error: Uncaught TypeError: Cannot read property 'length' of null When I look in the...

    Answer: It sounds as if txn does not have a description key or txn.description is null. And if txn is a jQuery object, length has a different function. What happens if you echo txn.description?

    Question: I wrote a simple URL Rewrite rule for the IIS URL Rewrite component. It is working, but there is also a weird infinite loop thing going on when I load the page. We don't have a certificate on this domain, so to load the URL you have to add an...

    Answer: It's not the rewrite rule. The page itself isn't refreshing, the ajax calls inside it are. Go to line 175 on your main.js file: $('#cart').load('_cart.asp'); By calling "_cart.asp", it assumed to be a relative url, so it's actually...

    Question: How can you find the technology that was used to build a website? I know isitwp.com - tells you if it's WordPress and Wix and Weebly usually identify themselves early in the source. But how about sites like www.pingdom.com or www.gotoassist.com? ...

    Answer: i use wappalyser addon with w3tech extensions , this will give you every detail you need : https://wappalyzer.com/ https://w3techs.com/sites

    Question: I have a client that is paid a fee for each referral that is submitted to a third party service provider. Currently the user clicks a link on my client's site, which sends them to an external url where they must submit a form on that third party...

    Answer: This is not easy to get right, but DoubleClick has got it covered. Consider replicating the entire 3rd-party sign up mechanism on your own site. When the client submits the form, it goes to your server, not to the 3rd-party. Your server, in...

    201601-LO-Qu-076

    Extend your technology team with the Experts Exchange community.

    — trusted by —

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

    zzynx

    3,065

    Solutions

    Expert in:

    • Java
    • Apache Flex
    • Adobe Flash
    • Editors IDEs
    • Miscellaneous

    Amitkumar Panchal

    516

    Solutions

    Expert in:

    • Java
    • Java EE
    • JSP
    • Oracle Database

    AndyAinscow

    11

    Articles

    3,248

    Solutions

    Expert in:

    • .NET Programming
    • C#
    • System Programming
    • Visual C++.NET
    • ASP.NET

    dpearson

    918

    Solutions

    Expert in:

    • Java
    • Java EE
    • JSP
    • Programming-Other
    • Game Programming

    dravidnsr

    719

    Solutions

    Expert in:

    • Java EE
    • JSP
    • Java

    d-glitch

    1,267

    Solutions

    Expert in:

    • Math / Science
    • Algorithms
    • Miscellaneous
    • Components
    • Hardware-Other

    uday kiran reddy

    2

    Articles

    1

    Solutions

    Matthew Richardson

    4

    Articles

    6

    Solutions

    Windows_System_Admin

    1

    Articles

    RELATED TOPICS view all topics

    1. Visual Basic Classic
      (163,326)
    2. Programming-Other
      (51,584)
    3. Java
      (98,156)
    4. Scripting Languages
      (26,208)
    5. .NET Programming
      (130,878)
    6. C#
      (90,578)
    7. C++
      (56,809)
    8. VB Script
      (35,970)
    9. Visual Basic.NET
      (91,310)
    10. Windows XP
      (118,170)