Thought I had this calculator done. It looked awesome, until I viewed it in IE. Can you guys take a look and let me know why it's all kinds of screwed up? Look at it in IE and in another browser for comparison. Just scroll down to "Payment Calculator" click here
I'm utilizing jQuery UI Radio Buttons. So, a lot of the styling below is to fight what comes from the jQuery library.
Thanks for any help in advance.
<script>
$(document).ready(function() {
$( "#interest_rate, #amount, #payments" ).buttonset();
$('#amount > input, #interest_rate > input, #payments > input').on("click", function() {
if ($("#interest_rate > input:checked").attr("id") == "weekly") {
var numOfPayments = 32;
$('#pmt_freq').html('WEEKLY PAYMENT<sup>2</sup><div class="triangle-dwn">');
} else if ($("#interest_rate > input:checked").attr("id") == "two_weeks") {
var numOfPayments = 15;
$('#pmt_freq').html('BI-WEEKLY PAYMENT<sup>2</sup><div class="triangle-dwn">');
} else if ($("#interest_rate > input:checked").attr("id") == "semi_monthly") {
var numOfPayments = 16;
$('#pmt_freq').html('SEMI-MONTHLY PAYMENT<sup>2</sup><div class="triangle-dwn">');
} else if ($("#interest_rate > input:checked").attr("id") == "monthly") {
var numOfPayments = 8;
$('#pmt_freq').html('MONTHLY PAYMENT<sup>2</sup><div class="triangle-dwn">');
}
if ($('#payments > input:checked').val() == "bronze") {
$('#weekly').val(.0569);
$('#two_weeks').val(.1138);
$('#semi_monthly').val(.1233);
$('#monthly').val(.2467);
} else if ($('#payments > input:checked').val() == "silver") {
$('#weekly').val(.0531);
$('#two_weeks').val(.1062);
$('#semi_monthly').val(.1150);
$('#monthly').val(.23);
} else if ($('#payments > input:checked').val() == "gold") {
$('#weekly').val(.0492);
$('#two_weeks').val(.0985);
$('#semi_monthly').val(.1067);
$('#monthly').val(.2133);
} else if ($('#payments > input:checked').val() == "platinum") {
$('#weekly').val(.0454);
$('#two_weeks').val(.0908);
$('#semi_monthly').val(.0983);
$('#monthly').val(.1967);
} else {
$('#weekly').val(.0404);
$('#two_weeks').val(.0808);
$('#semi_monthly').val(.0875);
$('#monthly').val(.175);
}
var amount = ($('#amount > input:checked').val() );
var interest_rate = ($('#interest_rate > input:checked').val() );
var interest_rate_plus = +1 + +interest_rate;
var interRate_numOfPay = Math.pow(interest_rate_plus, numOfPayments);
var averagePayments = ( interest_rate * amount * interRate_numOfPay) / (interRate_numOfPay - 1 );
var totalPaid = averagePayments * numOfPayments;
var fees = totalPaid - amount;
$('#cash_advance').html("$" + amount);
$('#total_fees').html("$" + fees.toFixed(2));
$('#average_payments').html("$" + averagePayments.toFixed(2));
});
});
</script>
Here's the html:
<div class="calculator-container">
<h2>PAYMENT CALCULATOR</h2>
<form>
<div id="payments">
<label class="calc-descs first"><span>1</span>MEMBERSHIP LEVEL</label>
<input type="radio" id="bronze" name="radio" value="bronze" checked="checked"><label for="bronze">bronze</label>
<input type="radio" id="silver" name="radio" value="silver"><label for="silver">silver</label>
<input type="radio" id="gold" name="radio" value="gold"><label for="gold">gold</label>
<input type="radio" id="platinum" name="radio" value="platinum"><label for="platinum">platinum</label>
<input type="radio" id="premier" name="radio" value="premier"><label for="premier">premier</label>
</div>
</form>
<form>
<div id="interest_rate">
<label class="calc-descs second"><span>2</span>PAY FREQUENCY</label>
<input type="radio" id="weekly" name="radio"><label for="weekly">weekly</label>
<input type="radio" id="two_weeks" name="radio" checked="checked"><label for="two_weeks">every two weeks</label>
<input type="radio" id="semi_monthly" name="radio"><label for="semi_monthly">twice a month</label>
<input type="radio" id="monthly" name="radio"><label for="monthly">monthly</label>
</div>
</form>
<form>
<div id="amount">
<label class="calc-descs third"><span>3</span>LOAN AMOUNT</label>
<input type="radio" id="300" name="radio" value="300.00"><label for="300">$300</label>
<input type="radio" id="500" name="radio" value="500.00"><label for="500">$500</label>
<input type="radio" id="750" name="radio" value="750.00" checked="checked"><label for="750">$750</label>
<input type="radio" id="1000" name="radio" value="1000.00"><label for="1000">$1000</label>
<input type="radio" id="1200" name="radio" value="1200.00"><label for="1200">$1200</label>
</div>
</form>
<div id="calc-filler"></div><div class="total-box">LOAN AMOUNT<div class="triangle-dwn"></div></div><div class="total-box">INTEREST + FEES <sup>1</sup><div class="triangle-dwn"></div></div><div id="pmt_freq" class="total-box">BI-WEEKLY PAYMENT <sup>2</sup><div class="triangle-dwn"></div></div><br />
<div id="loan_totals"><label>ESTIMATED LOAN COST</label></div><div id="cash_advance">$750.00</div><div id="total_fees">$847.44</div><div id="average_payments">$106.50</div>
<div class="calc-disclaimer">Calculator defaults loan life base on payment cycle chosen. <sup>1</sup> Calculation is an estimate, your loan cost may vary. <sup>2</sup> Payment may vary.</div>
</div>
And the CSS:
.calculator-container { color: #949599; width: 825px; margin: 0 auto; }
.calculator-container h2 { color: #949599; margin-bottom: 30px; }
.ui-buttonset .ui-button { margin: initial }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: initial; border: 2px solid #949599; border-radius: 6px; color: #949599; padding: 11px 22px; line-height: 44px; text-align: center; }
#payments label { padding: 11px 28px;}
#payments label:first-child { padding: 0; }
#amount label { padding: 11px 30px; }
#amount label:first-child { padding: 0; }
.ui-state-active, .ui-state-focus { background: #F15A2B; border: 2px solid #f15A2B; outline: none; color: #fff; }
#interest_rate, #amount, #payments { padding: 1px; margin-bottom: 25px; width: auto; }
#loan_totals { height: 46px; width: 220px; line-height: 46px; float: left; text-align: center; padding-right: 10px; clear: both; }
#cash_advance, #total_fees, #average_payments { background: #F15A2B; width: 150px; height: 46px; line-height: 46px; margin-right: 48px; margin-bottom: 25px; border-radius: 6px; color: #fff; text-align: center; font-size: 1.3em; display: block; float: left; border: 2px solid #fff; -moz-box-shadow: 0 0 0 6px #F15A2B; -webkit-box-shadow: 0 0 0 6px #F15A2B; box-shadow: 0 0 0 2px #F15A2B; }
#average_payments { margin-right: 0; }
#cash_advance { margin-left: 5px; }
#calc-filler { width: 220px; height: 30px; float: left; display: block; margin-right: 5px; }
.total-box { position: relative; width: 150px; height: 30px; line-height: 12px; margin-right: 48px; text-align: center; font-size: 12px; display: block; float: left; }
.calc-disclaimer { line-height: 11px; font-size: 11px; width: 100%; display: block; clear: both; padding-left: 100px; }
.ui-button-text-only .ui-button-text { padding: initial; }
.calculator-container form br { display: none; }
.calc-descs { display: inline-block; width: 220px; padding: 0; }
.calc-descs span { -webkit-border-radius: 50%; -moz-border-radius; border-radius: 50%; padding: 6px 11px; margin-right: 10px; border: 1px solid #949599; }
.triangle-dwn { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #949599; position: absolute; left: 50%; bottom: 6px; margin-left: -3.5px; }
