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>

FadeIn random Javascript Game

I am trying to solve this problem with my mini game using javascript. The Game is suppose to randomly show divs using the randomFadeIn with jquery.random-fade-in.min.js. It works but the problem is that I could not stop it from running. This is just a basic javascript game but it is hard to implement using jquery
Here is my full code
const result = document.getElementById(".box-container>div");
console.log(result);
const button = document.getElementsByTagName("div");
let sec = 0;
function gameStart(num) {
let num1 = 800;
if ($(".box-container>div>p").css('opacity') != 0) {
console.log("not yet done");
$(function() {
$('.box-container').randomFadeIn(800);
});
} else {
console.log("win");
};
}
function clickBox() {
$(".box-container>div>p").click(function() {
$(this).animate({
opacity: 0
}, 800);
})
}
function gameWins() {}
function gameStops() {
setTimeout(function() {
alert("Game Ends");
}, 60000);
}
clickBox();
//gameStops();
gameWins();
.box-container {
width: 232px;
float: left;
width: 45%;
}
.box-container div {
float: left;
height: 100px;
margin-bottom: 8px;
margin-right: 8px;
overflow: hidden;
width: 100px;
}
.box-container div p {
background: #097;
box-sizing: border-box;
color: #fff;
display: none;
font-size: 20px;
height: 100%;
margin: 0;
padding-top: 14px;
text-align: center;
width: 100%;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>
<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>
> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>

By using the .stop() function, you could stop the animation. See snippet below.
let maxSeconds = 30000;
let numOfCards = $('.box').length;
function gameStart() {
console.log("Game started");
let numOfClicked = 0;
$(".box-container>div>p").click(function() {
// Increase the counter
numOfClicked++;
// Fade out
$(this).fadeOut(800);
if(numOfClicked == numOfCards){
gameWon();
}
})
$('.box-container').randomFadeIn(800);
setTimeout(
function() {
if(numOfClicked != numOfCards){
gameLost();
}
}, maxSeconds);
}
function gameWon(){
gameStop();
console.log("You won the game!");
}
function gameLost(){
gameStop();
console.log("You lost the game!");
}
function gameStop(){
$(".box-container>div>p").stop(false, false);
}
.box-container {
width: 232px;
float: left;
width: 45%;
}
.box-container div {
float: left;
height: 100px;
margin-bottom: 8px;
margin-right: 8px;
overflow: hidden;
width: 100px;
}
.box-container div p {
background: #097;
box-sizing: border-box;
color: #fff;
display: none;
font-size: 20px;
height: 100%;
margin: 0;
padding-top: 14px;
text-align: center;
width: 100%;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>
<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>
> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
</div>

Pause jQuery On Hover

I just want the ability to be able to pause the animation on mouse hover. I trying to looking good way to do that, but there was some issues. I tested some hover/stop functions, but I can't get these working correctly.
jQuery(document).ready(function() {
setInterval(function() {
jQuery('#testimonials .slide').filter(':visible').fadeOut(1000, function() {
if (jQuery(this).next('.slide').size()) {
jQuery(this).next().fadeIn(1000);
} else {
jQuery('#testimonials .slide').eq(0).fadeIn(1000);
}
});
}, 5000);
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>

You can achieve this by calling clearInterval() when the slide is hovered, then re-creating the interval again when the mouse leaves the slide, something like this:
jQuery(document).ready(function($) {
var $slides = $('#testimonials .slide');
function beginSlideInterval() {
return setInterval(function() {
$slides.filter(':visible').fadeOut(1000, function() {
var $next = $(this).next().length ? $(this).next() : $slides.first();
$next.fadeIn(1000);
});
}, 3000);
}
var slideInterval = beginSlideInterval();
$slides.on('mouseenter', function() {
clearInterval(slideInterval);
}).on('mouseleave', function() {
slideInterval = beginSlideInterval();
});
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>
Note that I shortened the interval to make the effect more obvious.

How can enable only one container to expand on click?

I'm trying to use expand/collapse container, and everything works except one little detail. I want to restrict end users from opening multiple container at once. Ideally, I want only one container to be expanded at once.

You can hide the other large box elements like
$(window).load(function() {
if ($(".navBoxes").length > 0) {
var html = document.getElementsByTagName("html").item(0);
var hasCSS3 = (html.className.indexOf("no-csstransforms") == -1)
$(".no-csstransforms .larger").toggleClass("undisplayed");
$(".larger").children().toggleClass("undisplayed");
// Expand nav box
$(".nav.plus").click(function() {
var smallerBox = $(this).closest(".navBox");
var largerBox = smallerBox.next();
var $ol = $(this).closest('.navBoxes').find('.navBox.larger').not(largerBox);
if (hasCSS3) {
//smallerBox.siblings(".smaller").toggleClass("contracted");
//smallerBox.siblings(".smaller").toggleClass("hidden");
//smallerBox.children().toggleClass("hidden");
//smallerBox.toggleClass("expanded").delay(600).toggleClass("hidden");
largerBox.toggleClass("atop").delay(600).toggleClass("hidden");
$ol.removeClass('atop').addClass('hidden');
} else {
//smallerBox.toggleClass("undisplayed");
//smallerBox.siblings(".smaller").toggleClass("undisplayed");
largerBox.toggleClass("undisplayed");
$ol.addClass('undisplayed')
}
largerBox.children().toggleClass("undisplayed");
$ol.children().addClass("undisplayed");
return false;
});
// Contract nav box
$(".nav.minus").click(function() {
var largerBox = $(this).parents(".navBox");
var smallerBox = largerBox.prev();
largerBox.children().toggleClass("undisplayed");
if (hasCSS3) {
largerBox.toggleClass("hidden");
largerBox.toggleClass("atop")
//smallerBox.toggleClass("hidden");
//smallerBox.toggleClass("expanded");
//smallerBox.children().toggleClass("hidden");
//smallerBox.siblings(".smaller").toggleClass("hidden");
//smallerBox.siblings(".smaller").toggleClass("contracted");
} else {
largerBox.toggleClass("undisplayed");
//smallerBox.toggleClass("undisplayed");
//smallerBox.siblings(".smaller").toggleClass("undisplayed");
}
return false;
});
}
setOrgChartDimensions();
})(jQuery);
.navBoxes .undisplayed {
display: none;
}
.navBoxes .navBox {
position: absolute;
float: left;
color: #fff;
}
.navBoxes .navBox.smaller {
width: 160px;
height: 160px;
z-index: 2;
}
.navBoxes .navBox.smaller.atop {
z-index: 4;
}
.navBoxes .navBox.larger {
width: inherit;
z-index: 1;
}
.navBoxes .navBox.hidden {
opacity: 0.0;
}
.navBoxes .navBox.larger.atop {
z-index: 3;
}
.navBoxes .navBox.larger .icon {
float: left;
}
.navBoxes .navBox.smaller a {
color: #fff;
}
.navBoxes .navBox.larger .title {
position: relative;
top: 10px;
}
.navBoxes .navBox.larger .body {
margin-top: 20px;
}
.navBoxes .navBox.larger .body a {
color: #fff;
text-decoration: underline;
}
.navBoxes .navBox .nav {
position: absolute;
width: 35px;
height: 30px;
padding-top: 5px;
}
.navBoxes .navBox .nav a {
color: #fff;
}
.navBoxes .navBox .nav.plus {
top: 110px;
left: 110px;
}
.navBoxes .navBox .nav.minus {
position: relative;
float: right;
}
.navBoxes .box1 {
background-color: #185394;
transform-origin: top left;
}
.navBoxes .box1.smaller:hover {
background-color: #214872;
}
.navBoxes .box2 {
background-color: #c94747;
transform-origin: top right;
}
.navBoxes .box2.smaller:hover {
background-color: #b24444;
}
.navBoxes .box2.smaller {
margin-left: 180px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navBoxes">
<div class="navBox box1 smaller">
<div class="title"><a href="#">Heading 1</div>
<div class="nav plus">
<div class="sign"><a aria-expanded="false" href="/">more</a>
</div>
</div>
</div>
<div class="navBox box1 larger hidden">
<div class="body">
<p>- Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text -</p>
</div>
<div class="nav minus">
<div class="sign"><a aria-expanded="true" href="/">less</a>
</div>
</div>
</div>
<div class="navBox box2 smaller">
<div class="title">Heading 2
</div>
<div class="nav plus">
<div class="sign"><a aria-expanded="false" href="/">more</a>
</div>
</div>
</div>
<div class="navBox box2 larger hidden">
<div class="body">
<p>- Some Text - Some Text - Some Text - Some Text -</p>
</div>
<div class="nav minus">
<div class="sign"><a aria-expanded="true" href="/">less</a>
</div>
</div>
</div>
</div>

You will need some object to hold application state. you could create a variable such as
var expanded = false;
then wrap your code above in a statement like so that when you click to expand an item
if (!expanded) {
// proceed as normally
expanded = true;
} else {
// stop action from happening
return;
}
EDIT:
you'll also want to changed expanded back to false when you click on the minus
EDIT EDIT:
I made some modifications to your link
http://jsfiddle.net/eo1Ljw97/

How to hide the image

Here is the JSfiddle http://jsfiddle.net/zfxrxzLg/ Look at this for full code
Why does the last picture collapses underneath, and isn't hidden as it should be? I'm trying to create a slider. I'm thinking that might be the issue why the slider isn't working.
HTML
<div class="gallery-wrap">
<div class="gallery clearfix">
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
CSS
.gallery-wrap {
margin: 0 auto;
overflow: hidden;
width: 432px;
}
.gallery {
position: relative;
left: 0;
top: 0;
}
.gallery__item {
float: left;
list-style: none;
margin-right: 20px;
}
.gallery__img {
display: block;
border: 4px solid #40331b;
height: 80px;
width: 80px; }
.gallery__controls { margin-top: 10px; }
.gallery__controls-prev { cursor: pointer; float: left; }
.gallery__controls-next { cursor: pointer; float: right; }
.clearfix:after{
content: '.';
clear: both;
display:block;
height: 0;
visibility: hidden;
}
JavaScript
$(window).load(function(){
$(".gallery__link").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
var totalWidth = 0;
$(".gallery__item").each(function(){
totalWidth = totalWidth + $(this).outerWidth(true);
});
var maxScrollPosition = totalWidth - $(".gallery-wrap").outerWidth();
function toGalleryItem($targetItem){
if($targetItem.length){
var newPosition = $targetItem.position().left;
if(newPosition <= maxScrollPosition){
$targetItem.addClass("gallery__item--active");
$targetItem.siblings().removeClass("gallery__item--active");
$(".gallery").animate({
left : - newPosition
});
} else {
$(".gallery").animate({
left : - maxScrollPosition
});
};
};
};
$(".gallery").width(totalWidth);
$(".gallery__item:first").addClass("gallery__item--active");
$(".gallery__controls-prev").click(function(){
var $targetItem = $(".gallery__item--active").prev();
toGalleryItem($targetItem);
});
$(".gallery__controls-next").click(function(){
var $targetItem = $(".gallery__item--active").next();
toGalleryItem($targetItem);
});
});

few corrections and additions:
.gallery__item {
display: inline-block;
list-style: outside none none;
margin-right: 20px;
}
.gallery {
left: 0;
overflow: hidden;
position: relative;
top: 0;
white-space: nowrap;
}