The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Inexplicable Javascript Behavior, Javascript seems to be behaving erratically
Shaun
post Sep 21 2008, 05:06 AM
Post #1


Newbie
*

Group: Members
Posts: 12
Joined: 21-September 08
Member No.: 6,707



Hey All,

This one is killing me.

Check out the issue here. 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">
<!--[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>


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">
<!--
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>


ANY input is greatly appreciated.

-SDO

This post has been edited by Darin McGrew: Sep 21 2008, 01:42 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 21 2008, 07:31 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



QUOTE(Shaun @ Sep 21 2008, 12:06 PM) *

Check out the issue here. Use the flash navigation at the top to navigate to "Sign Up".


All I see on that page is an image saying "Under construction". Wrong URL? huh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Shaun
post Sep 21 2008, 08:41 AM
Post #3


Newbie
*

Group: Members
Posts: 12
Joined: 21-September 08
Member No.: 6,707



Yes,

Many, many apologies.

Correct link is here.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Sep 21 2008, 09:21 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



In what browser/system are you experiencing this?
I don't notice it in Safari/Mac.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 21 2008, 09:27 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



I guess it's IE7 because i don't see it in IE6, K-Mel or Opera.

Why do I have to click the links twice? If it's supposed to be that way I must tell you it gets old fast.

QUOTE
Many, many apologies.


I forgive you. cool.gif laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Sep 21 2008, 11:50 AM
Post #6


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



I get (fancy font) "FAIL (the browser should render some flash content, not this)."

Well, who's failing...? FWIW, I don't have flash installed here, which is one way of avoiding a lot of irritating junk (advertising). It's a bad plan to put your navigation in the same bin as irritating junk.

Where I do have Flash installed, I use the Firefox plugin that leaves each bit of Flash as a button I can click to run if desired. Another way of avoiding the junk, that leaves your navigation requiring extra clicks. (I didn't get to find out what Pandy's two-layer clicks are.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Sep 21 2008, 12:19 PM
Post #7


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



QUOTE
(I didn't get to find out what Pandy's two-layer clicks are.)


from OP:
QUOTE
Use the flash navigation at the top to navigate to "Sign Up".

and
QUOTE
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".

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 21 2008, 12:35 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



I was wrong about the links requiring two clicks. There's a hover effect with a delay and it has to play through before the button is clickable (I think). But as I saw it my first click just made the button jump. That in reality happens on hover, but I had already clicked. What can I say? I'm just a super fast clicker! cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Shaun
post Sep 21 2008, 03:37 PM
Post #9


Newbie
*

Group: Members
Posts: 12
Joined: 21-September 08
Member No.: 6,707



Hey guys,

Thanks a lot for all your input.

Yea, in opera, the default settings will cause you to have to to click to enable features like flash.

Its true that some people dont like flash, but I've found (by monitoring my website traffic) that roughly 98.6% of people have flash enabled so, good enough for my purposes.

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.

And for the super fast clickers out there, yea, I play my fair share of CSS so.. when I'm testing my website I have to browse in bullet time to pretend I'm an average 50 yr old technophobe (my archtyped target market) wink.gif

Thanks again for the replies!

-SDO

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Sep 21 2008, 04:13 PM
Post #10


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE
Its true that some people dont like flash, but I've found (by monitoring my website traffic) that roughly 98.6% of people have flash enabled so, good enough for my purposes.
Well, sure... If your site navigation requires Flash, then it's a good bet that almost all your visitors will have Flash enabled...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Shaun
post Sep 21 2008, 04:16 PM
Post #11


Newbie
*

Group: Members
Posts: 12
Joined: 21-September 08
Member No.: 6,707



QUOTE(Darin McGrew @ Sep 21 2008, 04:13 PM) *

QUOTE
Its true that some people dont like flash, but I've found (by monitoring my website traffic) that roughly 98.6% of people have flash enabled so, good enough for my purposes.
Well, sure... If your site navigation requires Flash, then it's a good bet that almost all your visitors will have Flash enabled...


Unless my visitors don't know my navigation is flash prior to visiting my site.. which seems likely given my site is not content based.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 21 2008, 04:28 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



But the page doesn't require flash for navigation. The flash buttons are doubled up with normal links. I get to anothet page when I click the rel link to Services, but I guess that will change.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd April 2024 - 11:30 AM