CSS - li background color on checked radio - javascript

I am stuck with this code. I want to change the background color of the li when the respective radio button is selected. Please see attached fiddle for a demo.
Is it possible to do without editing the original html as this is produced by a core file that I don't really want to edit?
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
Thanks in advance.

Since #kevin-lewis already mentioned, that there are no parent selectors in css, in order to have a pure css solution, we need to cheat a bit with styling the <label> tag, so that it fills the whole parent <li> element (using absolute positioning) and has the same margins and borders. The only fiddly bit that may not work reliably is the left padding of the styled <label> - it has to take into account the width of the radio button - hence the "magic" 2.6em.
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
position: relative;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
input:checked + label{
display: inline-block;
background-color: DodgerBlue;
height: 100%;
width: 100%;
z-index: -1;
padding: .5em 1em;
padding-left: 2.6em;
border: 1px transparent;
border-radius: 4px;
box-sizing: border-box;
margin: 0;
position: absolute;
top: 0;
left: 0;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1</label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2</label>
</li>
</ul>
</div>

I suppose you need to change the color of the parent li. In this case this is how I am doing it.
let imps = Array.from(
document.querySelectorAll(".wc-deposits-option [type='radio']")
);
imps.map((r) => {
r.addEventListener("change", () => action(r));
window.onload = (() => action(r));
});
function action(r){
// this function is called when the window loads & when a radio button is clicked
imps.map( R => {R.parentElement.style.background = "white";})
if (r.checked) {
r.parentElement.style.background = "gold";
}
}
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
I hope this is what you need.
UPDATE
Yet an other JavaScript solution is to check the radio when you click the <li>parent. I think this is more UI friendly.
let lis = Array.from(
document.querySelectorAll(".wc-deposits-option li")
);
lis.map((li) => {
li.addEventListener("click", () => action(li));
window.onload = (() => action(li));
});
function action(li){
lis.map((_li) => {_li.style.background = "white"});
let thisRadio = li.querySelector("[type='radio']");
thisRadio.checked = true;
li.style.background = "gold"
}
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>

Use onclicks for each radio element
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" onclick = "toggleBackground(true)" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" onclick = "toggleBackground(false)" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
Then use the following js code:
function toggleBackground(type) {
if(type) {
document.getElementById('wc-option-pay-deposit').style.background = 'color-1';
document.getElementById('wc-option-pay-full').style.background = 'color-2';
} else {
document.getElementById('wc-option-pay-deposit').style.background = 'color-2';
document.getElementById('wc-option-pay-full').style.background = 'color-1';
}
}

Add :checked for radio in css and background-color: #ff0000;
Test
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
input[type=radio]:checked + label {
background-color: #ff0000;
font-style: normal;
}
input[type=radio] + label {
color: #ccc;
font-style: italic;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1</label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2</label>
</li>
</ul>
</div>

Please review solution link below. I used javascript to fixed this problem.
I hope this answer will be helpful for you
https://codepen.io/dev_aman/pen/YOxjpR

Using vanilla JavaScript :
function toggleItem ( input )
{
input.closest( 'li' ).classList.toggle( 'wc-deposits-option-checked' );
}
function toggleOptions ()
{
let
list = document.querySelector( '.wc-deposits-option' ),
checked = list.querySelector( 'input:checked' );
toggleItem( checked );
list.addEventListener( 'input', () => {
let target = event.target;
toggleItem( target );
toggleItem( checked );
checked = target;
});
}
toggleOptions();
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
.wc-deposits-option-checked
{
background-color: #00F;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>

Related

square radios highlight on checked

I am trying to build a radio survey question with 5 square radio buttons, but I am having trouble getting it to change color while the radio is checked or focused
I am also using Vue so it is recommended to put the input inside the label
https://codepen.io/phongoli0/pen/qBbXmoe?editors=1100
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:focus+label {
border: 2px dashed green;
}
.squareRadios input[type="radio"]:checked+label {
background-color: blue;
border-color: #4c4;
}
<div class="squareRadios">
<label>
0
<input type="radio" value="0" /></label>
<label>
1
<input type="radio" value="1" /></label>
<label>
2
<input type="radio" value="2" /></label>
<label>
3
<input type="radio" value="3" /></label>
<label>
4
<input type="radio" value="4" /></label>
<label>
5
<input type="radio" value="5" /></label>
</div>
This is because you have the <input type="radio"> inside your <label>, not next to it and the :focus property has to be on the <label> not on the <input type="radio"> radio which is hidden.
The dashed green border on :focus disappears after clicking on the label because the input will hold the :focus after clicking on it.
Here a working live Codepen (case: input and label are siblings)
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:checked + label {
background-color: blue;
border-color: #4c4;
}
.squareRadios label:focus {
border: 2px dashed green;
outline: none;
}
<div class="squareRadios">
<input id="radio0" type="radio" value="0" name="squareradios" />
<label tabindex="1" for="radio0">
0
</label>
<input id="radio1" type="radio" value="1" name="squareradios" />
<label tabindex="1" for="radio1">
1
</label>
<input id="radio2" type="radio" value="2" name="squareradios" />
<label tabindex="1" for="radio2">
2
</label>
<input id="radio3" type="radio" value="3" name="squareradios" />
<label tabindex="1" for="radio3">
3
</label>
<input id="radio4" type="radio" value="4" name="squareradios" />
<label tabindex="1" for="radio4">
4
</label>
<input id="radio5" type="radio" value="5" name="squareradios" />
<label tabindex="1" for="radio5">
5
</label>
</div>
EDIT
New Request:
I am also using Vue so it is recommended to put the input inside the label.
I would use JavaScript to handle this situation: toggle a class (I used a class called "checked") on the label to add the style.
var labels = document.querySelectorAll("label");
for (var i = 0; i < labels.length; i++) {
labels[i].addEventListener(
"click",
function (e) {
e.preventDefault();
e.stopPropagation();
if (this.classList.contains("checked")) {
this.classList.remove("checked");
this.firstElementChild.checked = false;
} else {
var checked = document.querySelector("label.checked");
if (checked) {
checked.classList.remove("checked");
checked.firstElementChild.checked = false;
}
this.classList.add("checked");
this.firstElementChild.checked = true;
}
},
false
);
}
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios label.checked {
background-color: blue;
border-color: #4c4;
}
.squareRadios label:focus {
border: 2px dashed green;
outline: none;
}
<div class="squareRadios">
<label tabindex="1">
0
<input name="squareradios" type="radio" value="0" />
</label>
<label tabindex="1">
1
<input name="squareradios" type="radio" value="1" />
</label>
<label tabindex="1">
2
<input name="squareradios" type="radio" value="2" />
</label>
<label tabindex="1">
3
<input name="squareradios" type="radio" value="3" />
</label>
<label tabindex="1">
4
<input name="squareradios" type="radio" value="4" />
</label>
<label tabindex="1">
5
<input name="squareradios" type="radio" value="5" />
</label>
</div>
Here a working live Codepen (case: input is inside label)
I know there are several answers already but this is exactly what you're looking for:
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
}
.squareRadios input[type="radio"]:checked + label {
background: red;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:focus + label {
border: 2px dashed green;
}
.squareRadios input[type="radio"]:checked + label {
background-color: blue;
border-color: #4c4;
}
<div class="squareRadios">
<input type="radio" value="0" name="my_radios"/>
<label>0</label>
<input type="radio" value="1" name="my_radios"/>
<label>1</label>
<input type="radio" value="2" name="my_radios"/>
<label>2</label>
<input type="radio" value="3" name="my_radios"/>
<label>3</label>
<input type="radio" value="4" name="my_radios">
<label>4</label>
<input type="radio" value="5" name="my_radios"/>
<label>5</label>
</div>
Now here's what I've changed to make things work:
Like everybody else says, you'll need to put the input and label next to each other.
I changed the styling of the radio buttons. I made them absolute instead of fixed and gave them a 100% width and height so they are clickable and fill out the whole label.
I gave each radio button a name so they would be grouped to gether and actually work like radio buttons (only 1 button can be selected, not multiple)
First thing is that you are hiding the main circle of radio button, by setting opacity and width to 0, with this the radio button is not be able to checked.
Second thing *+ symbol: It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
position: fixed;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:focus + label {
border: 2px dashed green;
}
.squareRadios input[type="radio"]:checked + label {
background-color: blue;
border-color: #4c4;
}
<div class="squareRadios">
<input type="radio" value="5" />
<label>5</label>
</div>
So, remove the opacity and width properties with that your radio button can be checked and set label adjacent to input field.
*Source: CSS selector for a checked radio button's label
Labels should be next to its thing, not wrap around it.
Second thing is that you made your radios like this:
opacity: 0;
position: fixed;
width: 0;
If you set your opacity: 1; you see you where not really clicking on anything.
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 1;
position: fixed;
width: 0;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:focus+label {
border: 2px dashed green;
}
.squareRadios input[type="radio"]:checked+label {
background-color: blue;
border-color: #4c4;
}
<div class="squareRadios">
<input type="radio" value="0" />
<label>0</label>
<input type="radio" value="1" checked />
<label> 1</label>
<label>
2
<input type="radio" value="2" /></label>
<label>
3
<input type="radio" value="3" /></label>
<label>
4
<input type="radio" value="4" /></label>
<label>
5
<input type="radio" value="5" /></label>
</div>

Add active class to matching label of a checkbox

I am trying to add an active class on to the matching label of a checkbox input that is outside of the parent ul.
I have some labels set up that are acting as buttons that have a for="" value that matches the ID of the checkbox, so when they're clicked they check the matching input, this is fine but what I would like to do is have a script that when the checkbox is checked or has an active class on it to add an active class to it's matching label in the .labelBtns section.
So far I've wrote some jQuery that console logs the id for the checkbox and the for for the matching label but I am struggling to connect the logic together to achieve what I want, so any help would be awesome.
$('.m-label-inline').filter('.selected').each(function(i) {
var idValue = $(this).find('input').attr('id');
console.log(idValue);
$('.sizeLabel').each(function() {
var idValue2 = $(this).attr('for');
console.log(idValue2);
});
});
html {
box-sizing: border-box;
font-size: 62.5%;
-webkit-overflow-scrolling: touch;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 1.6rem;
margin: 0 auto;
max-width: 50rem;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.m-refinement {
display: flex;
flex-wrap: wrap;
}
.m-label-inline {
background: #f8f8f8;
border: 0.1rem solid #ddd;
flex-basis: calc(50% - 1rem);
margin-right: 2rem;
margin-top: 2rem;
max-width: calc(50% - 1rem);
padding: 1rem;
}
.m-label-inline:nth-child(even) {
margin-right: 0;
}
.labelBtns {
display: flex;
flex-wrap: wrap;
margin-bottom: -12em;
margin-left: -2rem;
margin-top: 2rem;
}
.sizeLabel {
color: #111;
cursor: pointer;
flex-basis: 50%;
max-width: 50%;
padding-bottom: 2rem;
padding-left: 2rem;
user-select: none;
}
.labelText {
background: white;
border: 0.2rem solid #222;
color: #111;
display: inline-block;
padding: 1rem 0.6rem;
text-align: center;
width: 100%;
}
.selected {
background: tomato !important;
}
.selectedLabel .labelText {
background: tomato;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="m-refinement">
<li class="selected swatch-xs m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="XS" name="XS" data-name="size" checked="checked" data-value="XS" title="Refine by Size: XS">
<label for="XS">XS</label>
</li>
<li class=" swatch-s} m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="S" name="S" data-value="S" title="Currently Refined by Size: S">
<label for="S">S</label>
</li>
<li class="swatch-m} m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="M" name="M" data-value="M" title="Currently Refined by Size: M">
<label for="M">M</label>
</li>
<li class="swatch-l} m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="L" name="L" data-value="L" title="Currently Refined by Size: L">
<label for="L">L</label>
</li>
<li class="swatch-xl m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="XL" name="XL" data-name="size" data-value="XL" title="Refine by Size: XL">
<label for="XL">XL</label>
</li>
<li class="swatch-2xl m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="2XL" name="2XL" data-name="size" data-value="2XL" title="Refine by Size: 2XL">
<label for="2XL">2XL</label>
</li>
</ul>
<section class="labelBtns">
<label class="sizeLabel" for="XS">
<span class="labelText">Size: XS</span>
</label>
<label class="sizeLabel" for="S">
<span class="labelText">Size: S</span>
</label>
<label class="sizeLabel" for="M">
<span class="labelText">Size: M</span>
</label>
<label class="sizeLabel" for="L">
<span class="labelText">Size: L</span>
</label>
<label class="sizeLabel" for="XL">
<span class="labelText">Size: XL</span>
</label>
<label class="sizeLabel" for="2XL">
<span class="labelText ">Size: 2XL</span>
</label>
</section>
To achieve this you simply need to hook to the change event of the checkboxes and then set the class on the closest() li, depending on whether the box is checked or not. You can also use the id of the checkbox to find the related label by its for attribute:
Try this:
$(':checkbox').on('change', function() {
$(this).closest('li').add('label[for="' + this.id + '"] span').toggleClass('selected', this.checked);
}).trigger('change');
Note that the trigger('change') makes the logic run when the page loads to automatically assign the class without you needing to manually put it in to the HTML.
$(':checkbox').on('change', function() {
$(this).closest('li').add('label[for="' + this.id + '"] span').toggleClass('selected', this.checked);
}).trigger('change');
html {
box-sizing: border-box;
font-size: 62.5%;
-webkit-overflow-scrolling: touch;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 1.6rem;
margin: 0 auto;
max-width: 50rem;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.m-refinement {
display: flex;
flex-wrap: wrap;
}
.m-label-inline {
background: #f8f8f8;
border: 0.1rem solid #ddd;
flex-basis: calc(50% - 1rem);
margin-right: 2rem;
margin-top: 2rem;
max-width: calc(50% - 1rem);
padding: 1rem;
}
.m-label-inline:nth-child(even) {
margin-right: 0;
}
.labelBtns {
display: flex;
flex-wrap: wrap;
margin-bottom: -12em;
margin-left: -2rem;
margin-top: 2rem;
}
.sizeLabel {
color: #111;
cursor: pointer;
flex-basis: 50%;
max-width: 50%;
padding-bottom: 2rem;
padding-left: 2rem;
user-select: none;
}
.labelText {
background: white;
border: 0.2rem solid #222;
color: #111;
display: inline-block;
padding: 1rem 0.6rem;
text-align: center;
width: 100%;
}
.selected {
background: tomato !important;
}
.selectedLabel .labelText {
background: tomato;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="m-refinement">
<li class="swatch-xs m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="XS" name="XS" data-name="size" checked="checked" data-value="XS">
<label for="XS">XS</label>
</li>
<li class=" swatch-s} m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="S" name="S" data-value="S">
<label for="S">S</label>
</li>
<li class="swatch-m} m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="M" name="M" data-value="M">
<label for="M">M</label>
</li>
</ul>
<section class="labelBtns">
<label class="sizeLabel" for="XS">
<span class="labelText">Size: XS</span>
</label>
<label class="sizeLabel" for="S">
<span class="labelText">Size: S</span>
</label>
<label class="sizeLabel" for="M">
<span class="labelText">Size: M</span>
</label>
</section>

Width automatically changes when JavaScript function occurs?

I'm currently experiencing something rather strange. I'm building a website for a client which includes a horizontal nav bar that dynamically changes the page content without reloading via javascript. Three of the four tabs function correctly, however when I select the last tab, the side bar dramatically increases in width, pushing my service form out of it's background and off the page - even though the javascript shouldn't be affecting that element at all. I've been playing with it all day and cannot figure out what's causing this.
My JavaScript is:
var jsOverview = document.getElementById('overview');
var jsQuote = document.getElementById('quote');
function changeTextQuote() {
if (jsOverview.style.display === 'none') {
jsOverview.style.display = 'block';
jsQuote.style.display = 'none';
} else {
jsOverview.style.display = 'none';
jsQuote.style.display = 'block';
}
}
<!-- begin snippet: js hide: false console: true babel: false -->
/*Service Pages CSS*/
.services {
display: grid;
width: 100%;
margin: 0 600px;
margin-bottom: 10px;
}
.side-bar {
grid-column: 1;
grid-row: 1;
background: black;
border-bottom: 5px solid white;
border-left: 5px solid white;
border-top: 5px solid white;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: 100%;
height: 258px;
margin: 30px 0;
margin-right: 25px;
}
ul.side-bar-list {
text-align: left;
padding: 0;
width: 100%;
}
.side-bar-list li {
margin-bottom: 10px;
margin-top: 10px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 10px;
width: 100%;
}
.side-bar-list li:hover {
color: white;
text-decoration: none;
background-color: darkred;
}
.side-bar-list li:focus {
color: white;
text-decoration: none;
background-color: darkred;
}
.side-bar ul {
list-style-type: none;
}
.side-bar-item {
color: white;
text-align: left;
text-decoration: none;
}
.side-bar-item:hover {
color: white;
text-decoration: none;
}
.side-bar-item:focus {
color: white;
text-decoration: none;
}
.services-content {
grid-column: 2;
grid-row: 1;
background: rgba(90, 90, 90, 0.6);
border: 5px solid black;
border-radius: 5px;
padding-left: 10px;
width: 30%;
margin-bottom: 5px;
}
.serviceForm {
background: rgba(90, 90, 90, 0.6);
border: 5px solid black;
border-radius: 5px;
grid-column: 2;
grid-row: 1;
display: grid;
grid-column-gap: 20px;
width: 30%;
margin: 20px auto;
padding: 10px;
padding-left: 20px;
}
.col-left {
grid-column: 1;
grid-row: 1;
}
.col-right {
grid-column: 3;
grid-row: 1;
}
.commentText {
grid-column-start: 1;
grid-column-end: 4;
}
label {
color: black;
}
span {
color: white;
}
textarea[name=comments] {
resize: none;
padding: 0;
margin: 0;
width: 100%;
max-width: 520px;
height: 150px;
}
HTML:
<body>
<div class="services">
<div class="side-bar">
<ul class="side-bar-list">
<li><a class="side-bar-item" href="#" onclick="changeTextOverview(); return false;">Overview</a></li>
<li><a class="side-bar-item" href="#" onclick="changeTextInterior(); return false;">Interior Lighting</a></li>
<li><a class="side-bar-item" href="#" onclick="changeTextExterior(); return false;">Exterior Lighitng</a></li>
<li><a class="side-bar-item" href="#" onclick="changeTextQuote(); return false;">Request a Quote</a></li>
</ul>
</div>
<div class="services-content">
<div id="overview">
<h1>Lighting Service:</h1><br />
<p>Text removed for sake of business entity.</p>
</div>
<div id="quote" style="display: none;" <h1>Request a Quote</h1>
<form class="serviceForm" action="mailto:companyemail" method="post" enctype="text/plain">
<div class="col-left">
<label>
<span>* Name:</span><br />
<input type="text" name="LightingRequestName" required />
</label><br />
<label>
<span>* Email:</span><br />
<input type="text" name="LightingRequestEmail" required />
</label><br />
<label>
<span>Company:</span><br />
<input type="text" name="LightingRequestCompany" />
</label><br />
<label>
<span>Address:</span><br />
<input type="text" name="LightingRequestAddress" />
</label><br />
</div>
<div class="col-right">
<label>
<span>City:</span><br />
<input type="text" name="LightingRequestCity" />
</label><br />
<label>
<span>State:</span><br />
<input type="text" name="LightingRequestState" />
</label><br />
<label>
<span>Zip Code:</span><br />
<input type="text" name="LightingRequestZip" />
</label><br />
<label>
<span>Phone Number:</span><br />
<input type="text" name="LightingRequestNumber" />
</label><br />
</div>
<label class="commentText">
<span>Comments:</span><br />
<textarea name="comments"></textarea><br />
</label>
<div class="formSubmitButton">
<input type="submit" value="Submit" /><br />
<br />
</div>
</form>
</div>
</div>
</div>
<script src="~/Content/LightingPageText.js"></script>
<script src="~/Content/ServicesQuote.js"></script>
</body>
I'm sure it's probably something really stupid I overlooked, but any help is appreciated!
EDIT: I was looking around in the inspect window on chrome, whenever I click the button to display the form, the actual grid column the side bar is in expands, pushing the rest of the content off of the screen. Not sure why this is happening. I'm still playing with it, but hopefully this revelation will help lead to some answers.
If this is a direct copy-paste from your source, you forgot the closing angle bracket on #quote.
Yours: <div id="quote" style="display: none;" <h1>Request a Quote</h1>
Updated: <div id="quote" style="display: none;"> <h1>Request a Quote</h1>
Note the > before opening <h1>.

Pre Check the radio button according to value of Day

I have assigned content to few Radio buttons which when clicked will show content of it. I would like to pre-check the tab button according to day.
For eg. if today is Sun, on page load it would show contents of Sunday and if it is Tuesday, then on page load it would show the contents of Tuesday.
My code below:
#import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
background: #E5E4E2;
}
.tabinator {
background: #fff;
padding: 15px;
font-family: Open Sans;
}
.tabinator input {
display: none;
}
.tabinator label {
box-sizing: border-box;
display: inline-block;
padding: 15px 25px;
color: #ccc;
margin-bottom: -1px;
margin-left: -1px;
}
.tabinator label:before {
content: '';
display: block;
width: 100%;
height: 15px;
background-color: #fff;
position: absolute;
bottom: -11px;
left: 0;
z-index: 10;
}
.tabinator label:hover {
color: #888;
cursor: pointer;
}
.tabinator input:checked+label {
position: relative;
color: #000;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
}
.tabinator input:checked+label:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7 {
display: none;
border-top: 1px solid #bbb;
padding: 15px;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4,
#tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7 {
display: block;
box-shadow: 0 0 15px #939393;
}
<div class="tabinator">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">Sunday</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">Monday</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">Tuesday</label>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">Wednesday</label>
<input type="radio" id="tab5" name="tabs">
<label for="tab5">Thursday</label>
<input type="radio" id="tab6" name="tabs">
<label for="tab6">Friday</label>
<input type="radio" id="tab7" name="tabs">
<label for="tab7">Saturday</label>
<div id="content1">
<p>
This is Sunday
</p>
</div>
<div id="content2">
<p>This is Monday
</p>
</div>
<div id="content3">
<p>This is Tuesday
</p>
</div>
<div id="content4">
<p>This is Wednesday
</p>
</div>
<div id="content5">
<p>This is Thursday
</p>
</div>
<div id="content6">
<p>
This is Friday
</p>
</div>
<div id="content7">
<p>
This is Saturday
</p>
</div>
</div>
So you can do this:
Get the current day - this matches the index of the list of radio buttons - so you can do this:
$('.tabinator input[name=tabs]').eq(new Date().getDay()).prop('checked', true);
A few of the labels for the radio weren't correctly labelled - fixed that too.
If you want to show the tab for tomorrow, you can try this:
$('.tabinator input[name=tabs]').eq(new Date().getDay() + 1).prop('checked', true);
See demo below:
$(document).ready(function(){
$('.tabinator input[name=tabs]') // get all tabs
.eq(new Date().getDay()) // select the current tab
.prop('checked', true); // check it
});
#import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
background: #E5E4E2;
}
.tabinator {
background: #fff;
padding: 15px;
font-family: Open Sans;
}
.tabinator input {
display: none;
}
.tabinator label {
box-sizing: border-box;
display: inline-block;
padding: 15px 25px;
color: #ccc;
margin-bottom: -1px;
margin-left: -1px;
}
.tabinator label:before {
content: '';
display: block;
width: 100%;
height: 15px;
background-color: #fff;
position: absolute;
bottom: -11px;
left: 0;
z-index: 10;
}
.tabinator label:hover {
color: #888;
cursor: pointer;
}
.tabinator input:checked+label {
position: relative;
color: #000;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
}
.tabinator input:checked+label:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7 {
display: none;
border-top: 1px solid #bbb;
padding: 15px;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4 #tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7 {
display: block;
box-shadow: 0 0 15px #939393;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabinator">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">Sunday</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">Monday</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">Tuesday</label>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">Wednesday</label>
<input type="radio" id="tab5" name="tabs">
<label for="tab5">Thursday</label>
<input type="radio" id="tab6" name="tabs">
<label for="tab6">Friday</label>
<input type="radio" id="tab7" name="tabs">
<label for="tab7">Saturday</label>
<div id="content1">
<p>
This is Sunday
</p>
</div>
<div id="content2">
<p>This is Monday
</p>
</div>
<div id="content3">
<p>This is Tuesday
</p>
</div>
<div id="content4">
<p>This is Wednesday
</p>
</div>
<div id="content5">
<p>This is Thursday
</p>
</div>
<div id="content6">
<p>
This is Friday
</p>
</div>
<div id="content7">
<p>
This is Saturday
</p>
</div>
</div>

if has no child how to not toggle?

Hi I develop checkbox and I have some issue.if my li parents has no ul child it musn't be toggle. I'm talking about red arrows which is the left of li element.
I got solved problem thanks to #Arun P Johny just one more thing left I have to do is when clicked label checkbox musn't be checked only thoose which has got ul child
see my codeson codepen
html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No Title</title>
</head>
<body>
<div class="new-checkbox">
<ul>
<li class="hasUl">
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li class="hasUl">
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- new checkbox-->
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js" ></script>
</body>
</html>
css
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
li.downCheck:before
{
content: "\25bc" !important;
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
/*
.new-checkbox ul li:before {
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center;
margin-top: 2px;
}
li.downCheck:before{
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important;
margin-top: 2px;
}
*/
.new-checkbox li {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
 
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
content: "\25bc";
}
.new-checkbox li ul {
display: none;
}
.new-checkbox li.has-checked > ul {
display: block;
}
jquery codes
$(document).ready(function() {
$('.new-checkbox input[type=checkbox]').on("change", function() {
var checked = this.checked,
$li = $(this).parent();
$li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked);
$li.parentsUntil('.new-checkbox', 'li').each(function() {
var $checks = $(this).find('ul input[type=checkbox]');
$(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length);
$(this).toggleClass('has-checked', $checks.is(':checked'));
});
});
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").stop().toggleClass("downCheck");
});
$(".new-checkbox ul li > * li:has(ul)").addClass("downCheck");
});
You can use the has-checked class to style the element, there is no need to have a new class
$(document).ready(function() {
$('.new-checkbox li:has(ul)').addClass('parent');
$('.new-checkbox input[type=checkbox]').on("change", function() {
var checked = this.checked,
$li = $(this).parent();
$li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked);
$li.parentsUntil('.new-checkbox', 'li').each(function() {
var $checks = $(this).find('ul input[type=checkbox]');
$(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length);
$(this).toggleClass('has-checked', $checks.is(':checked'));
});
});
});
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
li.parent.has-checked:before {
content: "\25bc" !important;
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
/*
.new-checkbox ul li:before {
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center;
margin-top: 2px;
}
li.downCheck:before{
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important;
margin-top: 2px;
}
*/
.new-checkbox li {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
content: "\25bc";
}
.new-checkbox li ul {
display: none;
}
.new-checkbox li.has-checked > ul {
display: block;
}
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js"></script>
<div class="new-checkbox">
<ul>
<li class="hasUl">
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li class="hasUl">
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- new checkbox-->
Replace Code
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li:has(ul)").stop().toggleClass("downCheck");
});
From
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").stop().toggleClass("downCheck");
});
Codepen Demo

Categories

Resources