Set div with an ID grit template after clicking checkbox - javascript

I have a question. I have a simple chekcbox that in html looks like
<label class="container__control--checkbox">
<input type="checkbox" checked="checked" id="presentation_full_screen" class="container__control" onchange="_handleMainLayout()" />
<span>CLICK</span>
</label>
So when I click checkbox I fire up this type script:
_handleMainLayout() {
const layoutContainer = <HTMLInputElement>document.getElementById("main_layout");
const hideCommunicationCheckbox <HTMLInputElement>document.getElementById("presentation_full_screen");
if (hideCommunicationCheckbox.checked) {
layoutContainer.removeAttribute("style");
} else {
layoutContainer.style.gridTemplateColumns = "1fr";
}
}
So what id does it sets template on main layout (id: main_layout) from 1 column to 2 columns depends on this if checkbox is selected, and well it works.
But I was wondering, there are those selectors in css :checked and not(). So thing is, element with id main layout is way up DOM tree, and question can I somehow get that element using those selectors or any any other css/scss trick and toggle this grid-template-colum?
something like
.container__control :checked {
//get div with ID and set its grid-template-colum
}
.container__control :not(:checked) {
//get div with ID and set its grid-template-colum
}
Or am I left with only JS solution?

You can absolutely use CSS only to do that. The "trick" is where to insert the <input> element. Thanks to label attribute for you don't need to have <input> and <label> near one from the other. However <input> must be placed before #main_layout and on same DOM "branch" in order to use General (~) or adjacent (+) sibling combinator.
#main_layout {
height: 20px;
background-color: red;
}
:checked + #main_layout {
background-color: blue;
}
<label for="checkox">Click me</label>
<input type="checkbox" name="" id="checkox" hidden>
<div id="main_layout"></div>
no need for :not() in this case

Related

I need to remove a class after adding it clicking on same checkbox, not the document

I'm clicking on a checkbox to add some animation to a div, but when I want this animation to disappear I can only make it happen through $(document) click. Checkbox must add and then remove the class.
JS
$('#inOrder').click(function(e) {
$('.border').addClass('colorsborder');
e.stopPropagation();
$(document).click(function(e) {
$('.border').removeClass('colorsborder');
});
});
$('#inOrder').click(function(e) {
e.stopPropagation();
});
HTML
<input id="inOrder" type="checkbox" />
You may call toggleClass() method on the jQuery object (element) that you want to add or remove the class from. The method toggleClass will either:
add the desired class when the element doesn't have it.
or remove that class when the element has it already.
Here's a basic, live demo to illustrate the functionality:
const checkbox = $('#inOrder'),
relatedDiv = $('#related');
checkbox.on('change', () => relatedDiv.toggleClass('custom'))
/** just for demo purpose */
#related {
margin: 15px 0;
padding: 10px;
border: 1px solid #ccc;
}
#related.custom {
border-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inOrder" type="checkbox" />
<div id="related">My appearnace will change on checkbox click</div>
The above demo is pnly meant as a showcase of a possible solution that could be applied to your current problem and it WON'T do the exact thing you want to have unless you apply the required changes you need to suit your actual code/structuring.
Then you want to toggle the class not add it when you click on checkbox
$('#inOrder').click(function(e) {
$('.border').toggleClass('colorsborder');
....

EJS : Adding styles to infinite to do items in a list by their id's

I am trying to add styles to To-do items on my web page using their id field.
<body>
<h1><%- dayType %></h1>
<ul class="tasks">
<% for(i = 0 ; i < data.length ; i++){ %>
<input id='label-<%-i+1%>' type='checkbox'/>
<label for="label-<%-i+1%>"><li><%- data[i] %></li></label>
<% } %>
<li>
<form action="/" method="post">
<input type="text" placeholder="Enter To Do Item" name="items">
<input type="submit" value="Submit">
</form>
</li>
</ul>
In the code where I am using for loops, there is a checkbox and label to which I am adding styles. My css looks like this:
#label-1:checked ~ label[for=label-1],
#label-2:checked ~ label[for=label-2],
#label-3:checked ~ label[for=label-3],
#label-4:checked ~ label[for=label-4],
#label-5:checked ~ label[for=label-5]{
background: #6d335c;
border-bottom: 1px solid #34495E;
color: #d37b79;
}
When a checkbox of a to do item is checked, the corresponding to do item's style is changed. However, I am able to only change the style of a limited number of to do items because in css, we have to hard code the style for each To do item's id.
I want the website to enter as many to do items as possible and their checkboxes to run perfectly.
How to achieve this?
You could use a selector which will select all elements with an attribute starting with a specified string
[attr^=value]
see MDN
In your case:
*[id^="label-"]:checked ~ label[for^="label-"]{
background: #6d335c;
border-bottom: 1px solid #34495E;
color: #d37b79;
}
However, unless there is a reason why you have to distinguish between those elements by id, I'd suggest you use a class instead. Then you can be absolutely sure you are getting the right set of elements.
you dont have to hard code CSS for every label. You can just add the properties to all children elements of your <ul class="tasks"> parent element.For e.g .tasks input {} will select all the input tags inside your tasks class.

How to change label styling on checkbox :checked

I'm currently building a form that has checkboxes wrapped inside of labels. We are doing this because we need to swap our the original checkbox for an image. However, when the checkbox is checked, we need to make the label have a border to give some user feedback.
Here is the setup of the labels/checkboxes
<div class="one_column">
<label for="fieldname2_1_cb0">
<input name="fieldname2_1[]" id="fieldname2_1_cb0" class="field depItem group required" value="Alloy Wheel(s)" vt="Alloy Wheel(s)" type="checkbox"> <span>Alloy Wheel(s)</span>
</label>
</div>
We have tried going about is using the following but obviously doesn't work
label input[type="checkbox"]:checked + label {
border: 5px solid blue;
}
Any help would be appreciated!
I have managed to the the first checkbox using the code supplied below
window.onload=function() {
document.querySelector('input[type="checkbox"]').addEventListener('change',
function() {
if (this.checked) {
this.parentNode.classList.add('border-blue');
} else {
this.parentNode.classList.remove('border-blue');
}
})}
However, it only changes the first checkbox... there are 10 in total all following the same structure as above
Using CSS, there is no way to select parent elements from child elements.
If you are allowed to use JavaScript, you can solve it this way:
document.querySelectorAll('input[type="checkbox"]').forEach(function(el) {
el.addEventListener('change', function() {
if (this.checked) {
this.parentNode.classList.add('border-blue');
} else {
this.parentNode.classList.remove('border-blue');
}
})
})
.border-blue {
border: 5px solid blue;
}
It will check for changes on input. If it is checked, a class will be added. Otherwise, the class will be removed.

(Javascript/Wordpress) Show different content when checkbox is checked/unchecked

I'm trying to show different divs with different tables(Wordpress shortcode) in them by checking and unchecking a checkbox on my Wordpress site.
The code works fine on jsfiddle but on my website it doesn't happen anything when i use the checkbox. I want the div's to include different shortcodes. Maybe it has something to do with that?
Javascript:
$(document).ready(function() {
$("#overlay-1").change(function() {
$(".overlay-1").toggleClass("hide1337", this.unchecked)
$(".overlay-2").toggleClass("hide1338", this.unchecked)
}).change();
$("#overlay-1").change(function() {
$(".overlay-2").toggleClass("hide1337", this.unchecked)
$(".overlay-1").toggleClass("hide1338", this.unchecked)
}).change();
});
CSS
.hide1337 {
display: none;
}
.hide1338 {
display: show;
}
HTML
<div id="nav">
<input type="checkbox" name="overlay-1" id="overlay-1"> Checkbox
<br/>
</div>
<div class="overlay-1">
<br>shortcode2</div>
<div class="overlay-2">
<br>shortcode2</div>
http://jsfiddle.net/p6hFD/16/
No need for Javascript here. Go with pure CSS making use of pseudo selector :checked and sibling selector ~:
.overlay-1, .overlay-2 {
display: none;
}
#overlay-1:not(:checked) ~ .overlay-1 {
display: block;
}
#overlay-1:checked ~ .overlay-2 {
display: block;
}
<input type="checkbox" name="overlay-1" id="overlay-1"> Checkbox
<div class="overlay-1">
<br>shortcode1</div>
<div class="overlay-2">
<br>shortcode2</div>
Note:
For this to work the checkbox and the content containers that you want to hide/show must have the same parent element and the content containers must come after the checkbox.

elim clicked <label> <div> <checkbox>

Below is a jsfiddle link that has got the code in it that needs modifying.
http://jsfiddle.net/N44Ah/
This is HTML code within the above jsfiddle link
<label for="cb">
<div id="clickablediv">
<input name="cb" id="cb" type="checkbox"/>
</div>
</label>
<label for="cb">
<div id="clickablediv">
<input name="cb" id="cb" type="checkbox"/>
</div>
</label>
This is the javascript within the above jsfiddle link
$('#clickablediv').click(function () {
if ($(this).find('#cb').is(':checked')) {
$(this).animate({
opacity: 0.5
}, 250);
} else {
$(this).animate({
opacity: 1
}, 250);
}
});
and this is the basic CSS
#clickablediv {
width: 100px;
height: 100px;
background: blue;
}
Basically I can't changed the div id, class or details as they are created from php after a database query what pulls an array and then fills each div with the required info for that div and then populates the next div until all information has been displayed in different divs.
I understand it is the javascript that needs to be modified here but I am just unsure on how to do it as I am not any good at javascript.
I need the effect to be so what ever div you click is the div that is effected because at the minute what ever div you click it only effects the top div.
once again I can't changed the div's id, class or details.
This maybe un-relevant but I did have the same sort of issue when I was creating buttons and hidden divs in the same way except when clicking the buttons it needed to display the correct div tied to it however in the above question I need to do a dim effect as what you can see in the js above.
below is the jsfiddle link to the code about the buttons and hidden divs using a (elim) function in javascript I am not sure if the same sort of elim method needs to be adopted for my new problem I am having.
http://jsfiddle.net/gpDFc/
I have tried to mess around with the both javascripts but as I am no good I didn't managed to make a working script.
Thank you for your time in reading this and I look forward to yuor help.
ID of an element must be unique.
The ID selector will return the first element with the said id, so your code will attach the click handler only to the first div with id clickablediv not to the second
Since you have repeated at least twice that the id cannot be changed, use an attribute selector to select the div's with the said id.
$('div[id="clickablediv"]').click(function () {
if ($(this).find('[name="cb"]').is(':checked')) {
$(this).animate({
opacity: 0.5
}, 250);
} else {
$(this).animate({
opacity: 1
}, 250);
}
});
Distinct Values required in DOM
See here, modified fiddle:
http://jsfiddle.net/N44Ah/1/
Use class instead of id like below. For entire page you can use single id. If you have multiple id with same name, first id only will be affected.
<label for="cb">
<div class="clickablediv">
<input name="cb" id="cb" type="checkbox"/>
</div>
</label>
<label for="cb">
<div class="clickablediv">
<input name="cb" id="cb" type="checkbox"/>
</div>
</label>
$('.clickablediv').click(function () {
if ($(this).find('#cb').is(':checked')) {
$(this).animate({
opacity: 0.5
}, 250);
} else {
$(this).animate({
opacity: 1
}, 250);
}
});
.clickablediv {
width: 100px;
height: 100px;
background: blue;
}

Categories