We Keep Coding

How to set the image search box to 'None' or 'Off'?

I am using the code prepared by #Cybernetic which can be found here (Active Search Bar for images). The code is mainly for searching for images through a search box using jquery. #Cybernetic did an outstanding job with his code and I couldn't post a comment there because I don't have enough points. I wish he can see this posting and answer my question.
What I wanted to ask about is whether we can set the code to hide images when we run it. Because I am using this code with hundreds of relatively large images! So, running it will load all these images at once which is causing the browser to slow down.
So, again, how can we set it to show no images until we start typing in the search box.
Thanks!
Update
<h2>Search for Image</h2>
<style>
.imgContainer{
float:left;
}
img {
width: 1220px !important;
border: 3px;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 40px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
img{
border: 5px solid #33cc33;
}
</style>
<!-- <button type="mybutton">Click Me!</button> -->
<input type="text" id="myinput" name="search" placeholder="search..." style="width:600px; height: 40px; border-radius: 4px; font-size: 18px;"><br><br>
<center>
<div id="images">
<img src="C:\dir..............\image-1.jpg" width=1130></a>
<img src="C:\dir..............\image-2.jpg" width=1130></a>
<img src="C:\dir..............\image-3.jpg" width=1130></a>
<img src="C:\dir..............\image-4.jpg" width=1130></a>
<img src="C:\dir..............\image-5.jpg" width=1130></a>
</div>
<script>
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
$("img[alt*=" + val + " i]").show();
}
});
<!-- $("#mybutton").on('click', function() { -->
<!-- var myinput = $('#mytextbox'); -->
<!-- var val = $.trim(myinput.value); -->
<!-- if (val === "") -->
<!-- $('img').show(); -->
<!-- else { -->
<!-- $('img').hide(); -->
<!-- $("img[alt*=" + val + "]").show(); -->
<!-- } -->
<!-- }); -->
</script>

CHANGES:
added regExp check for special chars.
edited result's style.
set images display to none to display only on search.
added hover action to images.
add span to show no result found if search didn't met any images.
$(document).ready(function() {
$("#mybutton").on('click', function() {
var mysrchbox = $("#myinput").val();
mysrchbox = mysrchbox.replace(/[^a-zA-Z ]/g, "")
var val = $.trim(mysrchbox);
if (val === "") {
$('#none').show();
$('img').hide();
} else {
val = val.split(" ").join("\\ ");
if ( $("img[alt*=" + val + " i]").attr('alt') === undefined ) {
$('#none').show();
$('img').hide();
} else {
$('#none').hide();
$('img').hide();
$("img[alt*=" + val + " i]").show();
$("img[alt*=" + val + " i]").css('display', 'inline-flex');
}
}
});
});
body {
background: white !important;
}
#images {
position: relative;
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: center;
justify-content: center;
flex-basis: 33.3%;
width: 100%;
margin: auto;
text-align: center;
}
#images img {
background: white;
position: relative;
margin: auto;
display: none;
object-fit: contain;
height: max-content;
padding: 0.5rem;
text-align: center;
margin: auto;
}
#images img:hover {
opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Search for Image</h2>
<input type="button" id="mybutton" value="Search!">
<input type="text" id="myinput" name="search" placeholder="search..." style="width:50; height: 20px; border-radius: 4px; font-size: 18px;"><br><br>
<div id="images"><span id="none" hidden="true">no result related for your search.</span>
<img src="https://p.kindpng.com/picc/s/108-1082674_bitcoin-png-bitcoin-clipart-transparent-png.png" alt="eBitcoin" width=130>
<img src="https://png.pngitem.com/pimgs/s/692-6924771_blockchain-cryptocurrency-wallet-ethereum-dogecoin-hd-png-download.png" alt="Ethereum" width=130>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ripple-Logo.png" alt="Ripple" width=130>
<img src="https://i.redd.it/tsmzy49d4adz.jpg" alt="eBitcoin Cash" width=130>
<img src="https://freepikpsd.com/wp-content/uploads/2019/10/cardano-logo-png-5-Transparent-Images.jpg" alt="eCardano" width=130>
<img src="https://pbs.twimg.com/media/DJkf7M4VYAAgt8V.png" alt="NEM" width=130>
<img src="https://bitkee.com/icons/litecoin-logo.png" alt="LiteCoin" width=130>
<img src="http://bittrust.s3.amazonaws.com/1486429998.png" alt="Stellar Lumens" width=130>
</div>

Change function to find image

In my example, if you click on one of the alt images, I am looking to get the checkmark image to appear. Right now my on change event is registering (see console), but the image .checkmark-img is not being found or faded in. The fadeBoolToggle function is to fadeIn out if active.
This code is meant to be allow only one checkbox checked at once. So when someone clicks on an input, it unchecks all inputs and then checks the one clicked.
$('.option-check').not(this).prop('checked', false).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(false);
this.checked = true;
$(this).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(true);
Does anyone see why my image is not fading in when one of the alt images are clicked?
Jsfiddle
jQuery.fn.fadeBoolToggle = function(bool) {
return bool ? this.fadeIn(400) : this.fadeOut(400);
}
$('.option-check').on('change', function() {
$('.option-check').not(this).prop('checked', false).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(false);
this.checked = true;
$(this).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(true);
var test = $('.option-check:checked').val();
console.log('option check clicked');
console.log(test);
});
.product-wrap {
width: 100%;
position: relative;
display: block;
}
.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 2;
cursor: pointer;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
}
.calendar-option img {
margin: 20px auto;
cursor: pointer;
width: 50%;
height: auto;
}
.product-check,
.calendar-check,
.option-check {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-option">
<div class="product-wrap">
<label for="flag-option" class="package-check-toggle">
<img src='images/cal-flag.jpg' alt='A' class='pg-preview-img'>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">
<p class="calendar-option-push"></p>
<cite>A</cite>
</label>
</div>
<input type="checkbox" class="option-check" id='flag-option' value='A'>
</div>
<div class="calendar-option">
<div class="product-wrap">
<label for="nickel-option" class="package-check-toggle">
<img src='images/cal-nickel.jpg' alt='Brushed Nickel & Black' class='pg-preview-img'>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">
<p class="calendar-option-push"></p>
<cite>B</cite>
</label>
</div>
<input type="checkbox" class="option-check" id='nickel-option' value='B'>

.closest() returns the closest of the current item's parents, including current object itself, which matches the selector.
Because you placed your <input>s outside .product-wrap divs...
$(this).closest('.product-wrap')
... returns empty.
Working example:
jQuery.fn.fadeBoolToggle = function(bool) {
return bool ? this.fadeIn(400) : this.fadeOut(400);
}
$('.option-check').on('change', function() {
$(this).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(true);
var test = $('.option-check:checked').val();
console.log('option check clicked');
console.log(test);
});
.product-wrap {
width: 100%;
position: relative;
display: block;
}
.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 2;
cursor: pointer;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
}
.calendar-option img {
margin: 20px auto;
cursor: pointer;
width: 50%;
height: auto;
}
.product-check,
.calendar-check,
.option-check {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-option">
<div class="product-wrap">
<label for="flag-option" class="package-check-toggle">
<img src='images/cal-flag.jpg' alt='A' class='pg-preview-img'>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">
<p class="calendar-option-push"></p>
<cite>A</cite>
</label>
<input type="radio" class="option-check" id='flag-option' name='check-option' value='A'>
</div>
</div>
<div class="calendar-option">
<div class="product-wrap">
<label for="nickel-option" class="package-check-toggle">
<img src='images/cal-nickel.jpg' alt='Brushed Nickel & Black' class='pg-preview-img'>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">
<p class="calendar-option-push"></p>
<cite>B</cite>
</label>
<input type="radio" class="option-check" id="nickel-option" name='check-option' value='B'>
</div>
When facing such issues in the future, consider using console.log methodically. I started with
console.log($(this).closest('.product-wrap').is('.product-wrap'))
If this would have returned true, I'd have moved on to
console.log($(this).closest('.product-wrap').find('.checkmark-img').is('.checkmark-img'))
... and so on.
Note: Even though it reproduced the issue, your snippet looked like it was broken and it stopped everyone, including me, from taking a closer look. Whether you take something out of that, it's totally up to you.

Issue showing a selected id

I am having an issue getting tabs to open based on the selection I am choosing. In the snippet you will see 4 boxes. If you click on box 1, I am wanting #marketing1 to open below it and so on.
The method I am using is to get the specific id of the button selection (the 1,2,3,4 box) and then declare a variable to just get the number. Then to add that number to the id of #marketing to show the appropriate section. I am not sure what I am doing wrong. No errors are showing.
Ps - I am also trying to add an .active class to the #marketing-service for when one of the selection boxes is clicked on to show my the active class (it creates a down arrow under the box. Am I implementing the .active wrong to the :before and :after?
//For tabs to stay active
$('.marketing-service').click(function() {
$('.marketing-service.active').removeClass('active');
$(this).toggleClass('active');
//To get the service display box to show
var item_number = $(this).attr('id').replace('marketing-tab', '');
/* $('html, body').animate({
scrollTop: $("#service-display-box").offset().top
}, 1500);*/
$('#marketing'+item_number).show().siblings('.marketing-section-wrap').hide();
});
.marketing-section-wrap, .marketing-section-wrap-main {
width: 100%;
height: auto;
padding: 80px 0;
border-bottom: 1px solid #EBEBEB;
}
.marketing-section-wrap {
display: none;
}
#marketing-services {
width: 95%;
margin: 0 2.5%;
}
.marketing-service {
display: inline-block;
width: 22%;
margin: 0 1%;
height: 400px;
background: #F0F0F0;
position: relative;
cursor: pointer;
}
.marketing-service:first-child {
margin-left: 0;
}
.marketing-service:last-child {
margin-right: 0;
}
.marketing-service:hover {
background: rgba(0, 255, 170, .4);
z-index: 1;
}
/*-- Down Arrow for boxes --*/
.marketing-service:after.active, .marketing-service:before.active {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.marketing-service:after.active {
border-width: 0px;
margin-left: 0px;
border-color: rgba(136, 183, 213, 0);
border-right-color: #88b7d5;
margin-top: -30px;
}
.marketing-service:before.active {
border-color: #FFF;
border-top-color: #88b7d5;
border-width: 36px;
margin-left: -36px;
margin-top: 0;
}
.marketing-service-wrap {
padding: 10%;
width: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="marketing-services">
<div class="marketing-service" id="marketing-tab1">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">1</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab2">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">2</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab3">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">3</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab4">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">4</h2>
</div>
</div>
</div>
<div id="marketing1">
<div class="marketing-section-wrap">
1
</div>
</div>
<div id="marketing2">
<div class="marketing-section-wrap">
2
</div>
</div>

Quite simple just try $('#marketing'+item_number).children().show() because marketing-section-wrap is display:none;
first run this to hide all marketing-section-wrap
$('.marketing-section-wrap').hide();
then this will show only the one which corresponds to this click.
$('#marketing'+item_number).children().show();

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