PDA

View Full Version : Inexplicable JavaScript Behavior

sdo
09-21-2008, 06:02 AM
Hey All,

This one is killing me.

Check out the issue here (http://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:

<!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">
<!--[if !IE]> <-->
<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> <!--> <![endif]-->
</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>&copy; 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>



ANY input is greatly appreciated.

-SDO
sdo
09-21-2008, 06:03 AM
UPDATE:

There wasn't enough space in my previous post, but here is the code for inside the iframe:

<!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">
<!--
function Dollar (val) { // take str or num, return str
var str,pos,rnd=0;
if (val < .995) rnd = 1; // for old Netscape browsers
str = escape (val*1.0 + 0.005001 + rnd); // float, round, escape
pos = str.indexOf ("."); // should be one
if (pos > 0) str = str.substring (rnd, pos + 3);
return str; // return valid PayPal dollar string

}

function ReadForm (obj1, tst) { // process un-named selects

var pos,val,txt,des,ary,formObj,i;
var str = '<strong>Price: $</strong>';


// if (tst && (obj1.a3.value == "")) {
// alert ("Make a subscription selection!");
// return;
// }

for (i=0; i < obj1.elements.length; i++) {

formObj = obj1.elements[i];


if (formObj.checked){



des = obj1.basedes.value; // base description
txt = formObj.text; // select text data
val = formObj.value; // select value data
ary = val.split (","); // isolate items in array
obj1.t3.value = ary[0].toUpperCase ();
obj1.p3.value = ary[1];
obj1.a3.value = Dollar (ary[2] * ary[1]);
obj1.src.value = ary[3];
obj1.sra.value = ary[4];
obj1.item_name.value = des;
obj1.item_number.value = val.toUpperCase ();



}


}

str += obj1.a3.value;
document.getElementById('pricediv').innerHTML = str;

}

-->


</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="ShaunOlafson@gmail.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>

<!-- <select name="sub" onchange="ReadForm (this.form, false);">
<option>Subscription type</option>
<option value="d,1,2.00,1,1">Daily ($2.00/day)</option>
<option value="w,1,10.00,1,1">Weekly ($10/week)</option>
<option value="m,1,40.00,1,1">Monthly ($40/month)</option>
<option value="m,3,35.00,1,1">Quarterly ($35/month)</option>

<option value="m,6,30.00,1,1">Biannually ($30/month)</option>
<option value="y,1,300.00,1,1">Yearly ($25/month)</option>
<option value="y,3,240.00,0,1">3 Years ($20/month)</option>
</select> -->
<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>