#total_bags, #total_lbs, #total_pallets, #total_tons { opacity: 0; transform: scale(0); -webkit-transform: scale(0); -ms-transform: scale(0); transition: all .3s ease; -webkit-transition: all .3s ease; } #calc-wrap, #ship-wrap, .MulchCalculator #main-calc-wrap { display: block; max-width: 500px; z-index: 101; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); -webkit-transform: translate(-50%, -50%) scale(0); transition: all .3s ease; -webkit-transition: all .3s ease; opacity: 0; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); margin-top: -100px; } .MulchCalculator #main-calc-wrap { position: relative; margin-top: 0; margin-bottom: 20px; top: auto; opacity: 1; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); } #calc-wrap label, .MulchCalculator #main-calc-wrap label { margin-bottom: 5px; } #calc-wrap input, .MulchCalculator #main-calc-wrap input { height: 40px; margin-bottom: 10px; border: 1px solid #ccc; padding-left: 10px; display: block; float: left; box-sizing: border-box; } .CalcError, .DepthDiv, .LbsPerSqFtDiv, .LengthDiv, .OutputDiv, .OutputDiv div, .WidthDiv { display: block; float: left; width: 48%; margin-bottom: 10px; } .DepthDiv, .LengthDiv { margin-right: 4% } .CalcDiv, .OutputDiv { width: 100%; margin-top: 10px; } .OutputDiv { margin-top: 20px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px 0; } .OutputDiv div { width: 25%; text-align: center; margin-bottom: 0; } #calc-wrap .OutputDiv input, .MulchCalculator #main-calc-wrap .OutputDiv input { border: none; padding-left: 0; height: 22px; text-align: center; font-size: 24px; margin-bottom: 3px; } #calc-wrap .CalcDiv input, .MulchCalculator #main-calc-wrap .CalcDiv input { display: block; float: none; margin: 0 auto; height: 40px; line-height: 35px; padding: 0; width: 150px; background: #00aeef; text-transform: capitalize; letter-spacing: 1px; } #calc-wrap .CalcDiv input:hover, .MulchCalculator #main-calc-wrap .CalcDiv input:hover { background: #3b3936; } #calc-wrap .mainForm, #ship-wrap .mainForm, .MulchCalculator #main-calc-wrap .mainForm { display: block; float: left; width: 100%; background: #fff; padding: 20px; position: relative; margin-top: 0; } #calc-wrap .mainForm #close, #ship-wrap .mainForm #close2 { position: absolute; top: 10px; right: 10px; font-family: open_sansregular; cursor: pointer; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: #8b0d19; transition: all .3s ease; -webkit-transition: all .3s ease; } #calc-wrap .mainForm #close:hover, #ship-wrap .mainForm #close2:hover { color: #3b3936; } #calc-wrap .mainForm .headline, #ship-wrap .mainForm .headline, .MulchCalculator #main-calc-wrap .mainForm .headline { display: block; width: 100%; text-align: center; color: #3b3936; text-transform: uppercase; line-height: 1; letter-spacing: 1px; float: left; font-family: anton; font-size: 33px; margin: 20px 0 10px; } #calc-wrap .mainForm .headline .fa, #ship-wrap .mainForm .headline .fa, .MulchCalculator #main-calc-wrap .mainForm .headline .fa { margin-left: 10px; vertical-align: 10%; font-size: 27px; } #calc-wrap .mainForm .headline.needed, .MulchCalculator #main-calc-wrap .mainForm .headline.needed { text-align: left; font-size: 20px; margin-bottom: 0; } #calc-wrap .mainForm select, .MulchCalculator #main-calc-wrap .mainForm select { margin-bottom: 0; height: 40px; border: 1px solid #ccc; } #calc-wrap .mainForm .sub-headline, #ship-wrap .mainForm .sub-headline, .MulchCalculator #main-calc-wrap .mainForm .sub-headline { display: block; width: 100%; text-align: center; color: #3b3936; line-height: 1; letter-spacing: 1px; float: left; font-family: open_sansregular; font-size: 16px; margin: 5px 0 20px; } #calc-wrap #CalcError, .MulchCalculator #main-calc-wrap #CalcError { font-size: 12px; color: red; font-style: italic; } #calc-wrap #mulch-results, .MulchCalculator #main-calc-wrap #mulch-results { display: block; float: left; width: 100%; max-height: 0; overflow: hidden; opacity: 0; transition: all .3s ease; -webkit-transition: all .3s ease; } #total-bags, #total-lbs, #total-pallets, #total-tons { opacity: 0; transform: scale(0); -webkit-transform: scale(0); -ms-transform: scale(0); transition: all .3s ease; -webkit-transition: all .3s ease; } .show-results { max-height: 175px !important; opacity: 1 !important; } .show-calc { transform: translate(-50%, -50%) scale(1) !important; -ms-transform: translate(-50%, -50%) scale(1) !important; -webkit-transform: translate(-50%, -50%) scale(1) !important; } .move-calc { margin-top: 0 !important; opacity: 1 !important; } .show-overlay { transform: scale(1) !important; -ms-transform: scale(1) !important; -webkit-transform: scale(1) !important; opacity: 1 !important; z-index: 100 !important; background: rgba(0, 0, 0, .65) !important; } #calculate.btn.btn-confirm, .btn.btn-confirm, .btn.btn-confirm:active, .btn.btn-confirm:focus { display: block; float: none; color: #fff; margin: 0 auto; height: 40px; line-height: 35px; padding: 0; width: 120px; background: #00aeef; text-transform: capitalize; letter-spacing: 1px; border-radius: 0; font-weight: 700; } .modal-body input[type=text] { background-color: transparent; border-radius: 0; outline: 0; width: 100%; margin: 0 0 15px; box-shadow: none; transition: all .3s; font-family: maven_pro; height: 40px; border: 1px solid #ccc; padding-left: 10px; display: block; } .modal-body select { margin-bottom: 0; height: 40px; border: 1px solid #ccc; } .modal-body select { background-color: rgba(255,255,255,.45); width: 100%; padding: 5px; border-radius: 2px; height: 3rem; font-family: maven_pro; margin-bottom: 10px; } .modal-body .label, .modal-body label { display: block; font-family: anton; font-size: 20px; color: #515151; text-transform: uppercase; margin-bottom: 8px; } .label { display: inline; padding: .2em .6em .3em; font-weight: 700; color: #818182; font-size: 16px; } .output_result_item { text-align: center; font-size: 24px; margin-bottom: 3px; transition: all .3s; font-family: maven_pro; } .grow { transform: scale(1) !important; -ms-transform: scale(1) !important; -webkit-transform: scale(1) !important; opacity: 1 !important; z-index: 100 !important; } .output_result { margin-top: 20px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px 0; } .row { margin-right: -15px; margin-left: -15px; } #mulch_results.show-results { opacity: 1 !important; height: 100%; } .show-results { max-height: 175px !important; opacity: 1 !important; } .modal-body .headline { display: block; width: 100%; text-align: center; color: #3b3936; text-transform: uppercase; line-height: 1; letter-spacing: 1px; font-family: anton; font-size: 33px; margin: 20px 0 10px; }
Depth: 1 in. 1.5 in. 2 in. 3 in. 4 in. 5 in. 6 in.
Width (ft.)
Length (ft.)
Lbs/Sq. Ft.
function MulchCalc() { var a = document.getElementById("ppsft").value; var b = (document.getElementById("Depther").value / 12); var c = document.getElementById("Widther").value; var d = document.getElementById("Lengther").value; if (a > 0) { if (b > 0) { if (c > 0) { if (d > 0) { var math = a * c * d; var tpo = Math.round((math * 10) / 10).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); jQuery("#tpo").html(tpo); g = math / 2000; var tto = g.toFixed(2); jQuery("#tto").html(tto); var tba = Math.round(((math * 10) / 10) / 40).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); jQuery("#tba").html(tba); var tpa = Math.ceil((math / 20) / 100); jQuery("#tpa").html(tpa); jQuery("#mulch_results").addClass('show-results'); setTimeout(function () { jQuery("#total_lbs").addClass('grow'); }, 300); setTimeout(function () { jQuery("#total_tons").addClass('grow'); }, 500); setTimeout(function () { jQuery("#total_bags").addClass('grow'); }, 700); setTimeout(function () { jQuery("#total_pallets").addClass('grow'); }, 900); } else { var calcerror = '
*Length has not been set properly
'; $("#calcerror").html(calcerror);} } else { var calcerror = '
*Width has not been set properly
'; $("#calcerror").html(calcerror);} } else { var calcerror = '
*Depth has not been set properly
'; $("#calcerror").html(calcerror);} } else { var calcerror = '
*Pounds Per Square Inch has not been set properly
'; $("#calcerror").html(calcerror);} }; function ChangeLbsSqFt(e) { var t = e.value; if (t == 1) { document.getElementById("ppsft").value = "2.33"; } if (t == 2) { document.getElementById("ppsft").value = "3.495"; } if (t == 3) { document.getElementById("ppsft").value = "4.66"; } if (t == 4) { document.getElementById("ppsft").value = "6.99"; } if (t == 5) { document.getElementById("ppsft").value = "9.32"; } if (t == 6) { document.getElementById("ppsft").value = "11.65"; } if (t == 7) { document.getElementById("ppsft").value = "13.98"; } console.log(t); };
