Any idea why the iFrame resize code would stop working when I copy the code over to another page? It works fine here: www.rjt-online.com/photos.php. But when I copy the code over to another page (www.rjt-online.com/video.php) in it's entirity, and just change the urls, it stops working?
hindu times 0 Junior Poster
fxm 23 Posting Pro
Actually, the resize logic is working - but it is resizing to the wrong value(s).
The problem is that the <iframe> is loaded with two <embed>s, each having a height of 505.
The total height of the <iframe> should thus be (roughly) 1010, but the height reported to the resize logic is only 505 [the size of a single <embed>].
This suggests that the markup of the container of the <embed>s is so screwed up that the height of the page is miscalculated - even though the rendering engine makes a reasonable layout from the mess.
I may have time on Tue or Wed to look into this.
fxm 23 Posting Pro
I may have time on Tue or Wed to look into this.
This complete replacement for video_latest.php
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org" />
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii" />
<title>
RJ Thompson - Latest Videos
</title>
<link href="css/rjt_new.css" rel="stylesheet" type=
"text/css" /><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
div#signup {padding: -2px 0px 0px 0px;}
</style>
<![endif]-->
</head>
<body style="background-color:#FFF">
<table>
<tr>
<td>
<table width="640px" bgcolor="#FFFFFF">
<tr>
<th width="640px">
<object width="640" height="505">
<param name="movie" value=
"http://www.youtube.com/v/EkHTsc9PU2A&hl=en_GB&fs=1&" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src=
"http://www.youtube.com/v/EkHTsc9PU2A&hl=en_GB&fs=1&"
type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="640" height="505" />
</object>
</th>
</tr>
</table>
</td>
<td>
<table style="border:thin #000 dotted;" width="280px"
cellspacing="1px" align="center">
<tr>
<th width="10px" height="15px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr style="text-align:left; font-size:17px">
<th width="10px"></th>
<th align="left">
<p>
<span class="storemenulinks">VIDEO DETAILS
//</span>
</p>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="15px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr style="text-align:left;">
<th width="10px"></th>
<th align="left">
<p>
<span class="instructiontext">TITLE:</span>
</p>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="5px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px"></th>
<th width="260px" align="left">
<span class="instructiontext" color="#333333">"A
Better Life (Music Video)"</span>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="15px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr style="text-align:left;">
<th width="10px"></th>
<th align="left">
<p>
<span class="instructiontext">DESCRIPTION:</span>
</p>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="5px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px"></th>
<th width="260px" align="left">
<span class="instructiontext" color="#333333">The
music video to new single "A Better Life", filmed
and directed by Luke McIlveen and Ed
Brendes.</span>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="15px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr style="text-align:left;">
<th width="10px"></th>
<th align="left">
<p>
<span class="instructiontext">UPLOAD DATE:</span>
</p>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="5px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px"></th>
<th width="260px" align="left">
<span class="instructiontext" color=
"#333333">Insert date here</span>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="15px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr style="text-align:left;">
<th width="10px"></th>
<th align="left">
<p>
<span class="instructiontext">SHARE VIDEO
ON:</span>
</p>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="5px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px"></th>
<th width="260px" align="left">
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook" addthis:url=
"http://example.com"></a> <a class=
"addthis_button_myspace" addthis:url=
"http://example.com"></a> <a class=
"addthis_button_twitter" addthis:url=
"http://example.com"></a> <a class=
"addthis_button_googlebuzz" addthis:url=
"http://example.com"></a> <a class=
"addthis_button_email" addthis:url=
"http://example.com"></a> <a href=
"http://www.addthis.com/bookmark.php?v=250&username=rjthompson"
class="addthis_button_expanded">More</a>
<a class="addthis_button_facebook_like"
addthis:url="http://example.com"></a>
<script type="text/javascript" src=
"http://s7.addthis.com/js/250/addthis_widget.js#username=rjthompson">
</script>
</div>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="15px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
</table>
</td>
</tr><!--gap between videos-->
<tr>
<td>
<table width="100%" bgcolor="#FFFFFF">
<tr>
<th height="20px"></th>
</tr>
</table>
</td>
</tr>
<tr>
<!--end gap between videos-->
</tr>
<tr>
<td>
<table width="640px" bgcolor="#FFFFFF">
<tr>
<th width="640px">
<object width="640" height="505">
<param name="movie" value=
"http://www.youtube.com/v/EkHTsc9PU2A&hl=en_GB&fs=1&" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src=
"http://www.youtube.com/v/EkHTsc9PU2A&hl=en_GB&fs=1&"
type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="640" height="505" />
</object>
</th>
</tr>
</table>
</td>
<td>
<table style="border:thin #000 dotted;" width="280px"
cellspacing="1px" align="center">
<tr>
<th width="10px" height="15px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr style="text-align:left; font-size:17px">
<th width="10px"></th>
<th align="left">
<p>
<span class="storemenulinks">VIDEO DETAILS
//</span>
</p>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="15px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr style="text-align:left;">
<th width="10px"></th>
<th align="left">
<p>
<span class="instructiontext">TITLE:</span>
</p>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="5px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px"></th>
<th width="260px" align="left">
<span class="instructiontext" color="#333333">"A
Better Life (Music Video)"</span>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="15px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr style="text-align:left;">
<th width="10px"></th>
<th align="left">
<p>
<span class="instructiontext">DESCRIPTION:</span>
</p>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="5px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px"></th>
<th width="260px" align="left">
<span class="instructiontext" color="#333333">The
music video to new single "A Better Life", filmed
and directed by Luke McIlveen and Ed
Brendes.</span>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="15px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr style="text-align:left;">
<th width="10px"></th>
<th align="left">
<p>
<span class="instructiontext">UPLOAD DATE:</span>
</p>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="5px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px"></th>
<th width="260px" align="left">
<span class="instructiontext" color=
"#333333">Insert date here</span>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="15px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr style="text-align:left;">
<th width="10px"></th>
<th align="left">
<p>
<span class="instructiontext">SHARE VIDEO
ON:</span>
</p>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="5px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px"></th>
<th width="260px" align="left">
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook" addthis:url=
"http://example.com"></a> <a class=
"addthis_button_myspace" addthis:url=
"http://example.com"></a> <a class=
"addthis_button_twitter" addthis:url=
"http://example.com"></a> <a class=
"addthis_button_googlebuzz" addthis:url=
"http://example.com"></a> <a class=
"addthis_button_email" addthis:url=
"http://example.com"></a> <a href=
"http://www.addthis.com/bookmark.php?v=250&username=rjthompson"
class="addthis_button_expanded">More</a>
<a class="addthis_button_facebook_like"
addthis:url="http://example.com"></a>
<script type="text/javascript" src=
"http://s7.addthis.com/js/250/addthis_widget.js#username=rjthompson">
</script>
</div>
</th>
<th width="10px"></th>
</tr>
<tr>
<th width="10px" height="15px"></th>
<th width="260px"></th>
<th width="10px"></th>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>should cure the resize problem. Assuming that it does, the other video pages must be restructured in the same way.
Note: any CSS or alignment broken by my quick-and-dirty fix should be repairable.
Also: the markup you have used to embed the <object>s is probably not compatible with 'all' browsers.
hindu times 0 Junior Poster
Righteo, I've restructed using that code, but the resize still doesn't work.
Plus there are a few minor issues to be worked out to do with the layout.
fxm 23 Posting Pro
resize still doesn't work.
This version of video_latest.php
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org" />
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii" />
<title>
RJ Thompson - Latest Videos
</title>
<link href="css/rjt_new.css" rel="stylesheet" type=
"text/css" /><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
div#signup {padding: -2px 0px 0px 0px;}
</style>
<![endif]-->
</head>
<body style="background-color:#FFF">
<table>
<tr>
<td>
<table width="640px" bgcolor="#FFFFFF">
<tr>
<td height="505px" width="640px">
<object>
<param name="movie" value=
"http://www.youtube.com/v/EkHTsc9PU2A&hl=en_GB&fs=1&" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src=
"http://www.youtube.com/v/EkHTsc9PU2A&hl=en_GB&fs=1&"
type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="640" height="505" />
</object>
</td>
</tr>
</table>
</td>
<td>
<table style="border:thin #000 dotted;" width="280px"
cellspacing="1px" align="center">
<tr>
<td width="10px" height="15px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr style="text-align:left; font-size:17px">
<td width="10px"></td>
<td align="left">
<p>
<span class="storemenulinks">VIDEO DETAILS
//</span>
</p>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="15px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr style="text-align:left;">
<td width="10px"></td>
<td align="left">
<p>
<span class="instructiontext">TITLE:</span>
</p>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="5px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px"></td>
<td width="260px" align="left">
<span class="instructiontext" color="#333333">"A
Better Life (Music Video)"</span>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="15px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr style="text-align:left;">
<td width="10px"></td>
<td align="left">
<p>
<span class="instructiontext">DESCRIPTION:</span>
</p>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="5px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px"></td>
<td width="260px" align="left">
<span class="instructiontext" color="#333333">The
music video to new single "A Better Life", filmed
and directed by Luke McIlveen and Ed
Brendes.</span>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="15px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr style="text-align:left;">
<td width="10px"></td>
<td align="left">
<p>
<span class="instructiontext">UPLOAD DATE:</span>
</p>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="5px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px"></td>
<td width="260px" align="left">
<span class="instructiontext" color=
"#333333">Insert date here</span>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="15px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr style="text-align:left;">
<td width="10px"></td>
<td align="left">
<p>
<span class="instructiontext">SHARE VIDEO
ON:</span>
</p>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="5px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px"></td>
<td width="260px" align="left">
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook" addthis:url=
"http://example.com"></a> <a class=
"addthis_button_myspace" addthis:url=
"http://example.com"></a> <a class=
"addthis_button_twitter" addthis:url=
"http://example.com"></a> <a class=
"addthis_button_googlebuzz" addthis:url=
"http://example.com"></a> <a class=
"addthis_button_email" addthis:url=
"http://example.com"></a> <a href=
"http://www.addthis.com/bookmark.php?v=250&username=rjthompson"
class="addthis_button_expanded">More</a>
<a class="addthis_button_facebook_like"
addthis:url="http://example.com"></a>
<script type="text/javascript" src=
"http://s7.addthis.com/js/250/addthis_widget.js#username=rjthompson">
</script>
</div>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="15px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
</table>
</td>
</tr><!--gap between videos-->
<tr>
<td>
<table width="100%" bgcolor="#FFFFFF">
<tr>
<td height="20px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<!--end gap between videos-->
</tr>
<tr>
<td>
<table width="640px" bgcolor="#FFFFFF">
<tr>
<td height="505px" width="640px">
<object>
<param name="movie" value=
"http://www.youtube.com/v/EkHTsc9PU2A&hl=en_GB&fs=1&" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src=
"http://www.youtube.com/v/EkHTsc9PU2A&hl=en_GB&fs=1&"
type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="640" height="505" />
</object>
</td>
</tr>
</table>
</td>
<td>
<table style="border:thin #000 dotted;" width="280px"
cellspacing="1px" align="center">
<tr>
<td width="10px" height="15px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr style="text-align:left; font-size:17px">
<td width="10px"></td>
<td align="left">
<p>
<span class="storemenulinks">VIDEO DETAILS
//</span>
</p>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="15px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr style="text-align:left;">
<td width="10px"></td>
<td align="left">
<p>
<span class="instructiontext">TITLE:</span>
</p>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="5px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px"></td>
<td width="260px" align="left">
<span class="instructiontext" color="#333333">"A
Better Life (Music Video)"</span>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="15px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr style="text-align:left;">
<td width="10px"></td>
<td align="left">
<p>
<span class="instructiontext">DESCRIPTION:</span>
</p>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="5px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px"></td>
<td width="260px" align="left">
<span class="instructiontext" color="#333333">The
music video to new single "A Better Life", filmed
and directed by Luke McIlveen and Ed
Brendes.</span>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="15px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr style="text-align:left;">
<td width="10px"></td>
<td align="left">
<p>
<span class="instructiontext">UPLOAD DATE:</span>
</p>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="5px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px"></td>
<td width="260px" align="left">
<span class="instructiontext" color=
"#333333">Insert date here</span>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="15px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr style="text-align:left;">
<td width="10px"></td>
<td align="left">
<p>
<span class="instructiontext">SHARE VIDEO
ON:</span>
</p>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="5px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px"></td>
<td width="260px" align="left">
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook" addthis:url=
"http://example.com"></a> <a class=
"addthis_button_myspace" addthis:url=
"http://example.com"></a> <a class=
"addthis_button_twitter" addthis:url=
"http://example.com"></a> <a class=
"addthis_button_googlebuzz" addthis:url=
"http://example.com"></a> <a class=
"addthis_button_email" addthis:url=
"http://example.com"></a> <a href=
"http://www.addthis.com/bookmark.php?v=250&username=rjthompson"
class="addthis_button_expanded">More</a>
<a class="addthis_button_facebook_like"
addthis:url="http://example.com"></a>
<script type="text/javascript" src=
"http://s7.addthis.com/js/250/addthis_widget.js#username=rjthompson">
</script>
</div>
</td>
<td width="10px"></td>
</tr>
<tr>
<td width="10px" height="15px"></td>
<td width="260px"></td>
<td width="10px"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>cleans up some more problems.
If it still doesn't work please contact me by email.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.