#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);
};
