|
JavaScript - Help Script Working In Ie But Not Firefox
Hi there Im having an issue with some javascript that works fine in IE, but in FF is not working properly.
The script is used to display a list of check boxes, the user can expand, which can checked to enabke a users selection of products. This is the script: Code: <script type="text/javascript">
var xcNode = [];
// m = Parent UL ID
// c =
function xcSet(m, c, q, isCompletedLength)
{
if (document.getElementById && document.createElement)
{
var xs = m;
m = document.getElementById(m).getElementsByTagName('ul');
var d, p, x, h, i, j;
for (i = 0; i < q; i++)
{
var xp = document.getElementById("_" + xs + i);
if (d = xp.getAttribute('id'))
{
if (navigator.userAgent.indexOf("Firefox") != -1)
{
var lstr = TrimTags((document.getElementById(xs).innerHTML));
xcCtrl(d, c, 'x', '[+] Click for more info', 'Show', 'Click to expand', lstr.length, isCompletedLength);
x = xcCtrl(d, c, 'c', '[-] Click to Hide', 'Hide', 'Click to collapse', lstr.length, isCompletedLength);
}
else
{
xcCtrl(d, c, 'x', '[+] Click for more info', 'Show', 'Click to expand', (document.getElementById(xs).innerText).length, isCompletedLength);
x = xcCtrl(d, c, 'c', '[-] Click to Hide', 'Hide', 'Click to collapse', (document.getElementById(xs).innerText).length, isCompletedLength);
}
p = xp.parentNode;
if (h = !p.className)
{
j = 2;
while ((h = !(d == arguments[j])) && (j++ < arguments.length));
if (h)
{
if (xp.name == parseURL())
{
xp.style.display = 'block';
x = xcNode[d + 'c'];
}
else
{
xp.style.display = 'none';
x = xcNode[d + 'x'];
}
}
}
p.className = c;
var expand = document.getElementById("expandBtn_" + xs + "0");
expand.insertBefore(x, expand.firstChild);
}
}
}
}
works fine in IE, but not in Firefox where the expanded list is not showing the current number of items (checkboxes), it shows 34 check boxes in IE but only 17 in firefox. Thanks in advance Similar TutorialsNice for a change: a piece of code that does work in all versions of IE, but not in Firefox. I'm stuck. Code: <img alt="Loodgieters" title="Loodgieters" src="/core/loodgieters_uit.png" name="loodgieters"
border="0" style="margin-right:1px; margin-top:1px; float:left; cursor:pointer;"
onclick="document.location='/pages/loodgieters.php';"
onmouseover="foto1.style.backgroundColor='#392d63'; loodgieters.src='/core/loodgieters_aan.png'"
onmouseout ="foto1.style.backgroundColor='#008ac9'; loodgieters.src='/core/loodgieters_uit.png'" />
Explanation: element "loodgieters" is a menu button that should change on mouseover. It doesn't in FF, it does in IE. Secondly, when you "mousover" the image, it should change the backgroundcolor of a second element (foto1). Element 'foto1' is a table cell. In return, when you mouse-over this table cell, the image element 'loodgieters' should change as well. So it's a two-way thing. The code for the table cell is: Code: <td height="189" id="foto1" bgcolor="#008ac9" valign="top" onmouseover="style.backgroundColor='#392d63'; loodgieters.src='/core/loodgieters_aan.png';" onmouseout="style.backgroundColor='#008ac9'; loodgieters.src='/core/loodgieters_uit.png';" style="cursor:pointer;" onclick="document.location='/pages/loodgieters.php';"> <img alt="Loodgieters" title="Loodgieters" src="/core/loodgieters.png" style="border:0; margin-left:auto; margin-right:auto; margin-top:10px; display: block;" /></td> Again: it all works as I expected in IE, Safari and Chrome, but it does not in Firefox. The whole page validates as XHTML 1.0 Transitional What am I overlooking here? I'm stuck. Any help is welcome Since I like to minimize on graphics to keep bandwidth low, I have been using a script to simulate buttons. When you mouseover, you get some color changes which revert back when you move the mouse off. Simple, right? The problem is that firefox totally ignores the script. Even worse, safari changes on mouseover, but doesn't revert on mouseout. I have this in the heading: Code: <script LANGUAGE="JavaScript">
function ColorBlock(oRegion,sLinkID)
{
if (document.readyState != "complete") return;
window.event.cancelBubble = true;
oRegion.className = "MenuSelected";
oRegion.style.cursor="hand";
sLinkID.style.color = "black";
}
function UncolorBlock(oRegion,sLinkID)
{
if (document.readyState != "complete") return;
window.event.cancelBubble = true;
var oToEl = window.event.toElement;
if ((oToEl && !oRegion.contains(oToEl))||!oToEl)
{
sLinkID.style.color = "white";
oRegion.className = "MenuUnSelected";
}
}
</script>
And this is in the body. Code: <table class=MenuTable>
<tr><td OnMouseover="ColorBlock(this, Link4);"
OnMouseout="UncolorBlock(this, Link4);"
CLASS="MenuUnSelected" nowrap>
<a STYLE="color:white" ID="Link4"
OnMouseover="this.style.textDecorationNone=true;" href="javascript:createWindow('edu.htm','edu','toolbar=1,location=1,directories=1,status=1,menubar=1,scrollbars=1,resizable=1,width=825,height=725')">
<div style="width:144; cursor=hand; font-weight:bold;">
Education
</a></div></td>
</tr>
</table>
I have a bunch of these "buttons" ... firefox ignoring the code is annoying but safari only using half the code makes it look really bad. Anyone have any ideas? I've done a lot of work over time on the site, there are just a few bugs that have been avoiding me and I am trying to hunt them all down and kill them. The page is at www.adam-k-watts.com I have this script and it is performing the calculations to provide an instant price quote script fine in IE and also making only certain boxes editable when a certain radio button is clicked. However in Firefox or Safari it isn't working. Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
td.calchead{
width:75px;
background:none;
border-top:thin solid black;
text-align:right;
}
td.calc{
width:75px;
background:none;
border:thin solid black;
text-align:right;
}
td.products{
float:right;
text-align:right;
border:1px solid black;
}
td.inputs{
width:200px;
float:right;
text-align:right;
}
p.products{
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif, 14px;
}
p.inputs{
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif, 14px;
}
input.inputs{
width:30px;
background-color:CCCCCC;
}
p.calculate{
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif, 14px;
}
</style>
<?php
$header = $_POST['header'];
$productid = $_POST['group1'];
$width = $_POST['width'];
$height = $_POST['height'];
$openings = $_POST['openings'];
$clearpanel = $_POST['clearpanel'];
$resident = $_POST['resident'];
$color = $_POST['color'];
$motor = $_POST['motor'];
$priceperheader=.5833;
//error checking, ensures all variables are numeric between calculatable values 0 and 999
if($width>=0 && $width<=999 && $height>=0 && $height<=999 && $openings>=0 && $openings<=999 && $clearpanel>=0 && $clearpanel<=999)
{
$width2=$width+6;
$height2=$height+6;
if($productid == 'Roll-down Shutters')
{
$height2=$height2+4;
}
$wh=$width2*$height2;
if($header=='yes')
{
$he=$openings*$width;
$he=$he*$priceperheader;
}
else
{
$he=0;
}
if($resident=='yes')
{
$tax=1.085;
}
else
{
$tax=1;
}
if($motor=='2')
{
$motor=488*$openings;
}
else
{
$motor=0;
}
//$cl=$clearpanel*$priceperclearpanel;
//echo(' ' + $wh + ' ' + $he + ' ' + $cl + ' ');
//divide sq ft by 144 to get sq inches
////.050 alum =$4.94 per sq ft
////24 gauge steel =$3.72 per sq ft
////change Protexan to Lexan =9.94 sq ft
////roll downs = $24.99 per sq ft motor = $488.
////bahama impact = 25.99 sq ft no impact 21 per sq ft
////colonial impact = 25.99 and non = 21 sq ft
////Hurricane Fabric $6.38 per sq ft
//All prices are self install only installation is extra and highly reccommended
////F track = $1.79 per ft
////H track = $2.29 per ft
////Texas residents add 8.25 percent sales tax
//Standard Clamshell<input type='radio' name='group1' value='Standard Clamshell' onFocus="enable5()"><br />
//Impact Clamshell<input type='radio' name='group1' value='Impact Clamshell' onFocus="enable5()"><br />
//.063 Aluminum Panels<input type='radio' name='group1' value='.063 Aluminum Panels' onFocus="enable1()"><br />
//Accordian Shutters<input type='radio' name='group1' value='Accordian Shutters' onFocus="enable4()" /><br />
function sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2)
{
$wh=$wh*$priceperopening;
$subtotal=$wh+$he;
$subtotal=$subtotal+$motor;
$total=$subtotal*$tax;
$tax=$total-$subtotal;
echo("<table><tr ><td>Product</td><td>Measured Opening</td><td>Finished Opening</td></tr>
<tr><td >" . $productid . "</td><td align'right'>" . $width . " x " . $height . "</td><td align'right'>" . $width2 . " x " . $height2 . "</td></tr></table>
<table><tr><td></td><td class='calchead'>Shutter</td><td class='calchead'>Header</td><td class='calchead'>Motor</td><td class='calchead'>Tax</td><td class='calchead'>Total</td></tr>
<tr><td>$</td><td class='calc'>". money_format('%.2n',$wh) . "</td><td width='30' class='calc'>". money_format('%.2n',$he) . "</td><td width='30' class='calc'>" . money_format('%.2n',$motor) . "</td><td width='30' class='calc'>" . money_format('%.2n',$tax) . "</td><td align='right' class='calc'>$" . money_format('%.2n',$total) . "</td></tr></table>");
}
if($productid == '.050 Aluminum Panels')
{
$priceperopening=.03431;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
if($productid == '24 gauge steel')
{
$priceperopening=.02583;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
if($productid == 'lexan')
{
$priceperopening=.0659;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
if($productid == 'Roll-down Shutters')
{
$priceperopening=.17354;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
if($productid == 'Impact Bahama Shutters')
{
$priceperopening=.18049;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
if($productid == 'Impact Colonial Shutters')
{
$priceperopening=.18049;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
if($productid == 'Hurricane Fabric')
{
$priceperopening=.04431;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
if($productid == 'Non-Impact Bahama Shutters')
{
$priceperopening=.14583;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
if($productid == 'Non-Impact Colonial Shutters')
{
$priceperopening=.14583;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
}
else
{echo('Please make sure to enter numbers greater than zero and less than 999 in all required fields.');}
$header='';
?>
<script type='text/javascript'>
//white() clears backs of inputs to white and is called from eable functions
function white(){
document.getElementById("header").style.background='#ffffff';
document.getElementById("width").style.background='#ffffff';
document.getElementById("height").style.background='#ffffff';
document.getElementById("openings").style.background='#ffffff';
document.getElementById("resident").style.background='#ffffff';
document.getElementById("color").style.background='#ffffff';
document.getElementById("motor").style.background='#ffffff';
}
//enable1-5() enables particular requested fields specific for product type and disables unused fields.
function enable1()
{
white();
document.getElementById("header").disabled='';
document.getElementById("width").disabled='';
document.getElementById("height").disabled='';
document.getElementById("openings").disabled='';
document.getElementById("resident").checked='';
document.getElementById("resident").disabled='';
document.getElementById("color").style.background='#CCCCCC';
document.getElementById("color").value='';
document.getElementById("color").disabled='true';
document.getElementById("motor").style.background='#CCCCCC';
document.getElementById("motor").value='';
document.getElementById("motor").disabled='true';
}
function enable2()
{
white();
document.getElementById("header").disabled='';
document.getElementById("width").disabled='';
document.getElementById("height").disabled='';
document.getElementById("openings").disabled='';
document.getElementById("resident").checked='';
document.getElementById("resident").disabled='';
document.getElementById("color").value='';
document.getElementById("color").style.background='#CCCCCC';
document.getElementById("color").disabled='true';
document.getElementById("motor").value='';
document.getElementById("motor").style.background='#CCCCCC';
document.getElementById("motor").disabled='true';
}
function enable3()
{
white();
document.getElementById("header").checked='';
document.getElementById("header").style.background='#CCCCCC';
document.getElementById("header").disabled='true';
document.getElementById("width").disabled='';
document.getElementById("height").disabled='';
document.getElementById("openings").disabled='';
document.getElementById("resident").disabled='';
document.getElementById("resident").checked='';
document.getElementById("color").disabled='';
document.getElementById("motor").disabled='';
}
function enable4()
{
white();
document.getElementById("header").checked='';
document.getElementById("header").style.background='#CCCCCC';
document.getElementById("header").disabled='true';
document.getElementById("width").disabled='';
document.getElementById("height").disabled='';
document.getElementById("openings").disabled='';
document.getElementById("resident").checked='';
document.getElementById("resident").disabled='';
document.getElementById("color").disabled='';
document.getElementById("motor").style.background='#CCCCCC';
document.getElementById("motor").value='';
document.getElementById("motor").disabled='true';
}
function enable5()
{
white();
document.getElementById("header").checked='';
document.getElementById("header").disabled='true';
document.getElementById("header").style.background='#CCCCCC';
document.getElementById("width").disabled='';
document.getElementById("height").disabled='';
document.getElementById("openings").disabled='';
document.getElementById("resident").checked='';
document.getElementById("resident").disabled='';
document.getElementById("color").value='';
document.getElementById("color").disabled='true';
document.getElementById("color").style.background='#CCCCCC';
document.getElementById("motor").value='';
document.getElementById("motor").disabled='true';
document.getElementById("motor").style.background='#CCCCCC';
}
</script>
<title>Estimator</title>
</head>
<body>
<div>
<table>
<tr>
<td><p class='products'>First, select a product</p></td>
<td><p class='inputs'>Then, enter dimensions and select options (in inches) that appear in white</p></td>
</tr>
<tr>
<td class='products'>
<form width='550' name='form01' method='post' action='http://www.windowguardoftexas.com/estimator.php'>
.050 Aluminum Panels<input type='radio' name='group1' value='.050 Aluminum Panels' onFocus="enable1()"><br />
24 Gauge Steel<input type='radio' name='group1' value='24 gauge steel' onFocus="enable1()"><br />
Lexan<input type='radio' name='group1' value='lexan' onFocus="enable2()"><br />
Roll-down Shutters<input type='radio' name='group1' value='Roll-down Shutters' onFocus="enable3()"><br />
Impact Bahama Shutters<input type='radio' name='group1' value='Impact Bahama Shutters' onFocus="enable4()"><br />
Impact Colonial Shutters<input type='radio' name='group1' value='Impact Colonial Shutters' onFocus="enable4()"><br />
Hurricane Fabric<input type='radio' name='group1' value='Hurricane Fabric' onFocus="enable5()"><br />
Non-Impact Bahama Shutters<input type='radio' name='group1' value='Non-Impact Bahama Shutters' onFocus="enable4()"><br />
Non-Impact Colonial<input type='radio' name='group1' value='Non-Impact Colonial Shutters' onFocus="enable4()"><br />
</td>
<td class='inputs'>
Add Header and F-track to openings: <input type='checkbox' name='header' class='inputs' value='yes' disabled="disabled"/><br />
Width: <input type='text' class='inputs' name='width' value='' maxlength='3'disabled='disabled' /><br />
Height: <input type='text' class='inputs' name='height' value='' maxlength='3' disabled='disabled' /><br />
Openings: <input type='text' class='inputs' name='openings' value='' maxlength='3' disabled='disabled' /><br />
Texas Resident <input type='checkbox' name='resident' class='inputs' value='yes' disabled="disabled"/><br />
Color: <select name="color" id='color' class='inputs' disabled='disabled'><br />
<option value="0" >--Select Color--</option>
<option value="1" >White</option>
<option value="2">Bronze</option>
<option value="3">Ivory</option>
<option value="3">Beige</option>
</select>
<br />
Motor: <select name="motor" class='inputs' disabled="disabled"><br />
<option value="0">--Select Motor--</option>
<option value="1">None</option>
<option value="2" >Standard</option>
</select>
<br /><br />
<p class='calculate'>Finally, press calculate</p>
<input type='reset' name='Submit2' value='Reset'>
<input type='submit' name='Submit' value='Calculate'>
</td>
</form>
</tr>
<tr><td>All prices are self install only, installation</td><td>is extra and highly reccommended</td></tr>
</table>
</div>
</body>
</html>
How do I get this to work in Firefox and Safari? Why would it work in IE but not the others? hereis the html file and javascripton click of this button a html ***************************** <table class=matcolor id=topnav cellspacing=0 cellpadding=0 width=550 border=0 bgcolor="#FFCCCC"> <tbody> <tr align=middle> <td id=menu1 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Desk Top Publishing </font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu2 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Transcription</font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu3 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Accounts Processing </font></div> </td> </tr> </tbody> </table> ***************************************** <script language=JavaScript> ix = document.getElementById('tblmenu1').getBoundingClientRect(); new ypSlideOutMenu("menu1", "right",ix.left + ix.right ,ix.bottom + 10); </script> **any thing i have to alter to work in firefox please help Hey people! New to using Javascript but have a problem. Working in Firefox but not in IE, and no errors flash up - it just does not work! Here is my code if anyone has the time to take a peak! What it does in Firefox is has a drop down with two options, both of which call the functions passing over the name of the items to be hidden or displayed. Works fine, but not in IE. Javascript Function: Code: <script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
function hideStuff(id) {
document.getElementById(id).style.display = 'none';
}
</script>
Form drop down to call javascript: Code: <select name="golf_package">
<option value='Yes' onClick="showStuff('Golf'); hideStuff('Accommodation')">Yes</option>
<option value='No' selected='selected' onClick="showStuff('Accommodation'); hideStuff('Golf')">No</option>
</select>
Hide and Show date: Code: <span id="Golf" style="display: none; return: false;">HIDE BIT</span><span id="Accommodation" style="display: none; return: false;">HIDE BIT TWO </span> Any help will be much appreciated! Thanks Hello all, I have a property of text box which works well in firefox but not in IE ..I am unable to understand why ..andy help is appreciated ? Code: onfocus="this.style.backgroundColor='#F1CC8E';" Hi, I'm new to JS and been thrown in at the deepend as our developer has just left! You are dealing with a total newbie! I have the following script that is not working in FF but is fine in Chrome and IE can anyone tell me what is wrong with it please?! Code:
function showTotalCost(val)
{
if(val=='yes')
{
if(document.getElementById('secondaryeventtype').value == 'adventure')
{
document.getElementById('totalcost').innerText = Number(parseFloat(document.getElementById('cost').value) + 100).toFixed(2) + ' (including insurance)';
}
else
{
document.getElementById('totalcost').innerText = Number(parseFloat(document.getElementById('cost').value) + 27).toFixed(2) + ' (including insurance)';
}
}
else
{
document.getElementById('totalcost').innerText = document.getElementById('cost').value;
}
}
Code: function calculateGroupMembers()
{
var iMultiplier;
if(document.getElementById('txtGroup1Firstname').value != '' || document.getElementById('txtGroup1Surname').value != '' || document.getElementById('txtGroup1Email').value != '')
{
iMultiplier=2;
}
if(document.getElementById('txtGroup2Firstname').value != '' || document.getElementById('txtGroup2Surname').value != '' || document.getElementById('txtGroup2Email').value != '')
{
iMultiplier=3;
}
if(document.getElementById('txtGroup3Firstname').value != '' || document.getElementById('txtGroup3Surname').value != '' || document.getElementById('txtGroup3Email').value != '')
{
iMultiplier=4;
}
if(document.getElementById('txtGroup4Firstname').value != '' || document.getElementById('txtGroup4Surname').value != '' || document.getElementById('txtGroup4Email').value != '')
{
iMultiplier=5;
}
if(document.getElementById('txtGroup5Firstname').value != '' || document.getElementById('txtGroup5Surname').value != '' || document.getElementById('txtGroup5Email').value != '')
{
iMultiplier=6;
}
document.getElementById('totalcost').innerText = Number(parseFloat(document.getElementById('cost').value) * iMultiplier).toFixed(2) + ' (inc group members)';
}
It is fired from an onblur event in the div below once the chkbox is ticked, the link to the page is https://www.doitforcharity.com/book-...eid=1990&cid=0 but you may need to progress through https://www.doitforcharity.com/book-....aspx?eid=1990 first: Code:
<div id="pnlGroupBooking">
<label class="boldfieldlabel" for="chkGroupBooking">Do you wish to book for others too? </label>
<input id="chkGroupBooking" type="checkbox" language="javascript" onclick="__doPostBack('chkGroupBooking','')" checked="checked" name="chkGroupBooking">
(you may book up to 5 additional people)
<div id="pnlGroupBookingNames" style="border: 1px solid LightGrey; width: 500px;" styles="padding:10px;">
<strong>Group Member Names</strong>
<br>
<p>
</p>
<p>
</p>
<p style="vertical-align: top;">
<strong>1) </strong>
<input id="txtGroup1Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup1Firstname">
<input id="txtGroup1Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup1Surname">
<input id="txtGroup1Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup1Email">
<br>
<strong>2) </strong>
<input id="txtGroup2Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup2Firstname">
<input id="txtGroup2Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup2Surname">
<input id="txtGroup2Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup2Email">
<br>
<strong>3) </strong>
<input id="txtGroup3Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup3Firstname">
<input id="txtGroup3Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup3Surname">
<input id="txtGroup3Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup3Email">
<br>
<strong>4) </strong>
<input id="txtGroup4Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup4Firstname">
<input id="txtGroup4Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup4Surname">
<input id="txtGroup4Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup4Email">
<br>
<strong>5) </strong>
<input id="txtGroup5Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup5Firstname">
<input id="txtGroup5Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup5Surname">
<input id="txtGroup5Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup5Email">
</p>
</div>
</div>
Thanks! Hello - I'm a total newbie to html and javascript but have been forced to learn it somewhat since I'm making a website for my wife's business. Anyway, the site has a page where people can choose from menuitems of a form ("select" elements). That form info is then used to call Foxycart. I've decided to link the choosing of those menu-items to showing appropriate product images, thus providing visual feedback for the buyer. I have hacked my way to a point that the page does what I want in Firefox, but it breaks in IE and I have no idea why since the same sort of simple code algorithm to poll the menus with "document.getElementByIdworks" works in IE until I leave the page, but then stops working when I return. The page is he http://angelatoyarn.squarespace.com/...our-own-gelato (the site is still a WIP obviously) In Firefox everything is fine - I can select the items I want and the pictures of those images appear at the bottom of the page. If I leave the page and come back, the function Updateyarn() is called which grabs the .selectedindex values and re-inserts the images. But in IE when I leave the page and come back the select-menus retain their previous values (as they should) but my update yarn () function errors out and doesn't return a valid integer. Please Help! I have no Earthly clue why the IE version is breaking. -thanks, - TJ I have a function that checks to see the number entered in a textfield and then, if greater than 1, will change a radio button from Single to Multiple and visa versa. The function is called from the textfield with an onkeyup="function()". The problem I am having is that it works in IE just fine, but in Firefox it doesn't seem to be doing anything. I'm not getting any errors and can't seem to see what is the problem. Google doesn't seem to be any help... Anyone have any ideas? Thanks! Hi, This problem has completely stumped me, was hoping from a bit of advice. I have used the code of my affiliate software to show my company logo. This code works in Firefox, but for some reason doesn't work in IE. The company who own the affiliate software have never seen this problem before and have been unable to assist. Not sure if it's a server problem? To see the problem have a look at logo at the top of my test website in firefox then IE. http://www.nctshop.co.uk/staging/ Here is a snippet of the code below. It is the line where it links to nctshopaffiliate which is where the problem lies. Thanks! Adrian Code: <table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td class="topnav1bgcolor">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><a href="../default.asp"><script language="JavaScript" type="text/javascript" src="http://www.nctshopaffiliate.co.uk/display.php?token=logo" alt="NCTSHOP" width="650" height="89" border="0"/></script></a></td>
<td align="right" valign="top">
<table width="223" border="0" cellpadding="0" cellspacing="0">
<tr><td height="5" colspan="5"><img src="images/clear.gif" alt="" style="width:1;height:1;border:0"></td></tr>
<tr><td colspan="5"> </td></tr>
<tr><td height="25" colspan="5"><img src="images/clear.gif" alt="" style="width:1;height:1;border:0"></td></tr>
<tr>
<td class="plaintext"><a title="View Basket" href="basket.asp"><img src="images/newcart_Img.gif" alt="View Basket" style="width:23;height:12;border:0"></a></td>
<td><img src="images/clear.gif" alt="" style="width:5;height:1;border:0"></td>
<td style="background-image:url(images/bkg_cartinfo.gif);height:21">
<table width="200" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td class="plaintext" align="center"><a title="View Basket" href="basket.asp"><span class="plaintext"><u>Items</u></span></a> <%=session("SL_BasketCount")%>
|
Sub Total <%=formatcurrency(session("SL_BasketSubTotal"))%></td>
</tr>
</table>
</td>
<td> </td>
<td><a class="topnav1" title="Checkout" href="<%=session("secureurl")%>custinfo.asp" ><u>Checkout</u></a></td>
</tr>
</table>
</td>
<td style="width:10"><img src="images/clear.gif" alt="" style="width:1;height:1;border:0"></td>
</tr>
</table>
</td>
</tr>
</table>
Hi, After spending hours trying out many different examples that supposedly work with IE and FF, I've decided to post here This is the code I'm using to catch the down arrow: Code: function is_int(event)
{
var Key = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if(Key==40) {
alert('down arrow');
}
}
And called using the following on the text input of a form field: Code: onKeyDown="is_int(event);" This works in IE but still not in Firefox (3.5.7). Surprised as it has the .which in there - I thought this is what FF needed? In IE online.php script was executed once, In Firefox didn't worked at all... Where is the problem? Here is my AJAX script: PHP Code: <script language="javascript" type="text/javascript"> <!-- // Get the HTTP Object function gethttpObject2(){ if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) return new XMLHttpRequest(); else { alert("Your browser does not support AJAX."); return null; } } // Change the value of the outputText field function setOutput(){ if(httpObject2.readyState == 4){ document.getElementById('online').innerHTML = httpObject2.responseText; } } // Implement business logic function doWork(){ httpObject2 = gethttpObject2(); if (httpObject2 != null) { httpObject2.open("GET", "../content/tables/tb_online.php", true); httpObject2.send(null); httpObject2.onreadystatechange = setOutput; } } setInterval(doWork, 10); var httpObject2 = null; //--> </script> <div id='online' ></div> This code works fine in IE but it won't in FF. The error console says topdiv.style and sidediv.style are 'undefined' This is the javascript: Code: function changeposition() {
topdiv = "document.getElementById('top')";
sidediv = "document.getElementById('side')";
if (document.scrolltop > 100) {
topdiv.style.position = "fixed";
topdiv.style.top = "-100px";
sidediv.style.position = "fixed";
sidediv.style.position = "35px";
} else {
topdiv.style.position = "absolute";
topdiv.style.top = "0px";
sidediv.style.position = "absolute";
sidediv.style.position = "135px";
}}
window.onscroll = changeposition();
and the HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="standardstyle.css"> <script type="text/javascript" src="menuposition.js"></script> </head> <body> <div class="top" id="top"> ... </div> <div class="sidebar" id="side"> ... </div> ... </body> </html> I'm using FF4 Hi Guys, I'm trying to do up a contact form that after a user submits the information, the drop down contact box will slide back up instead of redirecting to another page. The script works fine in Chrome and Safari, but Firefox and IE keeps redirecting to the php page. Hope someone can shed some light here, thanks! Html form: Code: <div class="left">
<!-- Login Form -->
<form class="clearfix" action="contactengine.php" name="cform" method="post">
<h4>Drop us a mail</h4>
<label class="grey" for="emailName">Name:</label>
<input class="field" type="text" name="emailName" id="emailName" value="" size="23" />
<label class="grey" for="emailFrom">Email Address:</label>
<input class="field" type="text" name="emailFrom" id="emailFrom" value="" size="23" />
<label class="grey" for="message">Message:</label>
<textarea type="text" name="message" id="message" size="23"></textarea>
<div class="clear"></div>
<input type="submit" rows="" cols="" name="submit" value="Submit" class="bt_register" />
<span id="messageSent">Message sent successfully!</span>
</form>
<script language="JavaScript" type="text/javascript">
//You should create the validator only after the definition of the HTML form
var frmvalidator = new Validator("cform");
frmvalidator.addValidation("emailName","req","Please enter your Name");
frmvalidator.addValidation("emailName","maxlen=20", "Max length for Name is 20");
frmvalidator.addValidation("emailFrom","maxlen=50", "Max length for email is 50");
frmvalidator.addValidation("emailFrom","req","Please enter your Email");
frmvalidator.addValidation("emailFrom","email","Please enter a valid email");
</script>
</div>
<div class="left right">
<!-- Register Form -->
<h4>Contact Details</h4>
<p class="grey"><b>XXX<br /></b>XXX<br />XXX<br />XXX</p>
<p class="grey">T: 999<br />F: 999</p>
<h5>Stalk Us</h5>
<a href="index.html"><img src="misc/fb.png" border="0" alt="Facebook" /></a> <a href="index.html"><img src="misc/twit.png" border="0" alt="Twitter" /></a>
</div>
</div>
</div>
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Hello there</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Contact Us</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
The Slider JS: Code: $(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Hey There | Contact us" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
//submission scripts
$('div#panel').submit( function(){
//statements to validate the form
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var email = document.getElementById('emailFrom');
if (!filter.test(emailFrom.value)) {
$('.email-missing').show();
} else {$('.email-missing').hide();}
if (document.cform.emailName.value == "") {
$('.name-missing').show();
} else {$('.name-missing').hide();}
if (document.cform.message.value == "") {
$('.message-missing').show();
} else {$('.message-missing').hide();}
if ((document.cform.emailName.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "")){
return false;
}
if ((document.cform.emailName.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) {
//hide the form
$('.div#panel').hide();
//show the loading bar
$('.loader').append($('.bar'));
$('.bar').css({display:'block'});
//send the ajax request
$.post('contactengine.php',{emailName:$('#emailName').val(),
emailFrom:$('#emailFrom').val(),
message:$('#message').val()},
//return the data
function(data){
//hide the graphic
$('.bar').css({display:'none'});
$('.loader').append(data);
});
//waits 2000, then closes the form and fades out
$("#messageSent").show("slow");
setTimeout('$("#toggle a").toggle(); $("div#panel").slideUp("slow")', 2000);
//stay on the page
return false;
}
});
});
The PHP Code: PHP Code: <?php $EmailFrom = "xxx@xxx.com"; $EmailTo = "xxx@xxx.com"; $Subject = Trim(stripslashes($_POST['Webmail'])); $Name = Trim(stripslashes($_POST['emailName'])); $Email = Trim(stripslashes($_POST['emailFrom'])); $Message = Trim(stripslashes($_POST['message'])); // validation $validationOK=true; if (!$validationOK) { print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; exit; } // prepare email body text $Body = ""; $Body .= "Name: "; $Body .= $Name; $Body .= "\n"; $Body .= "Email Adress: "; $Body .= $Email; $Body .= "\n"; $Body .= "Message: "; $Body .= $Message; $Body .= "\n"; // send email $success = mail($EmailTo, Webmail, $Body, "From: <$EmailFrom>"); // redirect to success page if ($success){ print "<meta http-equiv=\"refresh\" content=\"0;URL=success.html\">"; } else{ print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; } ?> Hey, I'm trying to write a script that makes it so that when using a screen width of 1280 or lower, Google shows one ad at the top of the page. With screen widths over 1280, it shows 2 ads along the side of the screen. I've checked it several times and I don't know what I've done wrong (but I'm also a beginner). The script works flawlessly in all versions of Firefox for both high and low res (I checked with FF 2.0, 3.0, 3.5, and 3.6) but in IE6 and IE8 while displaying almost correctly at the high resolution, it gets completely screwed up at the low resolution. Basically I'm just using Javascript to insert HTML comment tags around the ads that I don't want to appear for that resolution. Apparently it doesn't work in Opera, Chrome, or Safari either and the code doesn't validate as XHTML so there is definitely something wrong. Code:
<!-- Test run of Google AdSense -->
<!-- One ad floats left, one floats right, the rest of the body is center aligned in between (high res only) -->
<!-- There are 3 ads, scripting makes it so that 2 appear on the sides with a screen width above 1280 pixels, and below 1280 pixels just one appears across the top -->
<script type="text/javascript">
<!--
var skip1 = "<!--";
if ( screen.width <= 1280 )
{
document.write (skip1);
}
//-->
</script>
<div style=" float:left; font-size:7pt; color:#777; ">
Advertisement<br />
<script type="text/javascript"><!--
google_ad_client = "pub-9736870014804453";
/* 160x600, created 2/2/11, left side homepage */
google_ad_slot = "6021069285";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div style=" float:right; font-size:7pt; color:#777; ">
Advertisement<br />
<script type="text/javascript"><!--
google_ad_client = "pub-9736870014804453";
/* 160x600, created 2/2/11, homepage */
google_ad_slot = "3502793671";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<script type="text/javascript">
<!--
var skip2 = "-->";
if ( screen.width <= 1280 )
{
document.write (skip2);
}
//-->
</script>
<script type="text/javascript">
<!--
var skip3 = "<!--";
if ( screen.width > 1280 )
{
document.write (skip3);
}
//-->
</script>
<div style="font-size:7pt; color:#777;">
<center>
Advertisement<br /><br />
<script type="text/javascript"><!--
google_ad_client = "pub-9736870014804453";
/* low res top ad */
google_ad_slot = "4610054252";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
</div>
<script type="text/javascript">
<!--
var skip4 = "-->";
if ( screen.width > 1280 )
{
document.write (skip4);
}
//-->
</script>
<!-- End of Adsense side banners -->
Please help. This works fine in IE but will not work in FireFox: <iframe name="ad" id="rotator" src="about:blank" scrolling="no" framespacing="0" frameborder="0" marginwidth="0" marginheight="0" border="0" style="width:450px; height:300px"></iframe> <script language="JavaScript" type="text/javascript"><!-- // Pages to rotate var pages=new Array('http://www.newquaynet.com/rotating_pages/page1.htm', 'http://www.newquaynet.com/rotating_pages/page2.htm', 'http://www.newquaynet.com/rotating_pages/page3.htm'); // Rotation interval, in miliseconds (1000 = 1 second) var rint=15000; var currentpage=-1; function rotator(){ currentpage++; if(currentpage >= pages.length){ currentpage=0; } document.all.rotate.src=pages[currentpage]; setTimeout('rotator()', rint); } rotator(); //--></script> confused:hope its the right place to post a newbie here . but i have a problem with a firefox accepting a script that i wrote it works on exploer but not on firefox onclick="javascript:if (this.parentNode.parentNode.nextSibling.style.display !='block') this.parentNode.parentNode.nextSibling.style.display ='block'; else this.parentNode.parentNode.nextSibling.style.display ='none';" hope u can help me thx Hi, I've been trying to solve this problem for the past few hours and I'm at my wit's end. I have a script that runs through all the div elements on the page, and then if the div's background is a certain color, it increments a counter by 0.5 and then outputs the result into a separate div tag. This works flawlessly in IE, however I cannot get it to work in Firefox. The strange thing is, if I omit the loop and just use the colorToHex on one specific element in the divs array (ie. divs[2]) it works in Firefox. Any suggestions are greatly appreciated. Code: function hrsavailable() {
var divs = document.getElementsByTagName("div");
var srdjanhrs = -0.5;
for (var i=0;i<divs.length;i++){
if (colorToHex(divs[i].style.backgroundColor) == "#ffbb6e") {;
srdjanhrs = srdjanhrs + 0.5;
}
}
document.getElementById("srdjanhrs").firstChild.data = srdjanhrs;
}
function colorToHex(color) {
if (color.substr(0, 1) === '#') {
return color;
}
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
var red = parseInt(digits[2]);
var green = parseInt(digits[3]);
var blue = parseInt(digits[4]);
var rgb = blue | (green << 8) | (red << 16);
return digits[1] + '#' + rgb.toString(16);
}
Helo, I'm really hoping one of you JavaScript gurus can help me. I find this a bit difficult, but I'm sure you will find it easy. I wrote a script to detect the version of Windows that a visitor is using. It then loads a remote script based on the OS. You can see it in action by visiting my website http://www.xp-smoker.com and clicking on any link that takes you to another page. This script shows you an offer based on whether you are using XP, Vista or Windows 7. It works great in IE 8. No errors. It does not work at all in Firefox. But once again absolutely no errors. I'm using "onload" in the body tag of my pages like this: Code: <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="loadjs();"> The function is contained in a file that is called locally. Here is the function: Code: function loadjs()
{
//Create a 'script' element
var scrptE = document.createElement("script");
//Set 'type' and 'language' attribs
scrptE.setAttribute("type", "text/javascript");
scrptE.setAttribute("language", "JavaScript");
if (navigator.appVersion.indexOf("Windows NT 5.1")!=-1){
scrptE.setAttribute("src", "http://www.trialpay.com/js/pop_under/?c=62020ec");
}else if (navigator.appVersion.indexOf("Windows NT 6.0")!=-1){
scrptE.setAttribute("src", "http://www.trialpay.com/js/pop_under/?c=7ace1f3");
}else if (navigator.appVersion.indexOf("Windows NT 6.1")!=-1){
scrptE.setAttribute("src", "http://www.trialpay.com/js/pop_under/?c=85cfeba");
}
// create an object of the head element of current page
var hdEl = document.getElementsByTagName("head")[0];
//check for previously appended child
//(it ensures that each time the button is pressed it
// removes the previously loaded script element)
if (hdEl.childNodes.length > 1) {
hdEl.removeChild(hdEl.lastChild);
}
// Now add this new element to the head tag
hdEl.appendChild(scrptE);
}
I don't know if it is the function causing it or if the onload event in the body tag is the problem. I tried removing the onload event from the body tag and using this after the body tag: Code: <script>if(document.all)window.attachEvent("onload",loadjs());else window.addEventListener("load",loadjs(),false);</script>
But that didn't work in Firefox either. That gave me an error. Your help would be greatly appreciated. I hope I provided you with enough info. it works great in chrome and strangely enough internet explorer 8 but doesn't work in firefox Code: // Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false;
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = DRAG;
// Temporary variables to hold mouse x-y pos.s
// Main function to retrieve mouse x-y pos.s
var tempX = 0;
var tempY = 0;
function DRAG(e)
{
if (!IE)
{ // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
else
{ // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
}
// catch possible negative values in NS4
if (tempX < 0){ tempX = 0; }
if (tempY < 0){ tempY = 0; }
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
var w = getW();
var h = getH();
if(tempX > (w-32)){tempX = w-32;}
if(tempY > (h - 32)){tempY = h-32; }
var newX = tempX-id.offsetWidth;
var newY = tempY-header.offsetHeight-id.offsetHeight;
if(newX < 0){newX = 0; }
if(newY < 0){newY = 0; }
document.getElementById('myx').innerHTML = newX;
document.getElementById('myy').innerHTML = newY;
id.style.left = newX+"px";
id.style.top = newY+"px";
|
|||||||