Question

Dynamically resize Iframe Height of External Blog

Asked by: lexner

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

This question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

  • Plus...
  • 30 Day FREE access, no risk, no obligation
  • Collaborate with the world's top tech experts
  • Unlimited access to our exclusive solution database
  • Never be left without tech help again

Subscribe Now

Sign Up Now!
Asked On
2009-01-13 at 13:48:27ID: 24049241
Tags

iframe auto height cross domain

Topics

Programming Languages

,

JavaScript

,

Miscellaneous Web Development

Participating Experts
1
Points
250
Comments
7

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

Companies like CVS, Honeywell, Chevron, Toyoto, TriStar Pictures, the U.S. Army, and Accenture

Stay Ahead of the Competition

Advance your career with Experts Exchange. Plug into technology resources for professional development, including solutions, peer-reviewed articles, tutorials, and live training sessions.

Related Solutions

  1. iFrames Virus
    Some how on 2/4/07, at 1:00 am or so all the webpage files(.htm,.htm,.php,.asp, etc) on our server were edited and the following script was added at the end of the files: <iframe src=http://www.goldunix.com/xiao2/index.htm widht...
  2. Blogging Products
    Im looking to purchase a blogging product. I thought about writing my own but with the amount of time spent on it Im sure I could pick up one allot cheaper. Im after a product that can plug in to an existing website. Its using ...
Check out some of our great resources!

Featured Articles

Learn from the Best

Our expert teachers are leaders and respected professionals in their tech field and include over 300 Microsoft MVPs. The best part is they're passionate about sharing their expertise with you!

lrmoore has answered 13,534 questions on Experts Exchange since July 2000 and has more than 18 years experience in the networking industry. The six-time Microsoft MVP's specialties include firewalls, virtual private networking, and network management.

angeliii has answered 40,724 questions on Experts Exchange since March 2000. He is a Microsoft Most Valuable Professional for his work with MS SQL Server & Development. He has also proven his knowledge of Visual Basic Programming, PHP Scripting and Oracle Databases.

Leew has answered 19,673 questions on Experts Exchange since August 1997. He began working with computers in 1989 with a Turbo running DOS 3.3. Since then he has mastered Windows 2000 and XP operating systems, hard drives/storage and Small Business Server.

Meet a few of our expert instructors

Learn Any Technology

We’ve got experts and training resources for hundreds of technology topics. Whatever you need to learn, Experts Exchange has got you covered.

See all topics That's a lot of topics!

Get Help Anywhere

No matter where you find yourself in need of tech help, Experts Exchange is available for you with mobile site access from your smart phone or tablet.

Available from your iPad, iPhone, and many other mobile devices!

Get full access to the help you need.

Subscribe Now

30-day free trial. Register in 60 seconds.

The Latest Technology News and Tips

New Solutions Everyday

Because of our active community of experts, on average new questions receive their first comment in under 30 minutes.

Top Prog Languages Questions

       

Hear What our Users are Saying

Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.

Try it out and discover for yourself.

Subscribe Now

30-day free trial. Register in 60 seconds.

20130405-EE-VQP-041

3 Ways to Join

30-Day Free Trial

What you can do at Experts Exchange:

  • Reach your professional goals
  • Advance your tech skills
  • Learn from expert instructors
  • Get help anywhere, anytime
  • Learn from hundreds of topics

What users are saying

  • I am very new to Crystal Reports and SQL Server databases, but -- with the help of Experts Exchange -- I have been able to meet my deadlines and produce effective products.

    Jan Miller

  • I love EE and have been a member since 2004. I just today started my third contract assignment which I attribute to the skills I am learning from other experts.

    Robert Antonellis

  • It's my sole resource as I'm kind of an MS Access loner at my company. It's like having colleagues available when I run out of my own steam.

    Karen Ruskin