HTML Help

sdo · Joined: 21 Sep 2008 Posts: 4

Hey All,

This one is killing me.

Check out the issue www.scoopsquad.ca/index1.html. Use the flash navigation at the top to navigate to "Sign Up".

All is well, and the iframe loads the signup content and dynamically resizes the iframe.

Now, reload the page, and notice first that the iframe resizes itself erroneously. THEN, navigate back to the home page, and, finally, use the ad UNDER the navigation header to "sign up now". This links to the sign up page, JUST like the nav menu, and yet, the iframe is NOT sized. what.. the.. FUDGSICLE!?

Here is the code for the surrounding page:

Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link href="style.css" rel="stylesheet" type="text/css">
<link href="layout.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
function calcHeight() {
//find the height of the internal page
var the_height= document.getElementById('mainFrame').contentWindow.document.body.scrollHeight;
//change the height of the iframe
document.getElementById('mainFrame').height= the_height; }
</script>

<title>Scoop Squad Pet Waste Removal</title>
</head>

<body id="page1">
<a name="top" id="top"></a>

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center">
<tr>
<td width="10" class="left"></td>

<td width="9" bgcolor="#E3CFAA">
<div class="site_center">
<div id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24"
width="900" height="407">
<param name="movie" value="flash/header2_v8_squad style linked.swf?button=1">
<param name="quality" value="high">
<param name="menu" value="false">

<object data="flash/header2_v8_squad%20style%20linked.swf?button=1" width="900"
height="407" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="pluginurl" value=
"http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">
FAIL (the browser should render some flash content, not this).
</object> 
</object>
</div>

<table width="100%" bgcolor="#E3CFAA">
<tr bgcolor="#E3CFAA">
<td width="100%" height="100%" valign="middle" align="center" bgcolor="#E3CFAA">
<iframe id="mainFrame" name="mainFrame" onLoad="calcHeight();" src="homepagecontent.html" width="878"
frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe></td>
</tr>
</table>
</div>
</td>

<td width="10" class="right"></td>
</tr>

<tr>
<td width="10" height="10" class="bottomleft"></td>

<td height="10" class="bottom"></td>

<td width="10" height="10" class="bottomright"></td>
</tr>

<tr>
<td></td>

<td>
<center>
<br>
<br>

<p class="foot"><a href="http://www.scoopsquad.ca/">Home Page</a> | <a href=
"http://www.scoopsquad.ca/services.html">Services</a> | <a href=
"http://www.scoopsquad.ca/signup.html">Sign up</a> | <a href=
"http://www.scoopsquad.ca/faq.html">F.A.Q.</a> | <a href=
"http://www.scoopsquad.ca/news.html">News</a> | <a href=
"http://www.scoopsquad.ca/employment.html">Employment</a> | <a href=
"http://www.scoopsquad.ca/about.html">About Us</a> | <a href=
"http://www.scoopsquad.ca/signup.html">Contacts</a><br>
<strong>© 2008</strong> <a href="http://www.scoopsquad.ca/">Scoop Squad</a> Pet
Waste Removal<br>
All rights reserved.<br>
<br></p>

<p><a href="http://validator.w3.org/check?uri=referer"><img src=
"http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31"
width="88"></a> <a href="http://jigsaw.w3.org/css-validator/"><img style=
"border:0;width:88px;height:31px" src=
"http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!"></a>
      </p><br>
<a href="#top">Top</a><br>
<br>
</center>
</td>

<td></td>
</tr>
</table>
</div>
</body>
</html>

Here is the code for *inside* the iframe:

Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang = "en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en-US">
<meta name="keywords"
content="Waste Removal, Waste, Pet, Dog, Waste management, signup, sign, up, subscribe, subscription">
<meta name="generator"
content="Hand-typed in Wordpad">
<meta name="description"
content="Sign Up form for Scoop Squad Pet Waste Removal">


<link href="style.css" rel="stylesheet" type="text/css">
<link href="layout.css" rel="stylesheet" type="text/css">


<title>Sign Up!</title>

<script type="text/javascript">


</script>

</head>

<body class="bg" onLoad="parent.calcHeight();">

<div class="spacer_25"></div>

<div class="line_x_2"></div>

<img src="images/title_servicedetails.jpg" alt="Service Details">

<form id="mainForm" action="https://www.paypal.com/cgi-bin/webscr" method="post"
onsubmit="this.target='paypal';
return ReadForm (this, true);">
<p>
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="ShaunOlafsonatgmail.com">
<input type="hidden" name="item_name" value="">
<input type="hidden" name="item_number" value="">
<input type="hidden" name="currency_code" value="CAD">
<input type="hidden" name="lc" value="CA">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="no_shipping" value="0">

<input type="hidden" name="basedes" value="Residential Pet Waste Management">

<div class="form_text">

At <strong> Scoop Squad </strong>, pricing is based on two things. The number of dogs you own,
and the number of days you would like us to come every week. Be sure to choose an option that suits you and your life best.

</div>

<div><table class="form">
<tr valign="middle">
<td class="form">
</td>

<td class="form" align="center">
1 Dog
</td>
<td class="form" align="center">
2 Dogs
</td>
<td class="form" align="center">
3+ Dogs
</td>
</tr>

<tr class="dark" valign="middle">
<td class="form" align="center">
<font color="#E3CFAA">Once a Week</font>
</td>
<td class="form" align="center">
<input onclick="ReadForm (this.form, false);" type="radio" value="w,1,9.99,1,1" name="rad">
</td>
<td class="form" align="center">
<input onclick="ReadForm (this.form, false);" type=radio value="w,1,14.99,1,1" name=rad>
</td>
<td class="form" align="center">
<input onclick="ReadForm (this.form, false);" type=radio value="w,1,19.99,1,1" name=rad>
</td>
</tr>

<tr valign="middle">
<td class="form" align="center">
Twice a Week
</td >
<td class="form" align="center">
<input onclick="ReadForm (this.form, false);" type=radio value="w,1,17.99,1,1" name=rad>
</td>
<td align="center" class="form">
<input onclick="ReadForm (this.form, false);" type=radio value="w,1,22.99,1,1" name=rad>
</td>
<td align="center" class="form">
<input onclick="ReadForm (this.form, false);" type=radio value="w,1,27.99,1,1" name=rad>
</td>
</tr>

<tr class="dark" valign="middle">
<td class="form" align="center">
<font color="#E3CFAA">Three Times a Week</font>
</td>
<td align="center" class="form">
<input onclick="ReadForm (this.form, false);" type=radio value="w,1,24.99,1,1" name=rad>
</td>
<td align="center">
<input onclick="ReadForm (this.form, false);" type=radio value="w,1,29.99,1,1" name=rad>
</td>
<td align="center" class="form">
<input onclick="ReadForm (this.form, false);" type=radio value="w,1,34.99,1,1" name=rad>
</td>
</tr>

<tr valign="middle">
<td class="form" align="center">
Four Times a Week
</td>
<td align="center" class="form">
<input onclick="ReadForm (this.form, false);" type=radio value="w,1,32.99,1,1" name=rad>
</td>
<td align="center" class="form">
<input onclick="ReadForm (this.form, false);" type=radio value="w,1,37.99,1,1" name=rad>
</td>
<td align="center" class="form">
<input onclick="ReadForm (this.form, false);" type=radio value="w,1,42.99,1,1" name=rad>
</td>
</tr>

<tr class="dark" valign="middle">
<td class="form" align="center">
<font color="#E3CFAA">Five Times a Week</font>
</td>
<td align="center" class="form">
<input onclick="ReadForm (this.form, false);" type=radio value="w,1,41.99,1,1" name=rad>
</td>
<td align="center" class="form">
<input onclick="ReadForm (this.form, false);" type=radio value="w,1,46.99,1,1" name=rad>
</td>
<td align="center" class="form">
<input onclick="ReadForm (this.form, false);" type=radio value="w,1,0.99,1,1" name=rad>
</td>
</tr>
</table>
</div>

<br><br>

<div class="form_price" id="pricediv"><strong>Price: </strong>select a package to see the price. <a href="scripts_not_working.html" target="_blank"><font size="1pt">not working?</font></a></div>


<br><br>

<img src="images/icon_attention.jpg" alt="Attention!"> <div class="form_text">Note: During the PayPal signup process, you will be prompted for a shipping address. Be sure
to fill this in as it will be the address which receives service! Also, PayPal will allow you to leave us a 'note' when you sign up. Please let us know any
important details, like how to access your yard, what day(s) you prefer we come, or if your dog is unfriendly to strangers.</div>

<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif"name="submit" alt="Sign Up now!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">

<input type="hidden" name="a3" value="">
<input type="hidden" name="p3" value="">
<input type="hidden" name="t3" value="">
<input type="hidden" name="src" value="">
<input type="hidden" name="sra" value="">

<br>

</form>

<div class="spacer_25"></div>

</body>
</html>

ANY input is greatly appreciated.

-SDO

sdo · Joined: 21 Sep 2008 Posts: 4

For anyone who reads this post with similar issues, the problem turned out to be that my second flash link was using:

getURL("http://www.scoopsquad.ca/signup.html","mainFrame");

When it should have been using:

getURL("signup.html","mainFrame");

Anybody with iframe experience probably knows that trying to link to outside URLs brings in a world of hurt, this is probably related to what caused the weird JS behavior.