Solved

Dynamically resize Iframe Height of External Blog

Posted on 2009-01-13
7
6,117 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
Comment
Question by:lexner
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
7 Comments
 
LVL 51

Expert Comment

by:ahoffmann
ID: 23381116
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
ID: 23382146
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
ID: 23382521
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
ID: 23382900
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:
ahoffmann earned 250 total points
ID: 23383566
> ...
0

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to confirm and grey the submit button using JavaScript ? 14 71
Presenting my portfolio on the web? 11 53
Slow Down an Animation 3 29
Drag & Drop Error 5 33
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

710 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