Solved

Dynamically resize Iframe Height of External Blog

Posted on 2009-01-13
6,098 Views
Last Modified: 2012-05-06
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

0
Question by:lexner
    5 Comments
     
    LVL 51

    Expert Comment

    by:ahoffmann
    your iframe tag uses a fixed size (height, width attribute), use this attributes like:

      < iframe src="...." width="99%" height="99%" ...>

    BTW, the value for those attributes must contain a measure like px or % (which is missing in your example)
    0
     

    Author Comment

    by:lexner
    You are correct, the iframe cannot have a height assigned (this is in place for client viewing). I have removed it and the iframe window shrinks down to @200px high. The source doc height was clearly not being read and I tried many solutions available on the internet.
    0
     
    LVL 51

    Expert Comment

    by:ahoffmann
    iframe can have a height attribute for sure, it just need to have a valid value like 1000px or 99%
    0
     

    Author Comment

    by:lexner
    Neither of those--a pixel value, nor a %--work as I need to detect and dynamically resize the iframe window height according to the content, which is an external document.

    I have attached the changed code (removed the height attribute) and if you go to the page http://www.alexchingas.com/blog-container.cfm you will see what i mean. The window has shrunk to be a few hundred pixels high and the source doc is much longer.

    How do I get this to work?


    <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="center"><!-- BLOG -->
    
            		   <iframe id="idTopFrame" src="http://www.alexchingas.blogspot.com" width="1000" scrolling="auto" frameborder="0"></iframe>
    
            		   <p></p>
    
    		</div>
    
    </div>
    
    </div>
    
    </div>
     
    
    <div id="footer">
     
    
    	<cfinclude template="footer.cfm">
     
    
    </div>
     
     
    
    </body>
    

    Open in new window

    0
     
    LVL 51

    Accepted Solution

    by:
    > ...
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT Security CISA, CISSP & CISM Certification

    Master the advanced techniques required to protect network resources from external threats with the IT Cyber Security bundle. Built around industry best-practice guidelines, the IT Cyber Security bundle consists of three in-depth courses.

    Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
    Whether you’re a college noob or a soon-to-be pro, these tips are sure to help you in your journey to becoming a programming ninja and stand out from the crowd.
    The viewer will be introduced to the technique of using vectors in C++. The video will cover how to define a vector, store values in the vector and retrieve data from the values stored in the vector.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    884 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now