I have a form with a slider and check boxes. Values with check boxes and slider removed and added. Each check box is its value. Check box 4 the values of (10,20,30,40) you Need to check the boxes when you enable added value to the total, and when you disconnect subtracted from the total amount. When moving the slider the total value has changed. source: http://ift.tt/25yySsH
html { font-size: 16px; box-sizing: border-box; }
body { background-color: white; -webkit-font-smoothing: antialiased; font-family: latoregular, Trebuchet MS, Lucida Console, Geneva; font-weight: 300; line-height: 1.45; font-size: 1em; }
p { margin-bottom: 1.3em; color: #333333; font-weight: 500; line-height: 1.7em; }
h1, h2, h3, h4, h5 { margin: 1.414em 0 0.5em; font-family: latoregular, Trebuchet MS, Lucida Console, Geneva; font-weight: 600; line-height: 1.2; color: #333333; }
@media only screen and (max-width: 480px) and (min-width: 0px) { h1, h2, h3, h4, h5 { text-align: center; } }
@media only screen and (max-width: 768px) and (min-width: 480px) { h1, h2, h3, h4, h5 { text-align: left; } }
h1 { margin-top: 0; font-size: 2.2em; line-height: 1.5; }
@media only screen and (max-width: 480px) and (min-width: 0px) { h1 { font-size: 1.65041em; }
h1 span { background: #333333; } }
@media only screen and (max-width: 768px) and (min-width: 480px) { h1 { font-size: 2em; } }
h2 { font-size: 1.8em; }
@media only screen and (max-width: 480px) and (min-width: 0px) { h2 { font-size: 1.35034em; } }
@media only screen and (max-width: 768px) and (min-width: 480px) { h2 { font-size: 1.63636em; } }
h3 { font-size: 1.555em; }
@media only screen and (max-width: 480px) and (min-width: 0px) { h3 { font-size: 1.16654em; } }
@media only screen and (max-width: 768px) and (min-width: 480px) { h3 { font-size: 1.41364em; } }
h4 { font-size: 1.333em; }
@media only screen and (max-width: 480px) and (min-width: 0px) { h4 { font-size: 1em; } }
@media only screen and (max-width: 768px) and (min-width: 480px) { h4 { font-size: 1.21182em; } }
small, .font_small { font-size: 0.707em; }
h5 { font-size: 1.1em; }
/* article ol {list-style-type:decimal;padding-left: 15px;text-align:left !important;} */
::-moz-selection { color: white; background-color: #27AE60; }
::selection { color: white; background-color: #27AE60; }
#calc-prodv-simple { width: 100%; background-color: #27AE60; padding: 40px 0; }
#calc-prodv-simple h2 { text-align: center; color: #fff; margin-top: 0; }
#calc-prodv-simple h4 { color: #fff; margin-bottom: 40px; }
#calc-prodv-simple .ui-slider-range { background: #6E72B6; height: 12px; top: -4px; }
#calc-prodv-simple #slider-range, #calc-prodv-simple #slider-carttovarov { height: 8px; border: none; height: 5px; top: -4px; margin-top: 40px; margin-bottom: 40px; }
#calc-prodv-simple .ui-slider-handle { top: -0.5em; background: #fff; border: none; border-radius: 0px; width: 60px; height: 40px; top: -19px; }
#calc-prodv-simple .ui-slider-handle:focus { outline: none; border: none; border-radius: 0px; }
#calc-prodv-simple #slider-budjet input[type=text], #calc-prodv-simple #razmer-magazina input[type=text] { width: 120px; background: transparent; border: none; color: #fff; font-size: 1.3em; font-family: latoregular, Trebuchet MS, Lucida Console, Geneva; font-weight: 300; }
#calc-prodv-simple #slider-budjet input:last-of-type, #calc-prodv-simple #razmer-magazina input:last-of-type { text-align: right; right: 12px; position: absolute; }
#calc-prodv-simple .checkboxes input[type=checkbox] { display: none; }
#calc-prodv-simple .checkboxes input[type=checkbox] + label { display: inline-table; background-color: #E85163; color: white; font-family: sans-serif; font-size: 14px; font-weight: bold; height: 40px; line-height: 40px; position: relative; text-transform: uppercase; width: 80px; }
#calc-prodv-simple .checkboxes input[type=checkbox] + label, #calc-prodv-simple .checkboxes input[type=checkbox] + label i { -webkit-transition: all 200ms ease; transition: all 200ms ease; }
#calc-prodv-simple .checkboxes input[type=checkbox]:checked + label { background-color: #6E72B6; }
#calc-prodv-simple .checkboxes input[type=checkbox] + label:before, #calc-prodv-simple .checkboxes input[type=checkbox] + label:after, #calc-prodv-simple .checkboxes input[type=checkbox] + label i { width: 50%; display: inline-block; height: 100%; text-align: center; }
#calc-prodv-simple .checkboxes input[type=checkbox] + label:before { content: attr(data-text-true); }
#calc-prodv-simple .checkboxes input[type=checkbox] + label:after { content: attr(data-text-false); }
#calc-prodv-simple .checkboxes input[type=checkbox] + label i { top: 10%; background-color: white; height: 80%; left: 5%; position: absolute; width: 45%; }
#calc-prodv-simple .checkboxes input[type=checkbox]:checked + label i { left: 50%; }
#calc-prodv-simple .checkboxes label + label { display: inline; vertical-align: middle; font-size: 1.2em; font-family: latoregular, Trebuchet MS, Lucida Console, Geneva; color: #fff; margin-left: 15px; width: 80%; }
@media only screen and (max-width: 480px) and (min-width: 0px) { #calc-prodv-simple .checkboxes label + label { font-size: 1em; } }
#calc-prodv-simple .checkboxes .flex-align { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; line-height: normal; }
#calc-prodv-simple #block-calculate { margin-top: 40px; margin-bottom: 40px; text-align: center; }
#calc-prodv-simple #block-calculate .razoviy-platej, #calc-prodv-simple #block-calculate .mesyachniy-platej, #calc-prodv-simple #block-calculate .dalee-btn { height: 100%; padding: 20px 0; }
#calc-prodv-simple #block-calculate .razoviy-platej { background-color: #E85163; }
#calc-prodv-simple #block-calculate .mesyachniy-platej { background-color: #6E72B6; }
#calc-prodv-simple #block-calculate .dalee-btn { padding: 0; }
@media only screen and (max-width: 768px) and (min-width: 0px) { #calc-prodv-simple #block-calculate .dalee-btn { margin-top: 20px; } }
#calc-prodv-simple #block-calculate .dalee-btn a { font: 1.3em/1 latoregular, Trebuchet MS, Lucida Console, Geneva; text-decoration: none; }
#calc-prodv-simple #block-calculate .dalee-btn a { outline: none; color: #27AE60; }
#calc-prodv-simple #block-calculate .dalee-btn a:visited { color: #27AE60; }
#calc-prodv-simple #block-calculate .dalee-btn a:hover { color: #27AE60; }
#calc-prodv-simple #block-calculate .dalee-btn a:active { color: #27AE60; }
#calc-prodv-simple #block-calculate .dalee-btn a:focus { color: #27AE60; }
#calc-prodv-simple #block-calculate a { background-color: #fff; width: 100%; display: block; padding: 32px 0; }
#calc-prodv-simple #block-calculate p { margin: 0; font: 1em/1 latoregular, Trebuchet MS, Lucida Console, Geneva; color: #fff; }
#calc-prodv-simple #block-calculate .razoviy-platej p:nth-child(1), #calc-prodv-simple #block-calculate .mesyachniy-platej p:nth-child(1) { font-size: 1.7em; }
/*# sourceMappingURL=calc-simple.css.map */
<link href="http://ift.tt/1Y2X4kI" rel="stylesheet"/>
<link href="http://ift.tt/1jAc5cP" rel="stylesheet"/>
<script src="http://ift.tt/1BwSP4U"></script>
<script src="http://ift.tt/VorFZx"></script>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="libs/jquery-ui-1.11.4/jquery-ui.css">
<script src="libs/jquery-ui-1.11.4/jquery-ui.js"></script>
</head>
<body>
<style>
.mi-status {
position: fixed;
color: #9e0298;
font-size: 16px;
top: 200px;
z-index: 99999;
font-size: 26px;
}
</style>
<script>
//------- ЛОГ ХЕЛПЕР ----------
var consolelog = {};
function log (zpush,zvar){
consolelog[zpush] = zvar;
$('.mi-status').clone();
$('.mi-status').html("");
for (var i in consolelog) {
$('.mi-status').append(i+": "+consolelog[i]+'<br>');} }
var summary = "", checkSummary=1,slider=1;
function priceCalculator(slider) {
summary = slider;
$( ".price1" ).html(summary);
$( ".price2" ).html(summary);
}
</script>
<div class="mi-status"></div>
<section id="calc-prodv-simple">
<div class="container">
<form action="">
<div class="row">
<div class="col-md-12">
<h2>Калькулятор стоимости продвижения интернет-магазина</h2>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div id="slider-budjet">
<h4>Предполагаемый бюджет в месяц:</h4>
<input type="text" id="amount-min" readonly />
<input type="text" id="amount-max" readonly/>
<div id="slider-range"></div>
</div>
<script>
$("#slider-range").slider({
range: true,
animate: "slow",
min: 20000,
max: 200000,
step: 5000,
values: [ 35000, 120000 ],
slide: function( event, ui ) {$( "#amount-min" ).val(ui.values[ 0 ] + " р.");
$( "#amount-max" ).val(ui.values[ 1 ] + " р.");}
});
$( "#amount-min" ).val($( "#slider-range" ).slider( "values", 0 ) +" р.");
$( "#amount-max" ).val($( "#slider-range" ).slider( "values", 1 ) +" р.");
</script>
<div id="razmer-magazina">
<h4>Размер магазина (карточек товаров):</h4>
<input type="text" id="amount-" readonly />
<input type="text" id="amount-carttovarov" readonly />
<div id="slider-carttovarov"></div>
<script>
$("#slider-carttovarov").slider({
range: "min",
animate: "slow",
step: 50,
value: 5000,
max: 50000,
min: 5,
slide: function( event, ui ) {$( "#amount-carttovarov" ).val(ui.value);
priceCalculator(ui.value);
}
});
$( "#amount-carttovarov" ).val($( "#slider-carttovarov" ).slider("value"));
</script>
</div>
</div>
<div class="col-sm-6">
<div class="checkboxes">
<h4>Цель продвижения:</h4>
<div class="flex-align">
<input type="checkbox" name="check1" id="check1"
onchange="($('#check1').is(':checked')) ? priceCalculator(50) : priceCalculator(-50)">
<label for="check1" data-text-true="ДА" data-text-false="НЕТ"><i></i></label>
<label for="check1">Повышение видимости интернет-магазина в Yandex и Google</label>
</div>
<br>
<div class="flex-align">
<input type="checkbox" name="check2" id="check2">
<label for="check2"data-text-true="ДА" data-text-false="НЕТ"><i></i></label>
<label for="check2">Больше ключевых слов в поиске</label>
</div><br>
<div class="flex-align">
<input type="checkbox" name="check3" id="check3">
<label for="check3" data-text-true="ДА" data-text-false="НЕТ"><i></i></label>
<label for="check3">Трафик</label>
</div><br>
<div class="flex-align">
<input type="checkbox" name="check4" id="check4">
<label for="check4" data-text-true="ДА" data-text-false="НЕТ"><i></i></label>
<label for="check4">Борьба за ТОП -10</label>
</div>
</div>
</div>
</div>
<div class="row" id="block-calculate">
<div class="col-sm-4 col-xs-6"><div class="razoviy-platej clearfix"><p class="price1"></p><p>разовый платеж</p></div></div>
<div class="col-sm-4 col-xs-6"><div class="mesyachniy-platej clearfix"><p class="price2">0р.</p><p>в месяц</p></div></div>
<div class="col-sm-4 col-xs-12"><div class="dalee-btn"><a href="javascript:void(0)">Далее</a></div></div>
</div>
<!-- <div class="col-sm-4 col-xs-12">
<a href="javascript:void(0)">Расширенный калькулятор</a>
</div> -->
</div>
</form>
</div>
<script>
priceCalculator($("#slider-carttovarov").slider("value"));
</script>
</section>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire