Develop Reference

How to get more toggle hide/show div with different class

I have a toggle that show or hide a div class. The status toggle is saved in local storage, so after page refresh the desired setting is maintained.
Now I'm trying to get another toggle that performs the same functions on a different class. I tried with a simple copy / paste changing the names of the classes and functions, but it doesn't work.
Can anyone give me a suggestion?
Fiddle: https://jsfiddle.net/snake93/s0rx4ube/9/
function save() {
var checkbox = document.getElementById("ck1");
localStorage.setItem("ck1", JSON.stringify(checkbox.checked));
}
function isChecked(isOn) {
if (isOn === true) {
$(".hideme").show();
} else {
$(".hideme").hide();
}
}
//for loading
var checked = JSON.parse(localStorage.getItem("ck1"));
document.getElementById("ck1").checked = checked;
console.log(checked);
$(document).ready(function(){
isChecked(checked)
$(".switch input").on("change", function(e) {
const isOn = e.currentTarget.checked;
console.log(isOn)
isChecked(isOn);
});
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/*END OF TOGGLE SWITCH*/
.hideme {
padding:20px;
background: blue;
color: white;
font-weight: 800;
text-align: center;
}
<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="ck1" onchange="save()">
<span class="slider round hide-off"></span>
</label>
<br><br>
<div class="hideme">Please hide me, but bring me back later ;-)</div>

I believe you can have more dynamism by making better use of css selectors and adding an attribute with the same input id to the divs you intend to show/hide.
HTML:
<label class="switch">
<input type="checkbox" id="ck1">
<span class="slider round hide-off"></span>
</label>
<br><br>
<label class="switch">
<input type="checkbox" id="ck2">
<span class="slider round hide-off"></span>
</label>
<br><br>
<div class="hideme" id="label-ck1">Please hide me...</div>
<div class="hideme" id="label-ck2">Please hide me...</div>
JAVASCRIPT
$(document).ready(function(){
getLocalStatus()
$(".switch input").on("change", function(e) {
const element = e.currentTarget;
saveStatus(element)
setLabelVisibility(element.getAttribute('id'),element.checked);
})
})
function getLocalStatus() {
const checkboxes = $('input[type=checkbox]');
checkboxes.each(function(index,checkbox){
const checkboxId = checkbox.getAttribute('id')
var currentStatus= localStorage.getItem(checkboxId)
if (currentStatus == "true") {
currentStatus = true;
} else {
currentStatus = false;
}
checkbox.checked = currentStatus;
setLabelVisibility(checkboxId, currentStatus)
})
}
function setLabelVisibility(id,status){
const label = $("#label-" + id + "");
if(status == false){
label.hide();
return;
}
label.show();
}
function saveStatus(e) {
localStorage.setItem(e.getAttribute('id'), e.checked)
}

You need to give your show/hide DIVs different IDs and pass those into the function. (this is just one of several ways)
The element you want to show/hide needs a unique ID so we can differentiate it from the others, so forget about using a class as a selector here. The toggle function takes two parameters, the element that called it and the element ID that gets toggled. In the HTML below, 'this' will refer to that specific checkbox when its clicked. '#div1' and '#div2' are the IDs of the elements to toggle.
I've added in your local storage bit.
function toggle(p, c){
if ($(p).prop("checked")){
$(c).show();
}else{
$(c).hide();
}
localStorage.setItem($(p).attr("id"), JSON.stringify($(p).prop("checked")));
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/*END OF TOGGLE SWITCH*/
.hideme{
padding:20px;
background: blue;
color: white;
font-weight: 800;
text-align: center;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="ck1" onchange="toggle(this, '#div1')">
<span class="slider round hide-off"></span>
</label>
<label class="switch">
<input type="checkbox" id="ck2" onchange="toggle(this, '#div2')">
<span class="slider round hide-off"></span>
</label>
<br><br>
<div id="div1" class="hideme">Please hide me, but bring me back later ;-)</div>
<div id="div2" class="hideme">Please hide me, but bring me back later ;-)</div>

This is another possible solution and one that I would prefer:
Change the input as so:
<input type="checkbox" id="ck1" class="btn" data-toggle-id="#div1">
Then the javascript (with jquery) would look like this instead:
$('.btn').on('change', function(){
var $d = $($(this).attr('data-toggle-id'));
if ($(this).prop("checked")){
$d.show();
}else{
$d.hide();
}
});

How do I add an X tag in a search bar

I am trying to code a website that has a search bar. Currently, I am polishing it up and adding some features to the site. One feature I want to add is an X every time someone types something into the search box and I want it to clear the text in the input. Technically I have achieved this but it does not feel so nice. I want it to act as the X at reverb.com.
Here is my version:
function deleteButton() {
var deletebtn = document.getElementById("deletebtn");
var input = document.getElementById("inputbar");
if (input.value.length >= 1) {
deletebtn.style.visibility = "visible";
deletebtn.style.cursor = "pointer";
}
}
function clearSearch() {
var input = document.getElementById("inputbar");
var deletebtn = document.getElementById("deletebtn");
deletebtn.style.visibility = "hidden";
input.value = "";
}
.exitbtn {
margin-top: 39px;
display: inline-block;
border: 1px solid rgba(0, 0, 0, 0.5);
border-left: none !important;
border-right: 1px solid rgba(0, 0, 0, 0.5) !important;
color: rgba(0, 0, 0, 0.5);
font-size: 16px;
background: none;
outline: none;
transition: 0.3s;
}
.exitbtn img {
visibility: hidden;
}
.exitbtn img:hover {
transition: 0.3s;
opacity: 1;
content: url("images/orange-delete-sign.png");
}
.delete-sign {
height: 31px;
opacity: 0.7;
display: inline-block;
}
<input type="text" name="search" value="" onkeyup="enterSearch(); deleteButton();" autocomplete="off" id="inputbar" class="searchbar" autocorrect="off" autocapitalize="off" tabindex="0">
<button onclick="clearSearch()" class="exitbtn extspacer"><img id="deletebtn" class="delete-sign" src="images/grey-delete-sign.png"></button>
I am showing my code just in case you are wanting it.
Here are some images of it working:
If you are wondering why I don't like this method, it is because when you hover over the button,
it is still there and the Reverb version completely disappears and acts like a normal text box.

Try input type="search". It is an inbuilt input type in HTML which creates a cross as soon as a character is entered in the input field.
Here's an example for the ease of understanding:
input { /* You could use a class name/id as well */
border-radius: 5px;
}
.Search-icon {
border-style: outset;
}
<input type="search" class="search" placeholder="some text"><span class="Search-icon">search</span>

If you want an 'X' you can use
×
(I would have commented this but I do not have enough SO reputation to comment)

You can easily do it with jQuery!
To form the jQuery code in a sentence:
If Input not empty = show "X".
If click on "X" input value = empty
$(".clearable").each(function() {
const $inp = $(this).find("input:text"),
$cle = $(this).find(".clearable__clear");
$inp.on("input", function(){
$cle.toggle(!!this.value);
});
$cle.on("touchstart click", function(e) {
e.preventDefault();
$inp.val("").trigger("input");
});
});
.clearable{
position: relative;
display: inline-block;
}
.clearable input[type=text]{
padding-right: 1em;
box-sizing: border-box;
}
.clearable__clear{
display: none;
position: absolute;
right:0; top:0;
padding: 0 8px;
font-style: normal;
user-select: none;
cursor: pointer;
}
.clearable input::-ms-clear { /* Remove IE default X */
display: none;
}
/*
Font Size
*/
input {
font-size: 30px;
}
.clearable__clear {
font-size: 40px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<span class="clearable">
<input type="text" placeholder="Search...">
<i class="clearable__clear">×</i>
</span>

Hiding an element in internet explorer leaves artifacts on the screen (IE 10-11)

We use custom selectbox elements for our page (for reasons), but in one specific place and only with IE (in my case version 10 and 11), there is a problem.
When you open the box and close it, sometimes the browser leaves visual artifacts of that element. If there is a button below the element (in the opened state), then those artifacts are still on top of that button UNTIL you hover over the button, then those artifacts disappear at that place.
I think everyone experienced this behaviour at some point in his life with windows or something else. Sorry if my description isn't perfect.
Here are some screenshots (The red boxes are censored text, sorry):
Open state:
Closed state with artifacts:
Hope my description is accurate, I desperately need a fix for this.
I can't reproduce it on my system, but our QA guy can reproduce it consistently. It also changes depending on the size of the browser. On some sizes it doesn't seem to happen at all. It must be some weird rendering glitch of IE.
I don't think it has anything to do with our custom selectbox element, because it happens only in this specific place and in our old design we experienced it in a different place with a completely different element. At that time I thought it's because the DOM is too complicated for IE, but this page has almost no elements.
EDIT: I Just found out that if I minimize the window and maximize it again, the artifacts disappear, which should confirm that this is a rendering glitch, right?
EDIT 2: Here is the code and css of our custom selectbox
HTML:
<div class="input_selectbox">
<label>Title</label>
<div class="input_selectbox__head" data-placeholder="">
<label>
<input type="hidden" name="id" value="5-10909">
Dummy 1
</label>
</div>
<div class="input_selectbox__body">
<label data-value="" class="">
No Option
</label>
<label id="5-10909" data-value="5-10909" class="input_selectbox__option--selected" data-default="true">
Dummy 1
</label>
<label id="5-12568" data-value="5-12568" class="">
Dummy 2
</label>
<label id="5-20001" data-value="5-20001" class="">
Dummy 3
</label>
<label id="5-20002" data-value="5-20002" class="">
Dummy 4
</label>
</div>
</div>
LESS:
.input_combobox, .input_selectbox {
display: block;
font-family: RobotoCondensed-Regular;
font-size: 14px;
width: 100%;
overflow: hidden;
&:focus {
outline: none;
}
label {
cursor: pointer;
}
}
.input_selectbox {
font-family: Roboto-Regular;
}
.input_selectbox__head {
border: 1px solid #colorBorderGrey;
transition: background-color 0.2s, border 0.3s;
overflow-x: hidden;
text-overflow: ellipsis;
display: flex;
background-color: #colorLightestGrey;
padding: 10px;
justify-content: space-between;
&:hover {
cursor: pointer;
border-color: #colorDarkGrey;
&:after {
color: #colorBlue;
}
}
label {
display: flex;
user-select: none;
pointer-events: none;
i {
margin-right: 10px;
}
}
&:after {
content: "\f078";
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-family: "Font Awesome 5 Pro";
font-weight: 900;
pointer-events: none;
transition: color 0.3s, opacity 0.3s, background-color 0.2s;
display: block;
padding-left: 10px;
font-size: 16px;
}
}
.input_combobox--active, .input_selectbox--active {
.input_combobox__head, .input_selectbox__head {
background-color: #colorLightGrey;
&:hover {
border: 1px solid #colorBorderGrey;
&:after {
color: #colorDarkGrey;
}
}
&:after {
background-color: #colorLightGrey;
}
span {
background-color: #colorGreyHover;
}
}
}
.input_combobox__body, .input_selectbox__body {
display: none;
position: fixed;
box-shadow: rgba(0,0,0, 0.05) 0px 2px 5px 0px;
background-color: #colorWhite;
border: 1px solid #colorBorderGrey;
border-top: none;
max-height: 400px;
overflow-y: auto;
width: 100%;
z-index: 499;
label {
font-family: RobotoCondensed-Regular;
font-size: 16px;
display: block;
padding: 10px 20px;
transition: background-color 0.5s, color 0.3s;
border-bottom: 1px solid #colorBorderGrey;
&:hover {
background-color: #colorLightGrey;
}
&:last-child {
border-bottom: none;
}
i {
margin-right: 10px;
}
input[type=checkbox] {
display: none;
}
}
}
.input_combobox__body--top, .input_selectbox__body--top {
box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 5px 0px;
}
.input_combobox__option--inactive, .input_selectbox__option--inactive {
opacity: 0.3;
}
Javascript:
function selectbox()
{
// click
$(document).on("click", ".input_selectbox__head", function ()
{
$(this).trigger("selectbox:toggle");
});
// toggle
$(document).on("selectbox:toggle", ".input_selectbox__head", function ()
{
if ($(this).parent().hasClass("input_selectbox--active"))
{
$(this).trigger("selectbox:close");
}
else
{
$(this).trigger("selectbox:open");
}
});
// open
$(document).on("selectbox:open", ".input_selectbox__head", function ()
{
var selectbox = $(this).closest(".input_selectbox");
if (!selectbox.hasClass("readonly") && !selectbox.hasClass("input--disabled"))
{
$(".input_selectbox--active .input_selectbox__head").trigger("selectbox:close");
// Positionierung
var header = selectbox.find(".input_selectbox__head");
var headerHeight = header.outerHeight();
var selectboxBody = selectbox.find(".input_selectbox__body");
var headerPositionX = header.offset().left;
var headerPositionY = header.offset().top - $(window).scrollTop();
var bodyPositionY = headerPositionY + headerHeight;
selectboxBody.removeClass("input_selectbox__body--top");
selectboxBody.css({
"top": bodyPositionY,
"left": headerPositionX,
"width": selectbox.width(),
"bottom": ""
});
selectbox.addClass("input_selectbox--active");
selectboxBody.show();
// check if offscreen
var isOut = isOutOfViewport(selectboxBody.get(0));
if (isOut.bottom)
{
selectboxBody.addClass("input_selectbox__body--top");
selectboxBody.css({
top: "",
bottom: ($(window).innerHeight() - headerPositionY - 1)
});
}
// close combobox on parent scroll
var scrollParent = getScrollParent(header[0]);
$(scrollParent).one("scroll", function ()
{
header.trigger("selectbox:close");
});
$(document).one("scroll", function ()
{
header.trigger("selectbox:close");
});
$(window).one("resize", function ()
{
header.trigger("selectbox:close");
});
}
});
// close
$(document).on("selectbox:close", ".input_selectbox__head", function ()
{
var selectbox = $(this).closest(".input_selectbox");
selectbox.removeClass("input_selectbox--active");
var selectboxBody = selectbox.find(".input_selectbox__body");
selectboxBody.hide();
});
// change option
$(document).on("click", ".input_selectbox__body > label", function ()
{
var label = $(this);
var value = label.attr("data-value");
var headerLabel = $(this).closest(".input_selectbox__body").siblings(".input_selectbox__head").children("label");
var name = headerLabel.find("input[type=hidden]").attr("name");
label.addClass("input_selectbox__option--selected").siblings().removeClass("input_selectbox__option--selected");
headerLabel.html(label.html());
headerLabel.append('<input type="hidden" name="' + name + '" value="' + value + '" />');
headerLabel.closest(".input_selectbox__head").trigger("selectbox:close");
$(this).closest(".input_selectbox").trigger("selectbox:change").trigger("change");
});
// close selectbox on outside click
$(document).ready(function ()
{
$(document).on("click touchstart", function (event)
{
if ($(event.target).closest('.input_selectbox--active').length == 0)
{
$(".input_selectbox--active .input_selectbox__head").trigger("selectbox:close");
}
});
});
// form reset
$(document).on("reset", "form", function ()
{
var selectboxes = $(this).find(".input_selectbox");
selectboxes.each(function ()
{
$(this).find(".input_selectbox__body").find("label[data-default=true]").click();
});
});
}

Highlight a checkbox when an other check box is clicked

I have multiple checkboxes that have the same ID for different screen resolutions. When I click on the Check 1 label the checkmark gets highlighted. In the example provided both check 1 and check2 have the same IDs, when I click on check 1 I want the check mark of check 2 too also be highlighted and vice versa.
.checkmark {
display: inline-block;
width: 22px;
/*height: 22px;*/
height: 17px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 50%;
margin-bottom: 1px;
}
.checkmark::before {
content: '';
position: absolute;
width: 3px;
height: 9px;
background-color: #ccc;
left: 11px;
top: 6px;
}
.checkmark {
cursor: pointer;
}
.checkmark::after {
content: '';
position: absolute;
width: 3px;
height: 3px;
background-color: #ccc;
left: 8px;
top: 12px;
}
input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
background: linear-gradient(rgb(42, 104, 149) 0px, rgb(44, 109, 157) 100%);
}
<div class="menu-lg">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'">
<input type= "checkbox" style= "display:none;" id="10A">Check1
<span for="10A" class="checkmark"></span >
</label >
</div>
<div class="menu-sm">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'" >
<input type= "checkbox" style= "display:none;" id="10A">Check2
<span for="10A" class="checkmark"></span >
</label >
</div>
How do I highlight all the checkmarks of the same IDS?

Highlighting is in your case based on the :checked selector -> if the checkbox is checked, the span behind it is highlighted.
In your case you will need javascript to react on the onchange / click event on the checkbox and trigger the other checkbox aswell.
A basic setup how to use it, you will need to alter that to your needs:
// use click or onchange
document.getElementById('checkbox1').addEventListener('click', function () {
document.getElementById('checkbox2').click();
});

You can do it with this javascript code.
This code does the following:
Add an event listener to the change event of both check boxes.
Set the checked property of the other checkbox to the same value as the checked property of the checkbox where the change event triggered on.
Note: I changed the id's of the check boxes to make them unique.
document.getElementById('10A-1').addEventListener('change', function () {
document.getElementById('10A-2').checked = this.checked;
});
document.getElementById('10A-2').addEventListener('change', function () {
document.getElementById('10A-1').checked = this.checked;
});
.checkmark {
display: inline-block;
width: 22px;
/*height: 22px;*/
height: 17px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 50%;
margin-bottom: 1px;
}
.checkmark::before {
content: '';
position: absolute;
width: 3px;
height: 9px;
background-color: #ccc;
left: 11px;
top: 6px;
}
.checkmark {
cursor: pointer;
}
.checkmark::after {
content: '';
position: absolute;
width: 3px;
height: 3px;
background-color: #ccc;
left: 8px;
top: 12px;
}
input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
background: linear-gradient(rgb(42, 104, 149) 0px, rgb(44, 109, 157) 100%);
}
<div class="menu-lg">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'">
<input type= "checkbox" style= "display:none;" id="10A-1">Check1
<span for="10A-1" class="checkmark"></span >
</label >
</div>
<div class="menu-sm">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'" >
<input type= "checkbox" style= "display:none;" id="10A-2">Check2
<span for="10A-2" class="checkmark"></span >
</label >
</div>

//Run it after document ready
var checkbox = $('input[type="checkbox"]');
$(checkbox).on('click', function(){
if($(this).is(':checked')){
$(checkbox).prop('checked', true);
}
else{
$(checkbox).prop('checked', false);
}
});

Why is my checkbox styling not working?

I made some custom checkboxes and radio buttons. I styled them as follows with CSS:
input[type="checkbox"]:checked + label:after,
input[type="checkbox"][checked="checked"] + label:after,
input[type="radio"][checked="checked"] + label:after,
input[type="radio"]:checked + label:after {
position: absolute;
display: block;
float: left;
height: 10px;
width: 10px;
top: 4px;
left: -19px;
z-index: 2;
background: #b7b7b7;
content: "";
}
input[type="checkbox"]:checked + label:after,
input[type="checkbox"][checked="checked"] + label:after {
background: none;
top: 1px;
left: -20px;
font-family: 'FontAwesome';
font-size: 12px;
color: #b7b7b7;
content: "\f00c";
}
The html of these elements looks like this
<div class="checkbox" ng-repeat="group in groups.initData.groups"
ng-checked="groups.modalData.access_groups[$index+1]">
<input type="checkbox"
class="group-checkbox">
<label><% group.group %> </label>
</div>
Then i initialize them like this with JQuery when my angular view loads:
$('.checkbox').click(function () {
if ($(this).children('input').prop("disabled"))
return;
if ($(this).children('input').prop("checked"))
$(this).children('input').prop("checked", false);
else
$(this).children('input').prop("checked", true);
$(this).children('input').change();
});
/* Radio handler */
$('.radio').click(function () {
if ($(this).children('input').prop("disabled"))
return;
var name = $(this).children('input').attr("name");
$(this).children('input[name="' + name + '"]').prop("checked", false);
$(this).children('input').prop("checked", true);
$(this).children('input').change();
});
I don't understand why the styling doesn't apply? My angular code works and it correctly puts the checked="checked" attribute on the elements that are true for my expression

font-family: 'FontAwesome';
is the problem here . Though you can style checkboxes ,there are some limitations. Like, if you are using some custom font-family , It wont work . Remove the font family and use following unicode content, and It should work.
content: "\2714";