Testbed for Amity Calculator JQ 1.12.4

Same Jquery version as WP

by Donna Torr

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- Do not remove anything below this line - title can be edited - HTML code to be pasted below comment lower down-->

	<!-- href="javascript:w=window.open(window.location.href);w.print();" -->
<div style="margin-top: 0px;">
    
    <a class="print-icon" onclick="if (!window.__cfRLUnblockHandlers) return false; window.print();" title="Print Calculator">
    <img src="/images/print_calc_icon.png" onmouseover="/images/print_calc_icon_hover.png" onmouseout="/images/print_calc_icon.png"></a>
</div>

<div id="chinook-calculator">
	  <div class="calculator-header-top-red">DISCOUNT CALCULATOR
    </div>
    <div class="calculator-header-bottom-grey">
        <div class="calculator-form"><span class="discount-label">Enter Your Discount</span> <input id="discount_txt" type="text"> <span class="discount-label">%</span> <a id="discount_btn" class="more_link_red" href="#">Calculate</a> <span class="red_label" style="display: none;">Net Prices in Red</span>
         </div>
    </div>  
  </div>
<div class="item-page">

	<h1 class="title">
		Calcium Silicate 45 Degree Elbow - List Prices
	</h1>
<!-- Do not remove anything above this line - title can be edited-->

<!--Insert table code below -->
   <table id="DiscountCalculatorTable" class="dcf-table dcf-table-responsive dcf-table-bordered dcf-table-striped dcf-w-100%">
<thead>
<tr><td class="firstColTitle headerTopBorder heightColTitle" colspan="11">INSULATION THICKNESS<br>
PRICING PER EACH</td>
</tr><tr>
<th class="mesurementColTitle" scope="col">Pipe Size (mm/in)</th>
<th class="mesurementColTitle" scope="col">25mm       1in</th>
<th class="mesurementColTitle" scope="col">38mm        1.5in</th>
<th class="mesurementColTitle" scope="col">51mm        2in</th>
<th class="mesurementColTitle" scope="col">64mm        2.5in</th>
<th class="mesurementColTitle" scope="col">76mm        3in</th>
<th class="mesurementColTitle" scope="col">89mm       3.5in</th>
<th...

CSS

h2{float:none; clear:both;}
		#sb-body-inner{ width:100%!important; height:300px!important; -webkit-overflow-scrolling:touch!important; overflow-y:scroll!important }
        #sb-body-inner iframe { width:100%; height:100% }
        .sb-wrapper-inner{height:300px!important}
        
#sb-body-inner {
  position: fixed; 
  right: 0; 
  bottom: 0; 
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

#sb-body-inner iframe {
  height: 100%;
  width: 100%;
}
body {color: #4D4D4D;background: #FFF;font-family: Arial, Helvetica, Verdana, Sans-serif;overflow:auto; text-align:center;}
.trPriceFields {height:40px !important;}
.trNewPriceFields{height:17px;}
table.center{margin-left:auto; margin-right:auto; text-align:right}

#DiscountCalculatorTable>td{margin:0px; padding:0px;}
#DiscountCalculatorTable p{text-align:left; margin:0px; padding:0px;}
#DiscountCalculatorTable .pricefield, #DiscountCalculatorTable .bandnumber,  #DiscountCalculatorTable .noprice {text-align:center;font-size:16px;padding-top:0px;padding-bottom:0px;min-width: 40px !important;}

#DiscountCalculatorTable .centered{text-align:center;}

td.noprice {text-align:center;font-size:14px;padding-top:0px;padding-bottom:0px}

#DiscountCalculatorTable .newpricefield {color:#ED4D33;text-align:center;font-size:16px;padding-top:0px;padding-bottom:0px}
#DiscountCalculatorTable .headerTopBorder{border-top:#4D4D4D solid 2px;}
#DiscountCalculatorTable .thinHeaderBottomBorder{border-bottom:#d6d6d6 solid 2px;}
#DiscountCalculatorTable .thinHeaderRightBorder{border-right:#d6d6d6 solid 2px;}
#DiscountCalculatorTable .bigColLeftBorder{border-left:#4D4D4D solid 2px;}
#DiscountCalculatorTable .headerBottomBorder{border-bottom:#4D4D4D solid 2px;}
#DiscountCalculatorTable .thinBottomBorder{border-bottom:#d6d6d6 solid 1px;padding-bottom:0;padding-top:0;}
#DiscountCalculatorTable .thinTopBorder{border-top:#d6d6d6 solid 1px;}
#DiscountCalculatorTable...

JavaScript

$(document).ready(function(){

		//show the tr w/discount prices

		$('.trNewPriceFields').hide();

		$('.red_label').hide();

			//Calculate and show the discounts

			$("#discount_btn").click(function calculate() {

					//alert('DO THE MATH');

					var _price = 0;
					var _newPrice = 0;
					var newpricefieldItems;
					_discount = $('#discount_txt').val();
					
					$('.pipe_cover').attr('rowspan', 50);
					$('.pipe_cover1').attr('rowspan', 20);
					$('.pipe_cover2').attr('rowspan', 20);
					
					$('.pricefield').each(function(i){
						_newPrice = 0;
						_price = $(this).text();

						//apply the discount
						_newPrice = parseFloat(_price) - parseFloat(_price) * _discount/100;
						
						//set the new price in the cell behind w/class newpricefield
						newpricefieldItems = $(".newpricefield");
						newpricefieldItems.eq(i).text(_newPrice.toFixed(2));

					});

					//show the tr w/discount prices and the red label "Net Prices in Red" from the Calculator-Header module
					$('.trNewPriceFields').show();
					$('.red_label').show();

				});

				// calculate if key 'Enter' is hit

				$('#discount_txt').keypress(function (event) {
					if (event.which == 13) {
					//alert('DO THE MATH');

					var _price = 0;
					var _newPrice = 0;
					var newpricefieldItems;
					_discount = $('#discount_txt').val();
					$('.pipe_cover').attr('rowspan', 50);
					$('.pipe_cover1').attr('rowspan', 20);
					$('.pipe_cover2').attr('rowspan', 20);
					$('.pricefield').each(function(i){
						_newPrice = 0;
						_price = $(this).text();

						//apply the discount

						_newPrice = parseFloat(_price) - parseFloat(_price) * _discount/100;

						//set the new price in the cell behind w/class newpricefield
						newpricefieldItems = $(".newpricefield");
						newpricefieldItems.eq(i).text(_newPrice.toFixed(2));


					});

					//show the tr w/discount prices and the red label "Net Prices in Red" from the Calculator-Header...