CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)
-   -   Annoying script.aculo.us bug in IE (http://www.codingforums.com/showthread.php?t=133311)

Cruciamentum 02-14-2008 03:30 PM
Annoying script.aculo.us bug in IE
 
Hey all. Thanks in advance for any help. So here's the problem. I have script.aculo.us set up to pop up a little image when someone clicks on the first field in my form. ( Seen here: http://www.fidelitydebt.net/landingpage5.htm )
Everything works as it should in firefox, but of course, in IE, it gives me an error. I have another effect,(slide down logo) that works both in FF and IE just fine. I can't for the life of me, figure out what the problem is with the effect I want from the form. I am very new to all this, so I'm sure it's something small I'm over looking. If anyone has any suggestions, it'd be greatly appreciated. I'll post my main ppage code below. Thanks!

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css"
href="landingpage5.css" />
<SCRIPT language=JavaScript src="javascript/mootools-release-1.11.js" type=text/javascript></SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fidelity Debt Solutions</title>
<script src="javascript/prototype.js" type="text/javascript"></script>
<script src="javascript/scriptaculous.js" type="text/javascript"></script>
<script src="javascript/effects.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/ad3.js"></script>

<link rel="stylesheet" type="text/css" href="javascript/ad3.css" />
</head>
<body>
<div id="document.getElementById('advert')" style="position:absolute; z-index:10; left:40%; top:23%; display:none " > 
<div> 
<img src="landing5popup.jpg" width="200" height="160" border="0" alt="Landing Popup" title="Landing Popup" /> 
</div> 
</div>
<div id="pa">
                <div class="pa_close"><a href="javascript:void(0)" onclick="hideAp()"></a></div>
                <p/>
                <a href="http://youtube.com/watch?v=GRTPDtkLp1k" target="_new"><img src="foxpop2.jpg" alt="special" border="0" /></a>
        </div>
<div id="content" style="padding-top:13px;" align="center">

<table id="landing_page" width="785" height="610" border="0" cellpadding="0" cellspacing="0" align="center">
        <form action="https://www.leadfetch.com/sub_leads_new.php?<?php echo $_SERVER['QUERY_STRING']; ?>" method="post" name="newLead" id="newLead" style="margin:0px;" onSubmit="return validateProsper()">
        <tr>
                <td colspan="3">
                        <img src="images/landing2_01.gif" alt="" width="785" height="163" border="0" usemap="#Map2"></td>
        </tr>
        <tr>
                <td>
                        <img src="images/landing2_02.gif" width="56" height="232" alt=""></td>
                <td style="background:#E8E8E8;width:237px; height:232px">
                          <input type="hidden" name="doHPhChk" value="Y" />
                          <input type="hidden" name="lead_src_type" value="Google Landing Page1" />
                          <input type="hidden" name="ownerid" value="50" />
              <script language="javascript" src="https://www.leadfetch.com/hittracker.php?<?php echo $_SERVER['QUERY_STRING']; ?>"></script>
                        <span class="general">First Name</span>
                        <input class="black14" name="firstName" type="text" id="firstName" onclick="superFun(); return false;" size="10"><br>

                        <span class="general">Last Name</span>
            <input name="lastName" type="text" id="lastName" size="10"  onclick="superFun(); return false;" class="black14" /><br>

                        <span class="general">E-Mail</span>
                          <input name="email" type="text" id="email" size="10" class="black14" /><br>
                        <span class="general">Phone:</span>
                        (
                          <input type="text" name="homePhone1" size="3" maxlength="3" class="black14" style="width:30px" />
                          )
                          <input type="text" name="homePhone2" size="3" maxlength="3" class="black14" style="width:30px" />
                          -<input type="text" name="homePhone3" size="4" maxlength="4"  class="black14" style="width:35px" /><br>
                        <span class="general">State:</span>
                          <select name="state" size="1"  class="black14">
                                <option value="0" selected="selected">- Select A State -</option>
                                <option value="AK">AK</option>
                                <option value="AL">AL</option>
                                <option value="AR">AR</option>
                                <option value="AZ">AZ</option>
                                <option value="CA">CA</option>
                                <option value="CO">CO</option>
                                <option value="CT">CT</option>
                                <option value="DC">DC</option>
                                <option value="DE">DE</option>
                                <option value="FL">FL</option>
                                <option value="HI">HI</option>
                                <option value="IA">IA</option>
                                <option value="ID">ID</option>
                                <option value="IL">IL</option>
                                <option value="IN">IN</option>
                                <option value="KY">KY</option>
                                <option value="LA">LA</option>
                                <option value="MA">MA</option>
                                <option value="MD">MD</option>
                                <option value="MI">MI</option>
                                <option value="MN">MN</option>
                                <option value="MO">MO</option>
                                <option value="MT">MT</option>
                                <option value="ND">ND</option>
                                <option value="NE">NE</option>
                                <option value="NH">NH</option>
                                <option value="NJ">NJ</option>
                                <option value="NM">NM</option>
                                <option value="NV">NV</option>
                                <option value="NY">NY</option>
                                <option value="OH">OH</option>
                                <option value="OK">OK</option>
                                <option value="OR">OR</option>
                                <option value="PA">PA</option>
                                <option value="RI">RI</option>
                                <option value="SD">SD</option>
                                <option value="TN">TN</option>
                                <option value="TX">TX</option>
                                <option value="UT">UT</option>
                                <option value="VT">VT</option>
                                <option value="WA">WA</option>
                                <option value="WI">WI</option>
                                <option value="WY">WY</option>
                        </select>
                        <br>
                <span class="general">Unsecured Debt:</span>
                          <select name="debt" size="1"  class="black14">
                                <option value="0" selected="selected">- 10K Min -</option>
                                                                <option value="$10,000-$20,000(Sorry)">$10,000+</option>
                                <option value="$20,000-$30,000">$20,000+</option>
                                <option value="$30,000-$40,000">$30,000+</option>
                                <option value="$40,000-$50,000">$40,000+</option>
                                <option value="$50,000-$60,000">$50,000+</option>
                                <option value="$60,000-$70,000">$60,000+</option>
                                <option value="$70,000-$80,000">$70,000+</option>
                                <option value="$80,000-$90,000">$80,000+</option>
                                <option value="$90,000-$100,000">$90,000+</option>
                                <option value="$100,000-****loads">$100,000+</option>
                                </select>
                        <br><br />
          <INPUT name="IMAGE" TYPE="IMAGE" SRC="submitbutton.jpg">
                                       
        <input type="hidden" name="aff_id" value="" />
        <input type="hidden" name="src" value="" />
        <input type="hidden" name="kw" value="" />
        <input type="hidden" name="redirectUrl" value="http://fidelitydebt.net/thankyou5.html" />
        <input type="hidden" name="recipient" value="" />
        <input type="hidden" name="subject" value="Fidelity Debt Lead Request" /></td>
                </td>
                <td>
                        <img src="images/landing2_04.gif" width="492" height="232" alt=""></td>
        </tr>
        <tr>
                <td colspan="3">
                        <img src="images/landing2_05.gif" alt="" width="785" height="215" border="0" usemap="#Map"></td>
        </tr>
        </form>
</table>
<script>
function init() {
        startAp();
}

window.onload = init;

function superFun(){
        Effect.toggle('advert','blind');
}
</script>


<map name="Map" id="Map">
        <area shape="rect" coords="82,24,274,61" href="javascript:void()" onclick="document.newLead.submit();" alt="Submit" title="Submit" />
        <area shape="rect" coords="87,133,277,184" href="http://www.fidelitydebtsolutions.com/debt-calculator.php?" />
</map>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2491100-3";
urchinTracker();
</script>
<!--YAHOO ANALYTICS-->
<SCRIPT language="JavaScript" type="text/javascript">
<!-- Yahoo! Inc.
window.ysm_customData = new Object();
window.ysm_customData.conversion = "transId=,currency=,amount=";
var ysm_accountid  = "12B8QTN3Q6QGKOS0U3QGUTUN2SK";
document.write("<SCR" + "IPT language='JavaScript' type='text/javascript' "
+ "SRC=//" + "srv1.wa.marketingsolutions.yahoo.com" + "/script/ScriptServlet" + "?aid=" + ysm_accountid
+ "></SCR" + "IPT>");
// -->
</SCRIPT>
<map name="Map2" id="Map2">
<area shape="rect" coords="-10,10,113,114" href="http://www.fidelitydebtsolutions.com" /></map></body>
</html>

GJay 02-14-2008 06:18 PM
can you maybe strip down your code and provide a really simple example of it not working? Wihout wanting to be too harsh, what you've pasted is a mess and is really difficult to read.

One thing that did jump out is the <div id="document.getElementById('advert')" part. What are you trying to do here? You can't run javascript inside the value of the 'id' attribute...is it meant to be just 'advert' which is referenced in the javascript at the bottom?

Cruciamentum 02-14-2008 11:02 PM
Hey there, thanks for the response. I'll try to break it down a little. The code below is where the problem is, I think. Yeah, <div id="document.getElementById('advert')" is supposed to just be ('advert') I was just playing around with it, and forgot to take that out. My understanding of javascript is very limited, so I don't have any guesses as to why it doesn't work in IE. There error i get is:

Line: 159
Char: 5
Error: Object required
Code: 0

Someone else had suggested that the problem might be in the effects.js file conflicting with IE itself. Sorry if I didn't clear anything up. I don't really have to use scriptaculous if it's not needed. If you know of another easier way to get an effect anywhere near the desired effect, I'd happily go with that. Again, thanks for the help, and sorry I'm not more knowledgeable, I know that'd make it a bit easier :-/

In the head and body:
Code:
<script src="javascript/prototype.js" type="text/javascript"></script>
<script src="javascript/scriptaculous.js" type="text/javascript"></script>
<script src="javascript/effects.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/ad3.js"></script>

<link rel="stylesheet" type="text/css" href="javascript/ad3.css" />
</head>
<body>
<div id="('advert')" style="position:absolute; z-index:10; left:40%; top:23%; display:none " > 
<div> 
<img src="landing5popup.jpg" width="200" height="160" border="0" alt="Landing Popup" title="Landing Popup" /> 
</div> 
</div>
The First field of the form: (where I want the event to start)
Code:
<span class="general">First Name</span>
                        <input class="black14" name="firstName" type="text" id="firstName" onclick="superFun(); return false;" size="10"><br>

<span class="general">Last Name</span>
            <input name="lastName" type="text" id="lastName" size="10"  onclick="superFun(); return false;" class="black14" /><br>

Then this is at the bottom:
Code:
<script>
function init() {
        startAp();
}

window.onload = init;

function superFun(){
        Effect.toggle('advert','blind');
}
</script>


All times are GMT +1. The time now is 07:18 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.