...

View Full Version : Help with column layout and design



ColinMills
02-16-2012, 01:21 AM
Hi I have managed to create a javascript calculator as below and basically I want the text and input boxes for the four lines above the calculate button to be dispalyed into 3 column's lining up with each other, also the input boxes I think would look better if they were all the same size, I would also like it to look a bit more professional and would be good if it could all be displayed with in a coloured framed box.

Hope that explains things enough



<html>
<head>

</head>
<body>
<form name="myform">
<h1>Electricity Saving Calculator</h1>
Quantity of Lamps (max. 999): <input type="text" name="qty" onkeyup="if(this.value>999){this.value=999}"/><br>
<br>
Hours on per day mon-fri <select name="hpwd">
<option>Select</option>
</select>
Saturday <select name="hpsa">
<option>Select</option>
</select>
Sunday <select name="hpsu">
<option>Select</option>
</select><br>
Weeks closed per year (max 52): <input type="text" name="wcpy" onkeyup="if(this.value>52){this.value=52}"/><br>
<br>
Electricity Rate (in Pence per kWh): <input type="text" name="kwH" onblur="if(this.value<5.5){this.value=5.5} if(this.value>15.5){this.value=15.5}"/><br>
<br>
Current Lamp Replacement Lamp<br>
Current Lamp <select name="curr">
<option>Select</option>
<option value=60>GLS 60w Lamp</option>
<option value=20>GU10 PAR16 20w</option>
<option value=35>GU10 PAR16 35w</option>
<option value=50>GU10 PAR16 50w</option>
</select>
Replacement Lamp <select name="repl">
<option>Select</option>
<option value=1>GU10 PAR16 LED 1w</option>
<option value=3>GU10 PAR16 LED 3w</option>
<option value=4>GU10 PAR16 LED 4w</option>
<option value=5>GU10 PAR16 LED 5w</option>
</select>
<br>
Lifetime <select name="currll">
<option>Select</option>
<option value=2000>2,000 Hours</option>
<option value=3000>3,000 Hours</option>
<option value=4000>4,000 Hours</option>
<option value=5000>5,000 Hours</option>
</select>
Life <select name="replll">
<option>Select</option>
<option value=20000>20,000 Hours</option>
<option value=30000>30,000 Hours</option>
<option value=35000>35,000 Hours</option>
<option value=35000>40,000 Hours</option>
<option value=40000>50,000 Hours</option>
</select>
<br>
Cost <input type="text" name="curlc" onkeyup="if(this.value>999){this.value=999}"/>
Cost <input type="text" name="replc" onkeyup="if(this.value>999){this.value=999}"/>
<br>
<br>
<input type="button" value="Calculate Costs" onclick="calcSavs()"/>
</form>
<div id="curcalc"></div>
<div id="repcalc"></div>
<div id="savcalc"></div><br>
<div id="hrscalc"></div>
<div id="currll1ycalc"></div>
<div id="currll2ycalc"></div>
<div id="currll3ycalc"></div>

<script type="text/javascript">
var theform=document.myform;

for (var i = 1; i < 25; i++) {
theform.hpwd.options[i]=new Option(i,i)
}

for (var i = 1; i < 25; i++) {
theform.hpsa.options[i]=new Option(i,i)
}

for (var i = 1; i < 25; i++) {
theform.hpsu.options[i]=new Option(i,i)
}

function calcSavs(){
tqty=Number(theform.qty.value);
thpwd=Number(theform.hpwd.options[theform.hpwd.selectedIndex].value);
thpsa=Number(theform.hpsa.options[theform.hpsa.selectedIndex].value);
thpsu=Number(theform.hpsu.options[theform.hpsu.selectedIndex].value);
tcurrll=Number(theform.currll.options[theform.currll.selectedIndex].value);
tkwh=Number(theform.kwH.value);
twcpy=Number(theform.wcpy.value);
current=Number(theform.curr.options[theform.curr.selectedIndex].value);
replamp=Number(theform.repl.options[theform.repl.selectedIndex].value);
hrs=((thpwd*5)+thpsa+thpsu)*(52-twcpy)+thpwd
curres=((current/1000)*(tkwh/100))*hrs*tqty
repres=((replamp/1000)*(tkwh/100))*hrs*tqty
currll1y=(hrs*1)/tcurrll
currll2y=(hrs*2)/tcurrll
currll3y=(hrs*3)/tcurrll
savres=curres-repres
if (isNaN(repres)){
alert("please ensure you have selected from all lists and only entered numbers in fields");
return;
} else{
document.getElementById("curcalc").innerHTML="Current Lamp Electricity Cost per Year "+curres.toFixed(2)
document.getElementById("repcalc").innerHTML="Replacement Lamp Electricity Cost per Year "+repres.toFixed(2)
document.getElementById("hrscalc").innerHTML="Lamp Hours per Year is "+hrs.toFixed(2)
document.getElementById("currll1ycalc").innerHTML="Lamp Replaced Over 1 Year "+currll1y.toFixed(2)
document.getElementById("currll2ycalc").innerHTML="Lamp Replaced Over 2 Years "+currll2y.toFixed(2)
document.getElementById("currll3ycalc").innerHTML="Lamp Replaced Over 3 Years "+currll3y.toFixed(2)
document.getElementById("savcalc").innerHTML="Saving Per Year is "+savres.toFixed(2)

}
}
</script>

</body>
</html>

ColinMills
02-20-2012, 11:54 PM
Hi I am new to this and want to make a javascript calc I have look a bit more professional, by putting it into some sort of outlined box and lining up columns.

Can anyone help or have have any tips.

Regards
Colin

ColinMills
02-21-2012, 05:15 PM
How do I delete this thread?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum