|
JavaScript - Button Is Not Working
I've never had this problem in the past and I am now stumped. I've written a fairly long script to calculate numbers for a web based Diabetes calculator but for some reason the "Calculate" button does nothing when using Chrome, Opera or Safari for iOS. It does work when using IE, Firefox and Safari for PC. I've looked everywhere and found nothing but some references to an 'onclick' problem in Chrome. My problem is that the same method has always worked in the past and is still working in those scripts now so that can't be the issue. What is different about THIS button that is breaking it?
Button WORKS here (IE, Chrome, Firefox, Safari-PC & iOS & Opera): http://jdrinc.webatu.com/FICC.html But DOES NOT work here (Chrome, Safari-iOS & Opera): http://jdrinc.webatu.com/D-Calc.html The second link DOES work in IE, Firefox & Safari-PC. I don't see a difference in the method that I'm using in either of these. Does anyone know what I am doing wrong? Here is the html with the script that is NOT working: Code: <html>
<head>
<title>
D-Calc
</title>
<style type="text/css">
table
{
border:2px solid black;
border-collapse:collapse;
}
th
{
border:2px solid black;
border-collapse:collapse;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-weight: bold;
}
td
{
border:2px solid black;
border-collapse:collapse;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-weight: bold;
}
.inputlabel
{
background-color: #6CC417;
}
.outputlabel
{
background-color: #6698FF;
}
.inputbox
{
border:0px inset blue;
background-color: #FFFFFF;
border-color: #FFFFFF;
text-align: center;
font-weight: bold;
width: 100px;
}
.outputbox
{
border:0px inset blue;
background-color: #FFFFFF;
border-color: #FFFFFF;
text-align: center;
font-weight: bold;
width: 100px;
}
</style>
<script type="text/javascript">
function Calculate()
{
//input variables
var B01, B02, B03, B04, B05, B06, B07, B08, B09, B10, B11
//output variables
var B12, B13, B14, B15, B16, B17, B18, B19, B20, B21, B22, B23, B24, B25, B26
//correction sensitivity variable
var CSV
//new blood glucose
var NBG
//bloodsugar-carbohydrate ratio
var BCR
B01=eval(document.DCalcForm.B01.value);
B02=eval(document.DCalcForm.B02.value);
BCR=(B02/B01);
B03=eval(document.DCalcForm.B03.value);
B04=eval(document.DCalcForm.B04.value);
B05=eval(document.DCalcForm.B05.value);
B06=eval(document.DCalcForm.B06.value);
B07=eval(document.DCalcForm.B07.value);
B08=eval(document.DCalcForm.B08.value);
B09=eval(document.DCalcForm.B09.value);
B10=eval(document.DCalcForm.B10.value);
B11=eval(document.DCalcForm.B11.value);
B12=(B10*(B03/100));
B13=(B11*(B04/100));
B14=(B09+B12+B13);
B15=(B09);
B16=(B12+B13);
if (B07<(B05+(B06+1)) && B07>(B05-(B06+1)))
{
CSV=(0);
}
else if (B07>(B05+B06))
{
CSV=(B06);
}
else if (B07<(B05-B06))
{
CSV=(-1*B06);
}
if (CSV==0)
{
B17=0;
}
else
{
B17=((B07-(B05+CSV))/B02);
}
B18=((B12*(B03/100))/B01);
B19=((B13*(B04/100))/B01);
B20=(B09/B01);
if (CSV=0)
{
B21=((B18+B19+B20)-B08);
}
else
{
B21=((B17+B18+B19+B20)-B08);
}
B22=((B17+B20)-B08);
B23=(B18+B19);
if (B21==0)
{
B24=0;
}
else
{
B24=((B22/B21)*100);
}
if (B21==0)
{
B25=0;
}
else
{
B25=((B23/B21)*100);
}
NBG=(B07+((B09+B12+B13)*BCR));
if (B07<(B05+(B06+1)) && B07>(B05-(B06+1)))
{
CSV=(0);
}
else if (B07>(B05+B06))
{
CSV=(B06);
}
else if (B07<(B05-B06))
{
CSV=(-1*B06);
}
if (CSV==0)
{
B26=0;
}
else
{
B26=(((B05+CSV)-NBG)/BCR);
}
document.DCalcForm.B12.value=(Math.round(B12*100))/100 + ' g';
document.DCalcForm.B13.value=(Math.round(B13*100))/100 + ' g';
document.DCalcForm.B14.value=(Math.round(B14*100))/100 + ' g';
document.DCalcForm.B15.value=(Math.round(B15*100))/100 + ' g';
document.DCalcForm.B16.value=(Math.round(B16*100))/100 + ' g';
if (B17<0)
{
document.DCalcForm.B17.value='0 unit(s)';
}
else
{
document.DCalcForm.B17.value=(Math.round(B17*100))/100 + ' unit(s)';
}
if (B18<0)
{
document.DCalcForm.B18.value='0 unit(s)';
}
else
{
document.DCalcForm.B18.value=(Math.round(B18*100))/100 + ' unit(s)';
}
if (B19<0)
{
document.DCalcForm.B19.value='0 unit(s)';
}
else
{
document.DCalcForm.B19.value=(Math.round(B19*100))/100 + ' unit(s)';
}
if (B20<0)
{
document.DCalcForm.B20.value='0 unit(s)';
}
else
{
document.DCalcForm.B20.value=(Math.round(B20*100))/100 + ' unit(s)';
}
if (B21<0)
{
document.DCalcForm.B21.value='0 unit(s)';
}
else
{
document.DCalcForm.B21.value=(Math.round(B21*100))/100 + ' unit(s)';
}
if (B22<0)
{
document.DCalcForm.B22.value='0 unit(s)';
}
else
{
document.DCalcForm.B22.value=(Math.round(B22*100))/100 + ' unit(s)';
}
if (B23<0)
{
document.DCalcForm.B23.value='0 unit(s)';
}
else
{
document.DCalcForm.B23.value=(Math.round(B23*100))/100 + ' unit(s)';
}
if (B24>100)
{
document.DCalcForm.B24.value='100 %';
}
else if (B24<0)
{
document.DCalcForm.B24.value='0 %';
}
else
{
document.DCalcForm.B24.value=(Math.round(B24*100))/100 + ' %';
}
if (B25>100)
{
document.DCalcForm.B25.value='100 %';
}
else if (B25<0)
{
document.DCalcForm.B25.value='0 %';
}
else
{
document.DCalcForm.B25.value=(Math.round(B25*100))/100 + ' %';
}
if (B26<0)
{
document.DCalcForm.B26.value='0.00 g';
}
else
{
document.DCalcForm.B26.value=(Math.round(B26*100))/100 + ' g';
}
// document.write('B01 = '+B01+'<br>');
// document.write('B02 = '+B02+'<br>');
// document.write('B03 = '+B03+'<br>');
// document.write('B04 = '+B04+'<br>');
// document.write('B05 = '+B05+'<br>');
// document.write('B06 = '+B06+'<br>');
// document.write('B07 = '+B07+'<br>');
// document.write('B08 = '+B08+'<br>');
// document.write('B09 = '+B09+'<br>');
// document.write('B10 = '+B10+'<br>');
// document.write('B11 = '+B11+'<br>');
// document.write('B12 = '+B12+'<br>');
// document.write('B13 = '+B13+'<br>');
// document.write('B14 = '+B14+'<br>');
// document.write('B15 = '+B15+'<br>');
// document.write('B16 = '+B16+'<br>');
// document.write('B17 = '+B17+'<br>');
// document.write('B18 = '+B18+'<br>');
// document.write('B19 = '+B19+'<br>');
// document.write('B20 = '+B20+'<br>');
// document.write('B21 = '+B21+'<br>');
// document.write('B22 = '+B22+'<br>');
// document.write('B23 = '+B23+'<br>');
// document.write('B24 = '+B24+'<br>');
// document.write('B25 = '+B25+'<br>');
// document.write('B26 = '+B26+'<br>');
// document.write('BCR = '+BCR+'<br>');
// document.write('CSV = '+CSV+'<br>');
// document.write('NBG = '+NBG+'<br>');
}
</script>
</head>
<body>
<center>
<form name=DCalcForm>
<table name="table" id="table" class="table">
<tr name="01" id="01" class="">
<td name="A01" id="A01" class="inputlabel">
INSULIN/CARBOHYDRATE RATIO
</td>
<td name="B01" id="B01" class="">
<input name="B01" id="B01" class="inputbox" value="10" type="number">
</td>
<td name="C01" id="C01" class="">
</td>
</tr>
<tr name="02" id="02" class="">
<td name="A02" id="A02" class="inputlabel">
INSULIN/BG RATIO
</td>
<td name="B02" id="B02" class="">
<input name="B02" id="B02" class="inputbox" value="35" type="number">
</td>
<td name="C02" id="C02" class="">
</td>
</tr>
<tr name="03" id="03" class="">
<td name="A03" id="A03" class="inputlabel">
PROTEIN RATIO
</td>
<td name="B03" id="B03" class="">
<input name="B03" id="B03" class="inputbox" value="40" type="number">
</td>
<td name="C03" id="C03" class="">
</td>
</tr>
<tr name="04" id="04" class="">
<td name="A04" id="A04" class="inputlabel">
FAT RATIO
</td>
<td name="B04" id="B04" class="">
<input name="B04" id="B04" class="inputbox" value="10" type="number">
</td>
<td name="C04" id="C04" class="">
</td>
</tr>
<tr name="05" id="05" class="">
<td name="A05" id="A05" class="inputlabel">
TARGET BLOOD GLUCOSE
</td>
<td name="B05" id="B05" class="">
<input name="B05" id="B05" class="inputbox" value="100" type="number">
</td>
<td name="C05" id="C05" class="">
</td>
</tr>
<tr name="06" id="06" class="">
<td name="A06" id="A06" class="inputlabel">
CORRECTION RANGE/SENSITIVETY
</td>
<td name="B06" id="B06" class="">
<input name="B06" id="B06" class="inputbox" value="20" type="number">
</td>
<td name="C06" id="C06" class="">
</td>
</tr>
<tr name="07" id="07" class="">
<td name="A07" id="A07" class="inputlabel">
CURRENT BLOOD GLUCOSE
</td>
<td name="B07" id="B07" class="">
<input name="B07" id="B07" class="inputbox" value="100" type="number">
</td>
<td name="C07" id="C07" class="">
</td>
</tr>
<tr name="08" id="08" class="">
<td name="A08" id="A08" class="inputlabel">
INSULIN ON BOARD
</td>
<td name="B08" id="B08" class="">
<input name="B08" id="B08" class="inputbox" value="0" type="number">
</td>
<td name="C08" id="C08" class="">
</td>
</tr>
<tr name="09" id="09" class="">
<td name="A09" id="A09" class="inputlabel">
CARBOHYDRATES
</td>
<td name="B09" id="B09" class="">
<input name="B09" id="B09" class="inputbox" value="0" type="number">
</td>
<td name="C09" id="C09" class="">
</td>
</tr>
<tr name="10" id="10" class="">
<td name="A10" id="A10" class="inputlabel">
PROTEIN
</td>
<td name="B10" id="B10" class="">
<input name="B10" id="B10" class="inputbox" value="0" type="number">
</td>
<td name="C10" id="C10" class="">
</td>
</tr>
<tr name="11" id="11" class="">
<td name="A11" id="A11" class="inputlabel">
FAT
</td>
<td name="B11" id="B11" class="">
<input name="B11" id="B11" class="inputbox" value="0" type="number">
</td>
<td name="C11" id="C11" class="">
</td>
</tr>
<tr name="12" id="12" class="">
<td name="A12" id="A12" class="outputlabel">
CARBS FROM PROTEIN
</td>
<td name="B12" id="B12" class="">
<input name="B12" id="B12" class="outputbox" value="" type="number" readonly>
</td>
<td name="C12" id="C12" class="">
</td>
</tr>
<tr name="13" id="13" class="">
<td name="A13" id="A13" class="outputlabel">
CARBS FROM FAT
</td>
<td name="B13" id="B13" class="">
<input name="B13" id="B13" class="outputbox" value="" type="number" readonly>
</td>
<td name="C13" id="C13" class="">
</td>
</tr>
<tr name="14" id="14" class="">
<td name="A14" id="A14" class="outputlabel">
TOTAL CARBOHYDRATES
</td>
<td name="B14" id="B14" class="">
<input name="B14" id="B14" class="outputbox" value="" type="number" readonly>
</td>
<td name="C14" id="C14" class="">
</td>
</tr>
<tr name="15" id="15" class="">
<td name="A15" id="A15" class="outputlabel">
CARBS TO BOLUS NOW
</td>
<td name="B15" id="B15" class="">
<input name="B15" id="B15" class="outputbox" value="" type="number" readonly>
</td>
<td name="C15" id="C15" class="">
</td>
</tr>
<tr name="16" id="16" class="">
<td name="A16" id="A16" class="outputlabel">
CARBS FOR EXTENDED BOLUS
</td>
<td name="B16" id="B16" class="">
<input name="B16" id="B16" class="outputbox" value="" type="number" readonly>
</td>
<td name="C16" id="C16" class="">
</td>
</tr>
<tr name="17" id="17" class="">
<td name="A17" id="A17" class="outputlabel">
CORRECTION BOLUS
</td>
<td name="B17" id="B17" class="">
<input name="B17" id="B17" class="outputbox" value="" type="number" readonly>
</td>
<td name="C17" id="C17" class="">
</td>
</tr>
<tr name="18" id="18" class="">
<td name="A18" id="A18" class="outputlabel">
PROTEIN BOLUS
</td>
<td name="B18" id="B18" class="">
<input name="B18" id="B18" class="outputbox" value="" type="number" readonly>
</td>
<td name="C18" id="C18" class="">
</td>
</tr>
<tr name="19" id="19" class="">
<td name="A19" id="A19" class="outputlabel">
FAT BOLUS
</td>
<td name="B19" id="B19" class="">
<input name="B19" id="B19" class="outputbox" value="" type="number" readonly>
</td>
<td name="C19" id="C19" class="">
</td>
</tr>
<tr name="20" id="20" class="">
<td name="A20" id="A20" class="outputlabel">
CARB BOLUS
</td>
<td name="B20" id="B20" class="">
<input name="B20" id="B20" class="outputbox" value="" type="number" readonly>
</td>
<td name="C20" id="C20" class="">
</td>
</tr>
<tr name="21" id="21" class="">
<td name="A21" id="A21" class="outputlabel">
TOTAL BOLUS
</td>
<td name="B21" id="B21" class="">
<input name="B21" id="B21" class="outputbox" value="" type="number" readonly>
</td>
<td name="C21" id="C21" class="">
</td>
</tr>
<tr name="22" id="22" class="">
<td name="A22" id="A22" class="outputlabel">
UNITS TO DELIVER NOW
</td>
<td name="B22" id="B22" class="">
<input name="B22" id="B22" class="outputbox" value="" type="number" readonly>
</td>
<td name="C22" id="C22" class="">
</td>
</tr>
<tr name="23" id="23" class="">
<td name="A23" id="A23" class="outputlabel">
UNITS TO EXTEND
</td>
<td name="B23" id="B23" class="">
<input name="B23" id="B23" class="outputbox" value="" type="number" readonly>
</td>
<td name="C23" id="C23" class="">
</td>
</tr>
<tr name="24" id="24" class="">
<td name="A24" id="A24" class="outputlabel">
PERCENT TO DELIVER NOW
</td>
<td name="B24" id="B24" class="">
<input name="B24" id="B24" class="outputbox" value="" type="number" readonly>
</td>
<td name="C24" id="C24" class="">
</td>
</tr>
<tr name="25" id="25" class="">
<td name="A25" id="A25" class="outputlabel">
PERCENT TO EXTEND
</td>
<td name="B25" id="B25" class="">
<input name="B25" id="B25" class="outputbox" value="" type="number" readonly>
</td>
<td name="C25" id="C25" class="">
</td>
</tr>
<tr name="26" id="26" class="">
<td name="A26" id="A26" class="outputlabel">
MORE CARBS NEEDED
</td>
<td name="B26" id="B26" class="">
<input name="B26" id="B26" class="outputbox" value="" type="number" readonly>
</td>
<td name="C26" id="C26" class="">
</td>
</tr>
</table>
<br>
<input type="button" value="Calculate" name="CalculateButton" onclick="Calculate()">
</form>
</body>
</html>
P.S. I am by no means a professional and am aware that there might be better ways of doing this. I am still learning. Similar Tutorialshye every1, can someone checkout my code because it is not working.at first the form is working until i add reset button then i suddenly not working anymore.thank you for your help. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Radio Group Calculation</title>
<script type="text/javascript">
var brand=0;
function calc()
{
var form = document.forms.Calculator;
var bdpr = Number( getSelectedValue(form.elements.a) );
var bdft = Number( getSelectedValue(form.elements.b) );
var bdbs = Number( getSelectedValue(form.elements.c) );
var prft = Number( getSelectedValue(form.elements.d) );
var prbs = Number( getSelectedValue(form.elements.e) );
var ftbs = Number( getSelectedValue(form.elements.f) );
if ( isNaN(bdpr)||isNaN(bdft)||isNaN(bdbs)||isNaN(prft)||isNaN(prbs)||isNaN(ftbs) ){
alert("Please answer the question."); }
else{
brand=1+bdpr+bdft+bdbs;
price=1+1/bdpr+prft+prbs;
feature=1+1/bdft+1/prft+ftbs;
basic=1+1/bdbs+1/prbs+1/ftbs;
if(brand>price && brand>feature && brand>basic)
window.open('syg.html');
elseif(price>feature&&price>basic)
window.open('syg.html');
else(feature>basic)
window.open('syg.html');
}
}
function getSelectedValue(flds) {
var i = 0;
var len = flds.length;
while (i < len) {
if (flds[i].checked) {
return flds[i].value;
}
i++;
}
return "";
}
document.forms.Calculator.reset();
</script>
</head>
<body>
<br/><b>Please rank the functionality based on your preferences</b><br/><br />
<form name="Calculator" action="">
<label>Is brand important that price of a phone?</label><br />
<input name="a" type="radio" id="a_1" value="1">Not important<br />
<input name="a" type="radio" id="a_2" value="2">A little of important<br />
<input name="a" type="radio" id="a_3" value="3">Moderate important<br />
<input name="a" type="radio" id="a_4" value="4">Important<br />
<input name="a" type="radio" id="a_5" value="5">Very important<br />
<label >Is brand important than features of a phone?</label><br />
<input name="b" type="radio" id="b_1" value="1">Not important<br />
<input name="b" type="radio" id="b_2" value="2">A little of important<br />
<input name="b" type="radio" id="b_3" value="3">Moderate important<br />
<input name="b" type="radio" id="b_4" value="4">Important<br />
<input name="b" type="radio" id="b_5" value="5">Very important<br/>
<label >Is brand important than basic functions of a phone?</label><br />
<input name="c" type="radio" id="c_1" value="1">Not important<br />
<input name="c" type="radio" id="c_2" value="2">A little of important<br />
<input name="c" type="radio" id="c_3" value="3">Moderate important<br />
<input name="c" type="radio" id="c_4" value="4">Important<br />
<input name="c" type="radio" id="c_5" value="5">Very important<br />
<label >Is price important than features of a phone?</label><br />
<input name="d" type="radio" id="d_1" value="1">Not important<br />
<input name="d" type="radio" id="d_2" value="2">A little of important<br />
<input name="d" type="radio" id="d_3" value="3">Moderate important<br />
<input name="d" type="radio" id="d_4" value="4">Important<br />
<input name="d" type="radio" id="d_5" value="5">Very important<br />
<label >Is price important than basic function of a phone?</label><br />
<input name="e" type="radio" id="e_1" value="1">Not important<br />
<input name="e" type="radio" id="e_2" value="2">A little of important<br />
<input name="e" type="radio" id="e_3" value="3">Moderate important<br />
<input name="e" type="radio" id="e_4" value="4">Important<br />
<input name="e" type="radio" id="e_5" value="5">Very important<br />
<label >Is features important than basic func. of a phone?</label><br /></td>
<input name="f" type="radio" id="f_1" value="1"> Not important<br />
<input name="f" type="radio" id="f_2" value="2">A little of important<br />
<input name="f" type="radio" id="f_3" value="3">Moderate important<br />
<input name="f" type="radio" id="f_4" value="4">Important<br />
<input name="f" type="radio" id="f_5" value="5">Very important<br />
</form>
<input type="button" onclick="calc()" value="Next" />
<input type="reset" value="Clear">
</body>
</html>
I know it's a cardinal sun, but I have background music on a sub site for my company. I need to be able to turn it on and off. It doesnt seem to work. Can anyone take a second to look at my code and see what might be the issue? Code: <script type="text/javascript">
function stop() {
document.getElementById("music").src = "";
}
</script>
Code: <a href="javascript:stop()" > <img name="_stp_gfx" src="images/_stp_gfx.jpg" width="121" height="55" border="0" id="_stp_gfx" alt="" /> </a> Code: <embed name="music" src="_media/12_8_media.mp3" id="music" autostart="false" loop="false" hidden="true"> Thanks for any help. I have a button that works fine in every browser EXCEPT IE8, and I can't seem to figure out why, I would assume its a Jvascript issue, here's the code, any help would be great thanks guys... THE button that doesn't work in IE is the one with the value "Proceed to your order" at the bottom, the other two, delete and recalculate work fine.??? Code: <form action="/cart" method="post" id="form">
<table width="100%" cellspacing="0" cellpadding="0" style="margin-top:30px">
<thead class="tableTitle"><tr>
<td width="20"><!--<input type="checkbox" value="" checked="" onclick="checkAll(this)" />--></td>
<td>Title</td>
<td>Quantity</td>
<td>Price</td>
</tr></thead><tbody class="tableBody">
<?foreach ($goods as $k => $v){$randId = randId();?>
<tr>
<td><input type="checkbox" name="deleteCheckbox[]" class="checkboxes" value="<?=$v['id']?>" /></td>
<td width="400"><strong><?=$v['title']?></strong><br />
Color: <select onchange="updateExtras('color', <?=$k?>, this.value)" class="checkMe">
<option value="0">Specify color</option>
<?if (count($v['colors'])) foreach ($v['colors'] as $colorK => $colorV){?>
<option value="<?=$colorV['id']?>" <?if ($colorV['id'] == $v['colorId']){?>selected="selected"<?}?>><?=$colorV['item']?></option>
<?}?>
</select>
Size:<select onchange="updateExtras('size', <?=$k?>, this.value)" class="checkMe">
<option value="0">Specify size</option>
<?if (count($v['sizes'])) foreach ($v['sizes'] as $colorK => $colorV){?>
<option value="<?=$colorV['id']?>" <?if ($colorV['id'] == $v['sizeId']){?>selected="selected"<?}?>><?=$colorV['item']?></option>
<?}?>
</select>
<?if ($_SESSION['cartDetails'][$v['id']]['size']){?>
<div style="font-size:0.9em; margin-top:5px"><strong>Size</strong>: <?=$_SESSION['cartDetails'][$v['id']]['size']?></div>
<?}?>
<?if ($_SESSION['cartDetails'][$v['id']]['color']){?>
<strong>Color</strong>: <?=$_SESSION['cartDetails'][$v['id']]['color']?><?}?>
</td>
<td width="100"><input type="text" value="<?=$v['q']?>" size="5" name="ammounts[]" /></td>
<td>$<span id="<?=$randId?>"><?=$v['totalPrice']?></span> CAD<br /><span style="color:#ccc">($<?=$v['price']?> per each)</span></td>
</tr>
<?}?>
<tr class="totalPrice">
<td></td>
<td width="400" style="font-size:1em; font-style:italic">Total price</td>
<td width="100"></td>
<td style="font-size:1em; font-style:italic">$<span id="totalPriceHere"><?=$totalPrice?></span> CAD</td>
</tr>
</tbody>
<tfoot class="tableFoot"><tr><td colspan="4"></td></tr></tfoot>
</table>
<div style="margin-top:10px;">
<input type="submit" value="Delete selected" id="deleteButton" class="button left" />
<a href="/cart/proceed" onclick="
var stop = false;
$('.checkMe').each(function(){
if ($(this).attr('value') == 0) {stop = true}
return
})
if (stop) {
$('#alert').html('Choose colors and sizes for each item to proceed!');
return false
}
return true
"><input type="button" value="Proceed to your order" class="button right" /></a>
<a href="#" onclick="$('#form').attr('action', '/cart/recalc'); $('#form').submit()"><input type="button" value="Recalculate" style="margin-right:10px" class="button right" /></a>
I'm implementing that stupid Cookie Law thing here in the UK, but I can't get the popup to close on click in IE. Every other browser is working fine. Any one know the fix? Code: <style type="text/css">
<!--
#eucookielaw { display:none }
#note {
position: fixed;
z-index: 101;
bottom: 0;
left: 0;
right: 0;
background: #98FB98;
text-align: center;
vertical-align: middle;
color: #2C2C2C;
line-height: 2.5;
overflow: hidden;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}
#note a {
color: #2C2C2C;
}
#note img {
vertical-align: middle;
}
#close {
cursor: pointer;
}
@-webkit-keyframes slideDown {
0%, 100% { -webkit-transform: translateY(-50px); }
10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
0%, 100% { -moz-transform: translateY(-50px); }
10%, 90% { -moz-transform: translateY(0px); }
}
.cssanimations.csstransforms #note {
-webkit-transform: translateY(-50px);
-webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
-moz-transform: translateY(-50px);
-moz-animation: slideDown 2.5s 1.0s 1 ease forwards;
}
.cssanimations.csstransforms #close {
display: none;
}
-->
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function SetCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+";path=/"+((expiredays==null) ? "" : ";expires="+exdate.toUTCString())
}
</script>
<div id="eucookielaw" >
<div id="note">
<img src="/images/cookie_sm.png" alt="Cookie" border="0"> This Site Uses Cookies. :: <a rel="nofollow" href="/terms.php">Learn More</a> :: <a id="close"><u>Close this Message</u> <img src="/images/close_sm.png" alt="Close" border="0"></a>
</div>
<script>
close = document.getElementById("close");
close.addEventListener('click', function() {
note = document.getElementById("note");
note.style.display = 'none';
}, false);
</script>
</div>
<script type="text/javascript">
$("#eucookielaw").show();
SetCookie('eucookie','eucookie',365*10)
</script>
Example he No Claims Discount Insurance | Car, Home, Bike and Health No Claims Bonuses So, I have this calculator function I made to do some simple math and output the solution in a field on a form. I had it working great until I introduced a radio button. There are no errors and the total is still outputted but the number is off and if I change the radio to the other option it doesn't change the total. Here is my code, I am sure I am doing something wrong, just can't figure it out. Thanks to all in advance! Code: function calculateBudget()
{
var i;
var list = 0;
var listcost = document.getElementsByName('form[listcost]');
var totalBudget = document.getElementById('TotalBudget').value;
var postage = document.getElementById('Postage').value;
var printing = document.getElementById('Printing').value;
var uses = document.getElementById('Uses').value;
var totalRecords = document.getElementById('TotalRecords');
for (var i = 0; i < listcost.length; i++) {
if (listcost[i].checked) {
if (listcost[i] == "Single") {
list = 0.10;
}
else {
list = 0.13;
}
}
}
totalBudget = parseFloat(totalBudget);
list = parseFloat(list);
postage = parseFloat(postage);
printing = parseFloat(printing);
uses = parseFloat(uses);
var result1 = postage + printing;
var result2 = result1 * uses + list;
var result3 = list / result2;
var result4 = totalBudget * result3;
totalRecords.value = 0;
totalRecords.value = parseInt(totalRecords.value);
totalRecords.value = Math.round(parseInt(totalRecords.value) + result4 / list) * 1/1;
}
I read that you don't allow homework assignments to be posted, but this is only one small section of the assignment (1 page of 5), and I have a migraine, and I am utterly hopeless and lost (ha)... I was wondering if there was any errors you could point out to me that would explain why the button isn't doing ANYTHING (i.e. not calculating the sum, average, or grade) when i click it. I'm new to js so I'm sure it could be pretty much any n00b error in the function code. But like I said any help would be greatly appreciated... Code: <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link href="5A.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript">
function DisplayGrades()
{ var aNum= 1* document.getElementById("txtaNum").value;
var bNum= 1* document.getElementById("txtbNum").value;
var Avg = (aNum+bNum)/2; document.getElementById("txtAvg").value=Avg;
var Sum= aNum+bNum; document.getElementById("txtSum").value=Sum;
var alphaGr= document.getElementbyID("txtalphaGr").value=alphaGr;
if (Avg <= 60)
alphaGr="F";
if (Avg>60 && Avg <= 70)
alphaGr="D";
if (Avg>70 && Avg <= 80)
alphaGr="C";
if (Avg>80 && Avg <=90)
alphaGr="B";
if (Avg>90 && Avg <=100)
alphaGr="A";}
</script>
</head>
<body>
<div id="wrapper">
<div id="interact">
Enter your grade for Test 1: <input type="text" id=txtaNum" class="controls" size="10" /> <br />
Enter your grade for Test 2: <input type="text" id=txtbNum" class="controls" size="10" /> <br />
<input type="button" id="btnDisplayGrades" value="Display Grades" onclick="DisplayGrades();" />
<hr/>
Sum of Your Grades: <input type="text" id="txtSum" class="controls" size="10" readonly="readonly" /> <br/>
Average Grade: <input type="text" id="textAvg" class="controls" size="10" readonly="readonly" /> <br />
Alpha Grade: <input type="text" id="txtalphaGr" class="controls" size="10" readonly="readonly" />
</div>
</div>
</body>
</html>
Title explains it really. The button I am using working perfecting in FireFox and Chrome but not in Internet explorer. (Yes I know someone that actually uses IE that pointed this out to me) The rest of the code works fine but just not the reset button I have. Something I have been needing to do is make the code call my images differently by putting them in an array so I don't mess this the sources of my images like I sloppily am here, but I am not sure if that will actually fix the problem I am have. The checkbox should both uncheck the box(if checked) AND change the picture but it only unchecks the box. Here is the relevant code let me know if you want me to post the whole thing. Code: function reset(){
cb1.checked=false;
document.goodAfternoon.src=goodAfternoonFinal.src;
}
Code: "Check" me out;) <input type="checkbox" id="cb1" onClick="validate()" /> <img src="Good Afternoon.gif" name="goodAfternoon"> <input type="button" id="cb2" value="RESET" onClick="reset()"/> Code: Quote: Code: Quote: Code: Quote: can somebody please tell me what need done. Everything is working fine except for the button created in javascript that is in the second window which is to open the third window. Thanks. Hey guys. This is vague because I dont know what exactly to tell you but please reply with me so I can fix this. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS Hey guys. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS Hi, I am not entirely sure what I am doing wrong here, and I have been looking at this for ages, so apologies in advance if I have become so bleary eyed I can't see something simple. I use php to create buttons based on values pulled for a table. The problem I have is when you click on the first button the javascript function works great, when you click on the next button you get the same output even though it should be different results. I am working in ff and I can see on my firebug console that the javascript function is being called, but it is not passing the new value of the second or third button, it just keeps repassing the value of the first button. So not entirely sure where I am going wrong here. My page is: Code: <script type="text/javascript">
function loadXMLDoc2(File,ID,Msg){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
<head>
<body>
<?php
$con = mysql_connect("localhost","user","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mydb", $con);
$result = mysql_query("SELECT DISTINCT theme FROM goods WHERE category='{$_POST['category']}'
ORDER BY theme DESC");
while($row = mysql_fetch_array($result)){
echo '<input type="text" class="hidden" name="theme" id="theme" value="' . $row['theme'] . '" ><input type="button" class="button3" name="product" id="product" value="' . $row['product'] . '" onClick="loadXMLDoc2(\'getShow.php\',\'txtHint\',\'theme=\'+encodeURI(document.getElementById(\'rtheme\').value))" > ';
}
echo '<br /><br />
<div id="txtHint"><div>
<br />
<br />';
mysql_close($con);
?>
And getShow.php produces a table with a list of product images, names and prices, based on theme. So basically not sure where I am going wrong here? i'm still a relative noob and this has me stuck - i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is - protected function getToolbar() { $options = array(); $user = JFactory::getUser(); $create_ms = $user->authorise('core.create', 'com_pfmilestones'); $create_task = $user->authorise('core.create', 'com_pftasks'); $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok')); item used as template is id=8 any help or suggestions would be greatly appreciated.. i got javascripts button : Code: <input type="button" value="select" onClick="document.getElementById('input').select()" />
how can i transform "button" to image button (gif) I have 4 rows in a table. Each row consist of 4 radio buttons. Each radio button per row has different values in it but has the same name (group) ex: <input type="radio" name="a" value="1"> <input type="radio" name="a" value="2"> <input type="radio" name="a" value="3"> <input type="radio" name="a" value="4"> <input type="radio" name="b" value="1"> <input type="radio" name="b" value="2"> <input type="radio" name="b" value="3"> <input type="radio" name="b" value="4"> and so on.. If I click radio button A with value 2, I want to output the total at the bottom as "2".. Also, if I click radio button B with value 3, I want to output the total of A and B as 5 and so on.. How can I automatically calculate the answer based on which radio button was click? update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery Ok, here's the page as it is right now: http://www.crackin.com/dev/index.php The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/ The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/ And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images. I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing... First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine. Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing. Thanks for any help. Hi All, I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things. On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below. *working* link http://pics.boasbysatyra.com/access/spiders.php This one only works in FF, and the clip area is offset badly. Here is the template for the zc code: Code: <div class="photo" style="float: left; padding: 4px;">
<div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
And the JS for the page: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(function() {
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
//return false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
}
$(document).ready(function() {
initMenu();
});
Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area! http://jb.boasbysatyra.com/forum-pic...cs/nature.html Code: div class="photo" style="float: left; margin: 4px;">
<div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
</div>
On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking... Here is the JS: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
$(document).ready(function() {
$(".dim img").fadeTo("slow", 0.65);
$(".dim img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
});
$('#mainContent').hide().fadeIn(1200);
//When page loads...
$(".tab_content").hide(); //Hide all content
// $("ul.tabs li:first").addClass("active").show(); //Activate first tab
// $(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
(function($) {
$(document).ready(function(){
$('.menu1').ptMenu();
$('.menu2').ptMenu({vertical:true});
});
})(jQuery);
I have taken a look at this for a few days and tried many things with no luck, any help is appreciated. Thanks! I hope I have this post in the right place! Any help would be very much appreciated... I have a feature on my website that allows users to choose the website background (using alternate css sheets) and then uses an externally linked javascript file to store the background choice as a cookie so it is consistent throughout the website. This works perfectly locally (i.e. when previewing my website on my computer) but now it is uploaded to my host it doesn't appear to be working. (with the same browser) My javascript is he http://www. b r p - e n v .com/javascript/backgroundchange.js (with no spaces) The website that the javascript file is linked to is http://www. b r p - e n v .com (with no spaces) In the head I have: <script type="text/javascript" src="../javascript/backgroundchange.js"></script> ...then I have: <body onload="set_style_from_cookie()"> ...and for users to choose which background: <form> <input type="image" src="../images/white-background-thumb.jpg" onclick="switch_style('bg1');return false;" name="theme" value="White" id="bg1"> etc... </form> My problem is: The background reverts back to the default when moving to a different page. This would indicate that the background choice is not being saved in cookies. But this works locally! I have tried putting the javascript directly onto each page but I still had the same problem. I hope someone can help, I will be so grateful if I can get this to work. Many thanks indeed! 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 I have a usercontrol which get inputs from the user and show the slideshows. I have added jquery.js and jqfancytransitions.js to the control. when i apply the effects dynamically it is working on local iis but the same coding is not working on iis server. The link for the page is http://www.gloriatech.com/slideshow.aspx . Actually it display the images but no effects are applied. I also checked the js files, it is in right path only.When i checked this page in firebug , it shows the error which is " Sys is undefined". I dont know how to solve it. Can anyone help me? Thanx in advance. i am trying to make a button which is a .gif that will change when a mouse over occurs and a animation will occur when click then will relocate to a new page but i am getting multiple images at the same time pleas help. Code: <html>
<body>
<img src="Jepordy/Fla files/Button set 1.gif" >
<img name="jsbutton" src="Jepordy/Fla files/Button set 1.gif" width="550" height="400" border="0" alt="javascript button">
<SCRIPT language="JavaScript">
var myimgobj = document.images["jsbutton"];
</SCRIPT>
<A href="#" onMouseOver="return changeImage()" ><img
name="jsbutton" src="Jepordy/Fla files/Button mouse over.gif" width="550" height="400" border="0"
alt="javascript button"></A>
<SCRIPT language="JavaScript">
function changeImage()
{
document.images["jsbutton"].src= "C:\Documents and Settings\fus10n\Desktop\Jepordy\Fla files\Button mouse over.gif";
return true;
}
</SCRIPT>
<A href="#" onMouseOver="return changeImage()" onMouseOutwidth="550" height="400" border="0" alt="javascript button"= "return changeImageBack()"
onMouseDown="return handleMDown()" onMouseUp="return handleMUp()"
><img
name="jsbutton" src="Jepordy/Fla files/Button set 1.gif" width="550" height="400" border="0"
alt="javascript button"></A>
<SCRIPT language="JavaScript">
function changeImage()
{
document.images["jsbutton"].src= "C:\Documents and Settings\fus10n\Desktop\Jepordy\Fla files\Button set 1.gif";
return true;
}
function changeImageBack()
{
document.images["jsbutton"].src = "C:\Documents and Settings\fus10n\Desktop\Jepordy\Fla files\Button set 1.gif";
return true;
}
function handleMDown()
{
document.images["jsbutton"].src = "C:\Documents and Settings\fus10n\Desktop\Jepordy\Fla files\Button set 1.gif";
return true;
}
function handleMUp()
{
changeImage();
return true;
}
</SCRIPT>
<A href="QUESTION LOCATION FOR THIS BUTTON GOES HERE!"
onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()"
onMouseUp="return handleMUp()">
<A href="http://www.javascript-coder.com/"
onMouseOver="return changeImage()"
onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()"
onMouseUp="return handleMUp()"
><img
name="jsbutton" src="Jepordy/Fla files/Button mouse over.gif" width="550" height="400" border="0"
alt="javascript button"></A>
</body>
</html>
|
|||||||