Test 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>
<body marginwidth="0" marginheight="0" data-new-gr-c-s-check-loaded="14.1121.0" data-gr-ext-installed="">
	<!-- 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="custom">
	<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>	
<div class="item-page">

	<h1 class="title">
		Calcium Silicate 45 Degree Elbow - List Prices
	</h1>
  
<!--Insert table code below -->
  <table id="DiscountCalculatorTable" class="dcf-table dcf-table-responsive dcf-table-bordered dcf-table-striped dcf-w-100%">
    <thead>
      <tr>
        <th class="mesurementColTitle" scope="col">Pipe Size (mm/in)</th>
        <th class="mesurementColTitle" scope="col">25mm/1"</th>
        <th class="mesurementColTitle" scope="col">38mm/1 1/2"</th>
        <th class="mesurementColTitle" scope="col">51mm/2"</th>
        <th class="mesurementColTitle" scope="col">64mm/2 1/2"</th>
        <th class="mesurementColTitle" scope="col">76mm/3"</th>
        <th class="mesurementColTitle" scope="col">89mm/3 1/2"</th>
        <th class="mesurementColTitle" scope="col">102mm/4"</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="mesurementRowTitle" data-label="Pipe Size (mm/in)">15 mm/0.5"</td>
   ...

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();
  
        // Remove non-breaking spaces, regular spaces, and apply the discount
        _newPrice = parseFloat(_price.replace(/\s|&nbsp;|&amp;nbsp;/g, "")) - parseFloat(_price.replace(/\s|&nbsp;|&amp;nbsp;/g, "")) * _discount / 100;
  
        $('.trNewPriceFields td:first-child').text('');
  
        if ($(window).width() <= 767) {
            // Append the new price next to the original price cell
            $(this).after('<td class="newpricefield">' + (_newPrice.toFixed(2)) + '</td>');
        }
        // set the new price in the cell behind w/class newpricefield
        newpricefieldItems = $(".newpricefield");
  
        // Check if the result is NaN or non-breaking spaces and replace with "n/a"
        if (isNaN(_newPrice)) {
          newpricefieldItems.eq(i).text('n/a');
        } else {
          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
      if ($(window).width() <= 767) {
        // Append the new price next to the original price cell
        $('.trNewPriceFields').hide();
        }else {
            $('.trNewPriceFields').show();

        }
      $('.red_label').show();
    });
  
    // calculate if key 'Enter' is hit
    $('#discount_txt').keypress(function(event) {
      if (event.which...