We Keep Coding

Adding a class with "Display:none" to an element is not working in jquery

I have a div which i want to hide (display:none).
Html:
<div class="alert">
<div class="notice">
<div class="header">
<h1>Notice:</h1><i class="fas fa-window-close"></i>
</div>
<div class="body">
<p>You must select at least one seat to Continue.</p>
</div>
<div class="footer">
<button>Ok</button>
</div>
</div>
</div>
Css:
.alert {
position: fixed;
background-color: rgb(252, 238, 235, 0.4);
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
}
when i add the below class it doesn't work at all, but it does work on adding properties to that same class like color,margin,padding... but it doesn't work on "display:none" and it also works when i enter css through js like
$('element').css('display','none')
css:
.noticeClose {
display: none;
}
js/jquery:
$("div.bookingBtn input").click(function () {
if ($("input[type=checkbox]:checked").length == 0) {
$("div.alert").addClass("noticeClose");
return false;
}
});
Hava a nice day!

looks like there's an other style that overrides the display property.
try next
.noticeClose {
display: none!important;
}
if it doesn't work then maybe hide
$("div.bookingBtn input").click(function () {
if ($("input[type=checkbox]:checked").length == 0) {
$("div.alert").hide();
return false;
}
});
also this doesn't work too - try to debug to assure that div.alert gets the noticeClose class after a click.

Adding/removing checkmark to different inputs with a limit

I have three options and if you click on an option a checkmark shows over it, representing the option as selected. I have a limit of 1 set. As of now, the image/current checkmark input needs to be clicked again to remove it, rather than simply being able to click on another option and removing it.
I tried to setup a snippet that replicates what I actually have, but the checkmark isn't showing for some reason. Regardless, I am attempting to incorporate a solution I saw from another post with this: $('').not(this).prop('checked', false);.
I am not sure how to add it to my code to get it to work though. I have tried:
$(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked).not(this).prop('checked', false);
and
$(this).parents('.product-wrap:first').find('.checkmark-img').not(this).prop('checked', false).fadeBoolToggle(this.checked);
Does anyone know how I can get the checkmark inputs to switch when clicking another checkmark input option?
This is the block of code that it is associated with.
$('.calendar-check').on('change', function () {
// $('').not(this).prop('checked', false);
if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
$(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);
//For checkmark
jQuery.fn.fadeBoolToggle = function (bool) {
return bool ? this.fadeIn(400) : this.fadeOut(400);
}
$('.calendar-check').on('change', function () {
// $('input.example').not(this).prop('checked', false);
if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
$(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);
}
});
.product-check, .calendar-check {
display: none;
}
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
.product-wrap {
width: 100%;
position: relative;
display: block;
}
.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 1;
cursor: pointer;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
}
#calendar-box-wrap, #tp-package-wrap {
margin: 50px 0;
}
.calendar-box, .tp-package {
display: inline-block;
vertical-align: top;
width: 25%;
margin: 0 4%;
position: relative;
}
.option-input {
border: 1px solid #CDCDCD;
padding: 10px;
color: #303030;
font-size: 1.2em;
}
/*- Calendar -*/
.calendar-selection-img {
width: 70%;
height: auto;
cursor: pointer;
margin: 0 auto;
display: block;
}
/*- Calendar Preview Section -*/
#pg-preview-input-section, #pg-preview-img-section {
display: inline-block;
vertical-align: top;
}
#pg-preview-input-section {
width: 45%;
}
#pg-preview-img-section {
width: 55%;
}
#calender-preview-choice {
margin-top: 50px;
font-weight: bold;
}
.pg-preview-img {
width: 35%;
height: auto;
margin-left: 15%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-box">
<div class="product-wrap">
<label for="cal-2year" class="package-check-toggle">
<h4 class="calendar-box-title">A</h4>
<img src="http://cdnl.accucutcraft.com/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/c/v/cv106.jpg"
alt="A" class="calendar-selection-img">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2783-200.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check">
</div>
</div>
<div class="calendar-box">
<div class="product-wrap">
<label for="cal-whiteboard" class="package-check-toggle">
<h4 class="calendar-box-title">B</h4>
<img src="http://cdnl.accucutcraft.com/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/c/v/cv106.jpg"
alt="B" class="calendar-selection-img">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2783-200.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check">
</div>
</div>
<div class="calendar-box">
<div class="product-wrap">
<label for="cal-glance" class="package-check-toggle">
<h4 class="calendar-box-title">C</h4>
<img src="http://cdnl.accucutcraft.com/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/c/v/cv106.jpg"
alt="C" class="calendar-selection-img">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2783-200.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check">
</div>
</div>

If you are trying to have only one checkbox selected you need to add a name (if you want to use radio this works else you need jQuery for checkbox ) that is the same in each input field:
<div>
<input name="checkMark" type="checkbox" />
</div>
<div>
<input name="checkMark" type="checkbox" />
</div>
<div>
<input name="checkMark" type="checkbox" />
</div>
If you are using this code to have only one checkbox checked, then delete this code:
$('.calendar-check').on('change', function () {
// $('').not(this).prop('checked', false);
if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
$(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);
}
});
and add this one:
$('input.calendar-check').on('click', function(){
$('input.calendar-check').not(this).attr('checked', false);
})
https://jsfiddle.net/e854ao30/2/
Basically you're saying whichever one you click, the rest of the inputs will be checked false.

How do I get a custom radio button to check?

I am creating a custom form but have hit a snag: The Radio buttons; when you click on them in the unchecked status the do not check. They will check if click the associated Div and the will also uncheck when checked. I have tried to extend the JS to the Label and It still does not work. And so...
How do I get a custom radio button to check and/or what do i need to do to get this to function?
Here is the relevant Code:
function check(checkbox) {
if (document.getElementById(checkbox).checked == false) {
document.getElementById(checkbox).checked = true;
} else {
document.getElementById(checkbox).checked = false;
}
}
.title {
display: inline;
position: relative;
top: 2px;
font-family: "Arial";
color: #fff;
font-size: 18px;
padding: 0px;
margin: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-collapse: collapse;
font-stretch: ultra-condensed;
}
input[type="radio"] {
display: none;
}
[type="radio"] + label {
width: 10px;
height: 10px;
}
[type="radio"] + label {
background-color: #A3D5FF;
border: 1px solid #A3D5FF;
padding: 9px;
border-radius: 20px;
display: inline-block;
position: relative;
margin-right: 30px;
}
[type="radio"]:checked + label {
background-color: #0088A8;
;
border: 3px solid #fff;
height: 5.75px;
width: 5.75px;
color: #243441;
}
input[type="radio"] + label {
cursor: pointer;
font-size: 1em;
float: right;
position: relative;
right: -27px;
}
.chk {
background: #009FC2;
width: 265px;
height: 30px;
margin: 5px;
padding: 5px;
border-radius: 5px;
}
.chk:hover {
background: #0088A8;
}
HTML
<div class="chk" onClick="check('f-unlimited')">
<h3 class="title">
Unlimited
</h3>
<input id="f-unlimited" name="format" type="radio" value="f-unlimited" checked="checked"></input>
<label for="f-unlimited"></label>
</div>
<div class="chk" onClick="check('f-expandedFormat')">
<h3 class="title">
Expanded Format
</h3>
<input id="f-expandedFormat" name="format" type="radio" value="f-expandedFormat"></input>
<label for="f-expandedFormat"></label>
</div>
<div class="chk" onClick="check('f-standardLegal')">
<h3 class="title">
Standard Legal
</h3>
<input id="f-standardLegal" name="format" type="radio" value="f-standardLegal"></input>
<label for="f-standardLegal"></label>
</div>
</div>
Additional note: I am running almost identical code for my checkboxes and they are working perfectly.

The problem is in your check function. When you click on the div it fires to reverse the check state. When you click the check itself, the check state is reversed, then the check function runs and reverses the state again. You need to cancel event propagation when the check itself is clicked.

noted, previous answer was in jquery, please see below for vanilla
javascript :
function checkboxClicked() {
event.stopPropagation();
event.preventDefault();
}
function check(checkbox) {
if (document.getElementById(checkbox).checked == false) {
document.getElementById(checkbox).checked = true;
} else {
document.getElementById(checkbox).checked = false;
}
}
html :
<div class="chk" onClick="check('f-unlimited')">
<h3 class="title">
Unlimited
</h3>
<input onclick="checkboxClicked()" id="f-unlimited" name="format" type="radio" value="f-unlimited" checked="checked"></input>
<label for="f-unlimited"></label>
</div>
<div class="chk" onClick="check('f-expandedFormat')">
<h3 class="title">
Expanded Format
</h3>
<input onclick="checkboxClicked()" id="f-expandedFormat" name="format" type="radio" value="f-expandedFormat"></input>
<label for="f-expandedFormat"></label>
</div>
<div class="chk" onClick="check('f-standardLegal')">
<h3 class="title">
Standard Legal
</h3>
<input onclick="checkboxClicked()" id="f-standardLegal" name="format" type="radio" value="f-standardLegal"></input>
<label for="f-standardLegal"></label>
</div>

Adjust inline-flex elements to the screen width

In the image below you can see a div (red background) with three divs (green background) inside and each of them with a label (blue background) and a control (input or checkbox) inside.
In the image you can see how the green divs adjust to the size of the screen and when they reach their minimum size and no longer fit in the line they move down, the problem is (as you can see in the third windows) it looks awful when they are in different lines because of their minimum size attributes, what I want to do is to make them occupy the 100% of the screen when they move down.
I hope I explained correctly.
By the way, I don't want to use plugins, so if there is a way of doing this with only HTML, CSS and Javascript I would be very happy.
Thank you so much by advance.
Here is my code:
.controlRow
{
display: flex;
flex-wrap: wrap;
padding: 5px 0px;
margin: 0px;
background-color: Red;
}
.controlColumn1-2, .controlColumn1-4, .controlColumnCheckbox
{
display: inline-flex;
background-color: green;
}
.controlColumn1-2 { width: 50%; min-width: 300px; }
.controlColumn1-4 { width: 25%; min-width: 300px; }
.controlColumnCheckbox { width: 230px; }
.controlColumn1-2 label, .controlColumn1-4 label, .controlColumnCheckbox label
{
margin-right: 5px;
min-width: 100px;
background-color: blue;
}
.controlColumn1-2 input, .controlColumn1-4 input
{
margin-right: 5px;
width: 100%;
}
.controlColumnCheckbox input
{
margin-left: 105px;
margin-right: 5px;
width: 14px;
}
<div class = "controlRow">
<div class = "controlColumn1-4">
<label id="lblNombre">Nombre:</label>
<input type="text" id="txtNombre" maxlength="100" />
</div>
<div class = "controlColumn1-2">
<label id="lblDescripcion">Descripcion:</label>
<input type="text" id="txtDescripcion" maxlength="100" />
</div>
<div class = "controlColumn1-4">
<div class = "controlColumnCheckbox">
<input type="checkbox" id = "checkActivo" checked="checked" />
<label id="lblActivo">Activo.</label>
</div>
</div>
</div>

Instead of this:
.controlColumn1-2 { width: 50%; min-width: 300px; }
.controlColumn1-4 { width: 25%; min-width: 300px; }
Try this:
.controlColumn1-2 { flex: 2 0 300px; }
.controlColumn1-4 { flex: 1 0 300px; }
DEMO
Learn more about the flex property at MDN.
Also a great reference: Common Values of Flex

Why is my jquery code not working or throwing any errors?

You can checkout my project here: http://jsfiddle.net/raj4dev/2o4uapc9/1/
Summary: I am making a jquery image slider. You can change the image in a box by pressing next and previous arrows. Currently, I have added code only for the next arrow.
Issue: Nothing happens when I click the next arrow. I don't see any errors in the chrome developer tools.
Please tell me how I can debug and fix this issue ?
Code here.
HTML:
<!DOCTYPE html>
<body>
<div id="container">
<header>
<h1>jQuery content slider</h1>
</header>
<img src="http://icongal.com/gallery/image/337589/small_arrow_left.png" alt="Prev" id="prev">
<div id="slider">
<div class="slide">
<div class="slide-copy">
<h2>Slide 1</h2>
<p>Dance and slide!</p>
</div>
<img src="http://m.rgbimg.com/cache1ny0NN/users/j/ja/jana_koll/600/mfOAUfa.jpg" alt="an image">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slide 2</h2>
<p>Dance and slide!</p>
</div>
<img src="https://s-media-cache-ak0.pinimg.com/736x/f9/2e/c0/f92ec0238d508e029be8b7163205d24e.jpg" alt="an image">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slide 3</h2>
<p>Dance and slide!</p>
</div>
<img src="http://www.pptbackgroundstemplates.com/backgrounds/abstract-red-light-wave-ppt-backgrounds-powerpoint.jpg" alt="an image">
</div>
</div>
<img src="http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-right-icon.png" alt="Next" id="next">
</div>
</body>
JS:
$(document).ready(function() {
var sliding_speed = 500;
var autoswitch = true;
var autoswitch_speed = 4000;
$('.slide').first().addClass('active');
//Hide all slides, but...
$('.slide').hide();
//...show only the first slide
$('.active').show();
$('#next').on('click', function(){
$('.active').removeClass('active').addClass('oldActive'); /*'Hide the currently active slide and mark it as oldActive so that you can go back to it using the previous button.'*/
if($('.oldActive').is(':last-child')) {
$('.slide').first().addClass('active');
}else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
});
});
CSS:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
font-size: 14px;
color: #fff;
background: #333;
line-height: 1.6em;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#container {
width: 980px;
margin: 40px auto;
overflow: hidden;
}
#slider {
width: 940px;
height: 350px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
border: #666 solid 2px;
border-radius: 5px;
}
#silder img {
width: 940px;
height: 350px;
}
.slide {
position: absolute;
}
.slide-copy {
position: absolute;
bottom: 0px;
left:0;
padding: 20px;
background: #7f7f7f;
background: rgba(0,0,0,0.5);
width: 100%;
}
#prev, #next {
float: left;
margin-top: 130px;
cursor: pointer;
position: relative;
z-index: 100;
}
#prev {
margin-right: -45px;
}
#next {
margin-left: -45px;
}

You need to again hide all slide and then show only the active one. You are changing the classes to properly set your desired active slide to have the active class, but nothing says that all active slides are shown always and all other slides are hidden always.
http://jsfiddle.net/v1au2d57/
$('#next').on('click', function(){
$('.active').removeClass('active').addClass('oldActive'); /*'Hide the currently active slide and mark it as oldActive so that you can go back to it using the previous button.'*/
if($('.oldActive').is(':last-child')) {
$('.slide').first().addClass('active');
}else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
//Hide all slides, but...
$('.slide').hide();
//...show only the first slide
$('.active').show();
});