I am trying to position my dropdown-menu right under my menu header like in following image. At best I get it to position right next to it, but is it possible to achieve my objective?
Here my FIDDLE ... FIDDLE
Please see the example in my FIDDLE/BOOTPLY which shows the result of my code correctly. In SA its not right, sorry about that.
My code...
$(".btn_clear").on('click', function (e) {
e.stopPropagation();
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
$(".products .checkbox").on("click", function(e) {
var i = $("li").index( $(this).parent() );
console.log(i);
$('.products .btn_clear').css('background', 'blue');
$('.products .btn_apply').css('background', 'green');
});
$(".availability .checkbox").on("click", function(e) {
var i = $("li").index( $(this).parent() );
console.log(i);
$('.availability .btn_clear').css('background', 'blue');
$('.availability .btn_apply').css('background', 'green');
});
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
.checkbox :hover {
background-color:red;
cursor:pointer;
}
.div_form :hover {
background-color:green;
cursor:pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 29px;
text-align: center;
background-color:grey
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
background-color:yellow
}
.checkbox label, .radio label {
min-height: 20px;
padding-left: 30px;
padding-right:30px;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
width: 100%;
}
.div_form {
position: absolute;
bottom: 0;
bottom: -70px
}
.btn {
border-radius:0;
margin-top:5px
}
.dropdown-menu {
border-radius:0;
border:5px solid blue;
position: relative;
background-color: red;
border-top-width: 0px;
}
.typeahead {
width:90%;
margin-left:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Products</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu products" style="margin-left: 2em">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="countries" placeholder="Countries" type="text"> <div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Beta
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Gamma</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Delta</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Omega</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Availability</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu availability" style="margin-left: 2em">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="typeahead" placeholder="Search values" type="text"> <div class="checkbox">
<label><input value="" type="checkbox"> One</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Two
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Nine</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Eight</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Seven</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fifteen
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div><!--Warning buttons with dropdown menu-->
</div>
Here you go, I removed the JavaScript and removed the left margin and relative positioning from the dropdown menu: http://www.bootply.com/KaP7SiUYVw
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
.checkbox:hover {
background-color: red;
cursor: pointer;
}
.div_form:hover {
background-color: green;
cursor: pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 29px;
text-align: center;
background-color: grey
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
background-color: yellow
}
.checkbox label,
.radio label {
min-height: 20px;
padding-left: 30px;
padding-right: 30px;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
width: 100%;
}
.div_form {
position: absolute;
bottom: 0;
bottom: -70px
}
.btn {
border-radius: 0;
margin-top: 5px
}
.dropdown-menu {
border-radius: 0;
border: 5px solid blue;
background-color: red;
border-top-width: 0px;
}
.typeahead {
width: 90%;
margin-left: 10px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Products</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span>
</button>
<div class="dropdown-menu products">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="countries" placeholder="Countries" type="text">
<div class="checkbox">
<label>
<input value="" type="checkbox">Alpha</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Beta
</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Gamma</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Delta</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Omega</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div>
<!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Availability</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span>
</button>
<div class="dropdown-menu availability">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label>
<input value="" type="checkbox">One</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Two
</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Nine</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Eight</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Seven</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Fifteen
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div>
<!--Warning buttons with dropdown menu-->
</div>
Related
I'm not an expert on JS, so maybe this question have a super easy answer, I don't know.
I have a grid of 9 button, a grid with 9 radio type input and another 5 radio type input. Every single one of this element are needed to make some math to send in outup on the page how much someone would spend selecting this format like weight, length...
I have 3 different spot where I should see an output with the price, I have an excel where I can see the price I should put, but I don't know how to create such a function. the function should say like: if you select the first button, the third radio type, and the second radio type, given all their value and the math formula to do it, the price is €x.
body {
font-family: "Open Sans", sans-serif;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.justify {
justify-content: center;
}
.align {
align-items: center;
}
.evenly {
justify-content: space-evenly;
}
.between {
justify-content: space-between;
}
.border {
border: 1px solid black;
}
.m-0 {
margin: 0;
}
.spacer {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
.orange {
color: orange;
}
.bold {
font-weight: bold;
}
.bg {
background-color: whitesmoke;
}
.tabtitle {
font-weight: bold;
}
.tariffe {
font-size: small;
}
.intro {
text-align: center;
}
.tartitle {
font-size: medium;
}
div h2 {
font-size: xx-large;
}
.cont {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
margin-top: 12px;
cursor: pointer;
}
.m-7 {
margin-top: 7px;
}
.m-14 {
margin: 14px;
padding: 0px;
}
div input {
border-radius: 3px;
border: solid 1px black;
}
div input:focus {
outline: none;
}
.richiedi {
text-align: center;
padding: 5px 50px;
}
.tabcosti {
background-color: darkorange;
border: solid darkorange 1px;
}
.border {
border: solid darkorange 1px;
}
.black {
color: black;
}
.white {
color: white;
}
.m-left-50 {
margin-left: 200px;
}
.x-small {
font-size: x-small;
}
.tabcosti2 {
border-top: 0px;
border: solid darkorange 1px;
}
.margin-left {
margin-left: 20px;
}
.info {
width: 215px;
height: 20px;
}
.info2 {
width: 75px;
height: 20px;
margin: 10px;
}
.small {
font-size: small;
}
.unbtn {
border: 0px;
width: 20vw;
height: 30px;
background-color: whitesmoke;
}
.unbtn:focus {
outline: none;
background-color: darkorange;
color: white;
}
.hide {
display: none;
}
.btn {
background-color: whitesmoke;
border-radius: 3px;
border: none;
text-decoration: none;
flex-grow: 1;
margin: 10px;
height: 30px;
}
.btn2{
background-color: darkorange;
color: white;
border: none;
text-decoration: none;
flex-grow: 1;
margin: 10px;
height: 30px;
}
<div class="justify evenly flex-row">
<div class="flex-col">
<div class="flex-row">
<button id="sel" class="btn bottoneCategoria" data-value="1,56" value="3,44">Abbigliamento e Scarpe</button>
</div>
<div class="flex-row">
<button id="sel2" class="btn bottoneCategoria" data-value="1,04" value="2,66">Pet & Food</button>
</div>
<div class="flex-row">
<button id="sel3" class="btn bottoneCategoria" data-value="1,30" value="3,10">Sport e Tempo libero</button>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<button id="sel4" class="btn bottoneCategoria" data-value="1,04" value="2,76">Elettronica e Informatica</button>
</div>
<div class="flex-row">
<button id="sel5" class="btn bottoneCategoria" data-value="1,04" value="2,66">Casa e Cucina</button>
</div>
<div class="flex-row">
<button id="sel6" class="btn bottoneCategoria" data-value="1,30" value="3,10">Auto e Moto</button>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<button id="sel7" class="btn bottoneCategoria" data-value="1,17" value="2,58">Food & Beverage</button>
</div>
<div class="flex-row">
<button id="sel8" class="btn bottoneCategoria" data-value="1,30" value="3,10">Belleza e Salute</button>
</div>
<div class="flex-row">
<button id="sel9" class="btn bottoneCategoria">Altro</button>
</div>
</div>
</div>
<div id="demo" class="justify m-30 evenly flex-row bg hide">
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Busta 35x25x3" name="Scatola"> Busta 35x25x3
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Busta 39x31x5" name="Scatola"> Busta 39x31x5
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 27x16x10" name="Scatola"> Scatola 27x16x10
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 24x15x17" name="Scatola"> Scatola 24x15x17
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 37x28x8" name="Scatola"> Scatola 37x28x8
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 44x30x9" name="Scatola"> Scatola 44x30x9
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 61x46x40" name="Scatola"> Scatola 61x46x40
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 51x36x12" name="Scatola"> Scatola 51x36x12
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 59x38x32" name="Scatola"> Scatola 59x38x32
</div>
</div>
</div>
<div class="flex-row bg m-7 justify evenly">
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="0-1 kg" name="Peso"> 0-1 kg
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="3-5 kg" name="Peso"> 3-5 kg
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="1-2 kg" name="Peso"> 1-2 kg
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="5-10 kg" name="Peso"> 5-10 kg
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="2-3 kg" name="Peso"> 2-3 kg
</div>
</div>
</div>
<div class="justify evenly flex-row">
<div class="flex-col">
<p>TARIFFA DI GESTIONE</p>
</div>
<div class="flex-col">
<p>TARIFFA DI RESO</p>
</div>
<div class="flex-col">
<p>TARIFFA DI STOCCAGGIO</p>
</div>
</div>
<div class="tabcosti evenly justify flex-row">
<div class="flex-col">
<p id="reso">€ <span class="white"></span></p>
</div>
<div class="flex-col">
<p>€ <span class="white"></span></p>
</div>
<div class="flex-col">
<p>€ <span class="white"></span> <span class="x-small">al mese</span></p>
</div>
</div>
<div class="flex-row tabcosti2">
<div class="flex-col justify">
<div class="flex-row">
<p class="margin-left">€ <span class="orange">3,12</span><span> spedizione</span> ITALIA</p>
</div>
<div class="flex-row">
<p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> EUROPA</p>
</div>
<div class="flex-row">
<p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> WORLDWIDE* ZONA 6</p>
</div>
</div>
<div class="flex-col spacer"></div>
</div>
Just to make it clear, I should place the output of the formula on the orange background grid where I already placed the 3 € sign.
The basic method is:
Add a change event to the radio inputs
When the input value changes, calculate the price
Output the correct price (or different prices) to each of the 3 elements
Here is a simple example:
document.querySelectorAll('input[type=radio]').forEach(function(input) {
//add change event to each input
input.onchange = function() {
//calculation for price here, e.g.:
var price;
if (this.value == '0-1 kg') {
price = 1;
} else {
price = 2;
};
//output price here
document.querySelectorAll('.tabcosti .white')[0].innerText = price;
document.querySelectorAll('.tabcosti .white')[1].innerText = price;
document.querySelectorAll('.tabcosti .white')[2].innerText = price;
};
})
body {
font-family: "Open Sans", sans-serif;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.justify {
justify-content: center;
}
.align {
align-items: center;
}
.evenly {
justify-content: space-evenly;
}
.between {
justify-content: space-between;
}
.border {
border: 1px solid black;
}
.m-0 {
margin: 0;
}
.spacer {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
.orange {
color: orange;
}
.bold {
font-weight: bold;
}
.bg {
background-color: whitesmoke;
}
.tabtitle {
font-weight: bold;
}
.tariffe {
font-size: small;
}
.intro {
text-align: center;
}
.tartitle {
font-size: medium;
}
div h2 {
font-size: xx-large;
}
.cont {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
margin-top: 12px;
cursor: pointer;
}
.m-7 {
margin-top: 7px;
}
.m-14 {
margin: 14px;
padding: 0px;
}
div input {
border-radius: 3px;
border: solid 1px black;
}
div input:focus {
outline: none;
}
.richiedi {
text-align: center;
padding: 5px 50px;
}
.tabcosti {
background-color: darkorange;
border: solid darkorange 1px;
}
.border {
border: solid darkorange 1px;
}
.black {
color: black;
}
.white {
color: white;
}
.m-left-50 {
margin-left: 200px;
}
.x-small {
font-size: x-small;
}
.tabcosti2 {
border-top: 0px;
border: solid darkorange 1px;
}
.margin-left {
margin-left: 20px;
}
.info {
width: 215px;
height: 20px;
}
.info2 {
width: 75px;
height: 20px;
margin: 10px;
}
.small {
font-size: small;
}
.unbtn {
border: 0px;
width: 20vw;
height: 30px;
background-color: whitesmoke;
}
.unbtn:focus {
outline: none;
background-color: darkorange;
color: white;
}
.hide {
display: none;
}
.btn {
background-color: whitesmoke;
border-radius: 3px;
border: none;
text-decoration: none;
flex-grow: 1;
margin: 10px;
height: 30px;
}
.btn2 {
background-color: darkorange;
color: white;
border: none;
text-decoration: none;
flex-grow: 1;
margin: 10px;
height: 30px;
}
<div class="justify evenly flex-row">
<div class="flex-col">
<div class="flex-row">
<button id="sel" class="btn bottoneCategoria" data-value="1,56" value="3,44">Abbigliamento e Scarpe</button>
</div>
<div class="flex-row">
<button id="sel2" class="btn bottoneCategoria" data-value="1,04" value="2,66">Pet & Food</button>
</div>
<div class="flex-row">
<button id="sel3" class="btn bottoneCategoria" data-value="1,30" value="3,10">Sport e Tempo libero</button>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<button id="sel4" class="btn bottoneCategoria" data-value="1,04" value="2,76">Elettronica e Informatica</button>
</div>
<div class="flex-row">
<button id="sel5" class="btn bottoneCategoria" data-value="1,04" value="2,66">Casa e Cucina</button>
</div>
<div class="flex-row">
<button id="sel6" class="btn bottoneCategoria" data-value="1,30" value="3,10">Auto e Moto</button>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<button id="sel7" class="btn bottoneCategoria" data-value="1,17" value="2,58">Food & Beverage</button>
</div>
<div class="flex-row">
<button id="sel8" class="btn bottoneCategoria" data-value="1,30" value="3,10">Belleza e Salute</button>
</div>
<div class="flex-row">
<button id="sel9" class="btn bottoneCategoria">Altro</button>
</div>
</div>
</div>
<div id="demo" class="justify m-30 evenly flex-row bg hide">
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Busta 35x25x3" name="Scatola"> Busta 35x25x3
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Busta 39x31x5" name="Scatola"> Busta 39x31x5
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 27x16x10" name="Scatola"> Scatola 27x16x10
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 24x15x17" name="Scatola"> Scatola 24x15x17
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 37x28x8" name="Scatola"> Scatola 37x28x8
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 44x30x9" name="Scatola"> Scatola 44x30x9
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 61x46x40" name="Scatola"> Scatola 61x46x40
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 51x36x12" name="Scatola"> Scatola 51x36x12
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 59x38x32" name="Scatola"> Scatola 59x38x32
</div>
</div>
</div>
<div class="flex-row bg m-7 justify evenly">
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="0-1 kg" name="Peso"> 0-1 kg
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="3-5 kg" name="Peso"> 3-5 kg
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="1-2 kg" name="Peso"> 1-2 kg
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="5-10 kg" name="Peso"> 5-10 kg
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="2-3 kg" name="Peso"> 2-3 kg
</div>
</div>
</div>
<div class="justify evenly flex-row">
<div class="flex-col">
<p>TARIFFA DI GESTIONE</p>
</div>
<div class="flex-col">
<p>TARIFFA DI RESO</p>
</div>
<div class="flex-col">
<p>TARIFFA DI STOCCAGGIO</p>
</div>
</div>
<div class="tabcosti evenly justify flex-row">
<div class="flex-col">
<p id="reso">€ <span class="white"></span></p>
</div>
<div class="flex-col">
<p>€ <span class="white"></span></p>
</div>
<div class="flex-col">
<p>€ <span class="white"></span> <span class="x-small">al mese</span></p>
</div>
</div>
<div class="flex-row tabcosti2">
<div class="flex-col justify">
<div class="flex-row">
<p class="margin-left">€ <span class="orange">3,12</span><span> spedizione</span> ITALIA</p>
</div>
<div class="flex-row">
<p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> EUROPA</p>
</div>
<div class="flex-row">
<p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> WORLDWIDE* ZONA 6</p>
</div>
</div>
<div class="flex-col spacer"></div>
</div>
EDIT: with the buttons, try like this:
document.querySelectorAll('button').forEach(function(input) {
//add change event to each input
input.onclick = function() {
//calculation for price here, e.g.:
var price;
if (this.dataset.value == '3,44') {
price = 1;
} else {
price = 2;
};
//output price here
document.querySelectorAll('.tabcosti .white')[0].innerText = price;
document.querySelectorAll('.tabcosti .white')[1].innerText = price;
document.querySelectorAll('.tabcosti .white')[2].innerText = price;
};
})
body {
font-family: "Open Sans", sans-serif;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.justify {
justify-content: center;
}
.align {
align-items: center;
}
.evenly {
justify-content: space-evenly;
}
.between {
justify-content: space-between;
}
.border {
border: 1px solid black;
}
.m-0 {
margin: 0;
}
.spacer {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
.orange {
color: orange;
}
.bold {
font-weight: bold;
}
.bg {
background-color: whitesmoke;
}
.tabtitle {
font-weight: bold;
}
.tariffe {
font-size: small;
}
.intro {
text-align: center;
}
.tartitle {
font-size: medium;
}
div h2 {
font-size: xx-large;
}
.cont {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
margin-top: 12px;
cursor: pointer;
}
.m-7 {
margin-top: 7px;
}
.m-14 {
margin: 14px;
padding: 0px;
}
div input {
border-radius: 3px;
border: solid 1px black;
}
div input:focus {
outline: none;
}
.richiedi {
text-align: center;
padding: 5px 50px;
}
.tabcosti {
background-color: darkorange;
border: solid darkorange 1px;
}
.border {
border: solid darkorange 1px;
}
.black {
color: black;
}
.white {
color: white;
}
.m-left-50 {
margin-left: 200px;
}
.x-small {
font-size: x-small;
}
.tabcosti2 {
border-top: 0px;
border: solid darkorange 1px;
}
.margin-left {
margin-left: 20px;
}
.info {
width: 215px;
height: 20px;
}
.info2 {
width: 75px;
height: 20px;
margin: 10px;
}
.small {
font-size: small;
}
.unbtn {
border: 0px;
width: 20vw;
height: 30px;
background-color: whitesmoke;
}
.unbtn:focus {
outline: none;
background-color: darkorange;
color: white;
}
.hide {
display: none;
}
.btn {
background-color: whitesmoke;
border-radius: 3px;
border: none;
text-decoration: none;
flex-grow: 1;
margin: 10px;
height: 30px;
}
.btn2 {
background-color: darkorange;
color: white;
border: none;
text-decoration: none;
flex-grow: 1;
margin: 10px;
height: 30px;
}
<div class="justify evenly flex-row">
<div class="flex-col">
<div class="flex-row">
<button id="sel" class="btn bottoneCategoria" data-value="1,56" value="3,44">Abbigliamento e Scarpe</button>
</div>
<div class="flex-row">
<button id="sel2" class="btn bottoneCategoria" data-value="1,04" value="2,66">Pet & Food</button>
</div>
<div class="flex-row">
<button id="sel3" class="btn bottoneCategoria" data-value="1,30" value="3,10">Sport e Tempo libero</button>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<button id="sel4" class="btn bottoneCategoria" data-value="1,04" value="2,76">Elettronica e Informatica</button>
</div>
<div class="flex-row">
<button id="sel5" class="btn bottoneCategoria" data-value="1,04" value="2,66">Casa e Cucina</button>
</div>
<div class="flex-row">
<button id="sel6" class="btn bottoneCategoria" data-value="1,30" value="3,10">Auto e Moto</button>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<button id="sel7" class="btn bottoneCategoria" data-value="1,17" value="2,58">Food & Beverage</button>
</div>
<div class="flex-row">
<button id="sel8" class="btn bottoneCategoria" data-value="1,30" value="3,10">Belleza e Salute</button>
</div>
<div class="flex-row">
<button id="sel9" class="btn bottoneCategoria">Altro</button>
</div>
</div>
</div>
<div id="demo" class="justify m-30 evenly flex-row bg hide">
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Busta 35x25x3" name="Scatola"> Busta 35x25x3
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Busta 39x31x5" name="Scatola"> Busta 39x31x5
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 27x16x10" name="Scatola"> Scatola 27x16x10
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 24x15x17" name="Scatola"> Scatola 24x15x17
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 37x28x8" name="Scatola"> Scatola 37x28x8
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 44x30x9" name="Scatola"> Scatola 44x30x9
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 61x46x40" name="Scatola"> Scatola 61x46x40
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 51x36x12" name="Scatola"> Scatola 51x36x12
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 59x38x32" name="Scatola"> Scatola 59x38x32
</div>
</div>
</div>
<div class="flex-row bg m-7 justify evenly">
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="0-1 kg" name="Peso"> 0-1 kg
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="3-5 kg" name="Peso"> 3-5 kg
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="1-2 kg" name="Peso"> 1-2 kg
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="5-10 kg" name="Peso"> 5-10 kg
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="2-3 kg" name="Peso"> 2-3 kg
</div>
</div>
</div>
<div class="justify evenly flex-row">
<div class="flex-col">
<p>TARIFFA DI GESTIONE</p>
</div>
<div class="flex-col">
<p>TARIFFA DI RESO</p>
</div>
<div class="flex-col">
<p>TARIFFA DI STOCCAGGIO</p>
</div>
</div>
<div class="tabcosti evenly justify flex-row">
<div class="flex-col">
<p id="reso">€ <span class="white"></span></p>
</div>
<div class="flex-col">
<p>€ <span class="white"></span></p>
</div>
<div class="flex-col">
<p>€ <span class="white"></span> <span class="x-small">al mese</span></p>
</div>
</div>
<div class="flex-row tabcosti2">
<div class="flex-col justify">
<div class="flex-row">
<p class="margin-left">€ <span class="orange">3,12</span><span> spedizione</span> ITALIA</p>
</div>
<div class="flex-row">
<p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> EUROPA</p>
</div>
<div class="flex-row">
<p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> WORLDWIDE* ZONA 6</p>
</div>
</div>
<div class="flex-col spacer"></div>
</div>
Sorry that I'm a day late to the party, but you can use the jQuery change event to find the value of the clicked radio button.
Here's a simple example:
document.getElementById('large').addEventListener('change', function() {
var change = document.getElementById('large');
var times = document.getElementById('times').value / 100;
if (change.checked) {
document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) * times;
} else {
document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) / times;
}
});
// -------------------
$('input[name=course1]').mouseup(function(e) {
console.log("Previously " + $('input[name=course1]:checked').val());
var prevValue = parseInt($('input[name=course1]:checked').val());
var newvalue = parseInt(e.currentTarget.value);
console.log("Now " + newvalue);
document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) - prevValue;
document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) + newvalue;
console.log("————————————————————");
});
$('input[name=course2]').mouseup(function(e) {
console.log("Previously " + $('input[name=course2]:checked').val());
var prevValue = parseInt($('input[name=course2]:checked').val());
var newvalue = parseInt(e.currentTarget.value);
console.log("Now " + newvalue);
document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) - prevValue;
document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) + newvalue;
console.log("————————————————————");
});
$('input[name=course3]').mouseup(function(e) {
console.log("Previously " + $('input[name=course3]:checked').val());
var prevValue = parseInt($('input[name=course2]:checked').val());
var newvalue = parseInt(e.currentTarget.value);
console.log("Now " + newvalue);
document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) - prevValue;
document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) + newvalue;
console.log("————————————————————");
});
function validate() {
var value = parseInt(document.getElementById('times').value);
if (value < 110 || value > 200 || value == "") {
console.log('failure');
document.getElementById('times').focus();
document.getElementById('times').style.borderBottom = '2px solid #ff0000';
} else {
document.getElementById('times').style.borderBottom = '2px solid black';
}
}
#calories::after {
content: " calories in this meal";
}
#times:focus, #times {
outline: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom:2px solid black;
}
#times {
font-family: standard;
border-bottom:none;
}
<button onclick="console.clear();">Console covering page? Click this button to get rid of all console messages!</button>
<hr>
<input type="checkbox" id="large" />
<label for="large">Large food (<input type="number" min="110" max="200" value="150" id="times" oninput="validate();" onchange="this.style.borderBottom = 'none';" />) % change! (click number to edit)</label>
<hr>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" checked="checked" name="course1" value="0" id="opt1" />
<label for="opt1">I don't want appetizer</label>
<div></div>
<input type="radio" name="course1" value="200" id="opt2" />
<label for="opt2">Peanuts</label>
<hr>
<input type="radio" checked="checked" name="course2" value="0" id="opt3" />
<label for="opt1">I don't want a main course</label>
<div></div>
<input type="radio" name="course2" value="1000" id="opt4" />
<label for="opt4">Pizza</label>
<div></div>
<input type="radio" name="course2" value="2000" id="opt5" />
<label for="opt5">A Whole Pizza</label>
<hr>
<input type="radio" checked="checked" name="course3" value="0" id="opt6" />
<label for="opt6">I don't want dessert!</label>
<div></div>
<input type="radio" name="course3" value="300" id="opt7" />
<label for="opt7">Brownie</label>
<div></div>
<input type="radio" name="course3" value="500" id="opt8" />
<label for="opt8">Cake</label>
<hr>
<p id="calories">0</p>
Does slideToggle() change padding or margins during the transition and than bringing them back to normality? Bacause i'm trying to toggle two forms, one for login and one for registration for a static html page, but during the transition something like a top margin is created between my forms and other stuff (A text to be precise) and than everything is resized back to how it is supposed to be.
First screen is with static page and no transition, the latter during the transition: https://imgur.com/a/R5pppq5
Here the code, I'm programming on Atom with live server plugin:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
padding-bottom: 10%;
padding-top: 0;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
button.toggle_home {
top: 0px;
padding-bottom: 2%;
transform: translate(0, -100%);
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<hr>
<div class="toggle_home" style="float:left;">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>
For anyone looking for another solution to this issue, you can use a pseudo element with a fixed height in place of margins to stop the collapsing margins effect, e.g:
.hidden-element:before {
display: block;
width: 100%;
height: 24px; /* the top margin height you want */
content: '';
}
You can also use an :after for the bottom margin.
I believe the changing gap is a result of margin collapse.
Parent and first/last child
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block ... then those margins collapse. The collapsed margin ends up outside the parent.
On page load, margins are collapsed between p.index_text and the <hr> inside form#login. When jQuery starts slideDown(), it adds overflow:hidden to the sliding element #form#login. This creates "clearance" between the <p> and the <hr> and the margin stops collapsing. Visually, the gap increases between the two elements.
There are various methods to prevent margin collapse. I chose padding since the other form already has some:
#login {
padding:15px;
}
Working example:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
#login {
padding:15px;
}
hr,
#register {
margin: 0 !important;
}
#div_toggle {
display: flex;
align-items: center;
}
#div_toggle:after {
content: "";
flex: 1 0 auto;
border-top: 1px solid #CCC;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>
The animations also seem to jump and the end, but that may be a separate issue.
Edit
Further jumping seems to have been caused by margin on the second form, so I removed it. The translated button seemed to cause problems, too, so I rebuilt it. Code above was edited accordingly.
When "same as shipping address" is checked, the form below that section is supposed to disappear. I put {display:none} but it doesn't work. It worked when I got rid of {div class="checkboxalign} but then it is no longer aligned in the center. I was wondering how to get this function to work, but still keep it center aligned? Thank you.
.checkbox-custom, .radio-custom {
margin: 0 auto;
width: 40%;
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 1px solid #717171;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.checkbox-custom:checked ~.input-box {
display: none;
}
.checkboxalign {
margin: 0 auto;
width: auto;
text-align: left;
display: table;
margin-bottom: 10px;
}
.radioalign {
margin: 0 auto;
width: auto;
text-align: left;
display: table;
}
<form class="form2">
<div class="h6centeralign"><h6 class="h6style">Billing Address</h6></div>
<div class="checkboxalign">
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
<form class="form3">
<div class="h6centeralign"><h6 class="h6style">Shipping Method</h6></div>
<div class="radioalign">
<div>
<input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
<label for="radio-1" class="radio-custom-label">Free Delivery (3-5 Days)<strong> $0.00</strong></label>
</div>
<div>
<input id="radio-2" class="radio-custom"name="radio-group" type="radio">
<label for="radio-2" class="radio-custom-label">Standard Delivery (2-3 Days)<strong> $5.99</strong></label>
</div>
<div>
<input id="radio-3" class="radio-custom" name="radio-group" type="radio">
<label for="radio-3" class="radio-custom-label">Next Day Delivery<strong> $12.99</strong></label>
</div>
</div>
</form>
Because .input-box Elements are not siblings of the checkbox. And your selector is
.checkbox-custom:checked ~.input-box {
display: none;
}
There must be wrapper div to form elements which you want to hide then your css will work.
I need help on JavaScript condition.
Here is my working code:
$(document).on("click", "input[name='txt1']", function() {
$('#modal1').show();
});
$(document).on("click", "input[name='txt2']", function() {
$('#modal2').show();
});
$(document).on("click", ".btn1", function() {
$('#modal1').hide();
});
$(document).on("click", ".btn2", function() {
$('#modal2').hide();
});
$(".radio").change(function() {
$(".radio").prop('checked', false);
$(this).prop('checked', true);
});
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="testform" action="">
<a href="#modal1">
<!-- when the input textbox was clicked, modal will pop up -->
Label 1
<input readonly type="text" name="txt1" placeholder="inputTest">
</a>
<br>
<br>
<a href="#modal2">
<!-- when the input textbox was clicked, modal will pop up -->
Label 2
<input readonly type="text" name="txt2" placeholder="inputTest">
</a>
<!-- modal starts here -->
<div class="modalwrapper" id="modal1">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<button class="btn1" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
<div class="modalwrapper" id="modal2">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Mango</label>
<input class="radio" type="checkbox" name="fruit1" value="1">
<div class="clear"></div>
<label>Banna</label>
<input class="radio" type="checkbox" name="fruit2" value="2">
<div class="clear"></div>
<label>Grapes</label>
<input class="radio" type="checkbox" name="fruit3" value="3">
<div class="clear"></div>
<div class="savebutton">
<button class="btn2" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
</form>
On my Label 1 checkbox, you can have multiple checked. What I want here is that if checkbox checked is greater than 1, it will echo the value Multiple inside my textbox.
Please explain to me how your code works so that I can used in the future.
You can use .length to get the number of items found by a selector, so you can write:
if ($("#modal1 :checkbox:checked").length > 1) {
$("input[name=txt1]").val("multiple");
}
$(document).on("click", "input[name='txt1']", function() {
$('#modal1').show();
});
$(document).on("click", "input[name='txt2']", function() {
$('#modal2').show();
});
$(document).on("click", ".btn1", function() {
if ($('#modal1 :checkbox:checked').length > 1) {
$('input[name=txt1]').val('multiple');
} else {
$('input[name=txt1]').val($('#modal1 :checkbox:checked').val());
}
$('#modal1').hide();
});
$(document).on("click", ".btn2", function() {
$('#modal2').hide();
});
$(".radio").change(function() {
$(".radio").prop('checked', false);
$(this).prop('checked', true);
});
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0, 0, 0, .8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 {
display: table-cell;
}
.clear {
clear: both;
}
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="testform" action="">
<a href="#modal1">
<!-- when the input textbox was clicked, modal will pop up -->
Label 1
<input readonly type="text" name="txt1" placeholder="inputTest">
</a>
<br>
<br>
<a href="#modal2">
<!-- when the input textbox was clicked, modal will pop up -->
Label 2
<input readonly type="text" name="txt2" placeholder="inputTest">
</a>
<!-- modal starts here -->
<div class="modalwrapper" id="modal1">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<button class="btn1" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
<div class="modalwrapper" id="modal2">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Mango</label>
<input class="radio" type="checkbox" name="fruit1" value="1">
<div class="clear"></div>
<label>Banna</label>
<input class="radio" type="checkbox" name="fruit2" value="2">
<div class="clear"></div>
<label>Grapes</label>
<input class="radio" type="checkbox" name="fruit3" value="3">
<div class="clear"></div>
<div class="savebutton">
<button class="btn2" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
</form>
I have integrated a drop-down menu into my search-bar(using Bootstrap)
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#media screen and (min-width: 1000px) {
#adv-search {
width: 1110px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 1110px;
}
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search" id="searchBar" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000">
<span class="glyphicon glyphicon-remove"></span>
</button>
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form" style="font-family:Calibri;font-size:16px;background-color:#F7F7F7">
<br />
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtRequestNo" />
</div>
<label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtReferenceNo" />
</div>
<label for="CreatedBy" class="col-xs-2 col-form-label">Created By</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtCreatedBy" />
</div>
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
</button>
</div>
</div>
</div>
</div>
</div>
The textboxes in drop-down act as search filters.
Currently that drop-down menu doesn't hide unless the user clicks outside of that menu. Hence it blocks the other content.
I'm trying to achieve the following :
If I enter a particular data in the textbox and hit enter the drop-down contents should hide.
e.g. I enter 1234 as a search term insisde RequestNo. and Hit Enter the entire drop-down list should get hidden (or collapse back)
(I don't require mouse-hover to achieve this)
What additions should I do to my code to accomplish this?
You can use keycode to close dropdown on enter press
$('.dropdown-menu.dropdown-menu-right').keypress(function (e) {
if (e.keyCode == 13) {
$('.dropdown.dropdown-lg').removeClass('open');
}
});
$('.dropdown-menu.dropdown-menu-right').keypress(function(e) {
if (e.keyCode == 13) {
$('.dropdown.dropdown-lg').removeClass('open');
}
});
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#media screen and (min-width: 1000px) {
#adv-search {
width: 1110px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 1110px;
}
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search" id="searchBar" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000">
<span class="glyphicon glyphicon-remove"></span>
</button>
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form" style="font-family:Calibri;font-size:16px;background-color:#F7F7F7">
<br />
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtRequestNo" />
</div>
<label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtReferenceNo" />
</div>
<label for="CreatedBy" class="col-xs-2 col-form-label">Created By</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtCreatedBy" />
</div>
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
</button>
</div>
</div>
</div>
</div>
</div>