We Keep Coding

How to Limit Elements on a Screen?

I have 4 boxes, (which will later be 9), in which I want there to be a total of 3 on screen at all times, excluding mobile. The remainder who are not on screen will be moved to the right end of the box line, but be unseen. I have looked around for a method to accomplish this via HTML & CSS and have found none. Is there a way to do this with HTML, CSS, or JS?
.bioSlider {
position: relative;
display: flex;
justify-content: center;
overflow: hidden;
}
.box {
position: relative;
display: inline-block;
width: 390px;
padding: 10px;
}
.slideImage {
position: relative;
height: 300px;
}
.slideImage img {
object-fit: cover;
box-sizing: border-box;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #000000;
opacity: 0;
transition: 0.6s ease-in-out;
}
.quoteText {
position: absolute;
text-align: left;
font-style: italic;
word-break: break-all;
padding: 30px;
top: 30px;
color: #e5e5e5;
opacity: 0;
transition: 0.6s ease-in-out;
}
.detailBox {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 100%;
padding: 9px;
background-color: #e8e8e8;
}
.slideImage:hover .overlay {
opacity: 50%;
}
.slideImage:hover .quoteText {
opacity: 100%;
}
<div>
<!-- Cadet Slider -->
<ul class='bioSlider'>
<li class='cadetOne'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Red_Card.png' alt=''>
<div class='overlay'> </div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion CDR <br> LTC Chase Hinson</h3>
</div>
</div>
</div>
</li>
<li class='cadetTwo'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Yellow_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion XO <br> MAJ Grayson Akins</h3>
</div>
</div>
</div>
</li>
<li class='cadetThree'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Blue_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion NCO <br> CSM Janecia Bass</h3>
</div>
</div>
</div>
</li>
<li class='cadetFour'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Green_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion S1 <br> CPT Lauren Newton</h3>
</div>
</div>
</div>
</li>
</ul>
</div>

Show search results only when searching

How can I hide the list of products, and show the results only when searching using the search bar?
Every time I hide the list of products, when I search the entire list appears and not only the search result.
I want to show only the search result when searching using the search bar.
function search() {
var searchBar, ProductsList, Products, ProductsTitle, TextValue, Element
searchBar = document.getElementById('searchBar').value.toUpperCase()
ProductsList = document.getElementById('product-list')
Products = document.querySelectorAll('.product')
ProductsTitle = ProductsList.getElementsByTagName('h2')
for (let i = 0; i < ProductsTitle.length; i++) {
TextValue = Products[i].getElementsByTagName('h2')[0];
if (TextValue) {
Element = TextValue.textContent || e.innerHTML
if (Element.toUpperCase().indexOf(searchBar) > -1) {
Products[i].style.display = ""
} else {
Products[i].style.display = "none"
}
}
}
}
.search-result {
max-width: max-content;
background-color: rgba(0, 0, 0, 0.6);
height: max-content;
}
.products {
padding: 10px;
width: 100%;
display: flex;
flex-direction: column;
position: absolute;
top: 50px;
z-index: 2;
}
.product {
float: right;
display: flex;
align-items: center;
direction: rtl;
color: white;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 6px;
border-bottom: 2px solid red;
}
.product text {
float: left;
}
* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.search {
width: 100%;
display: flex;
justify-content: center;
padding: 20px;
}
.search input {
border-radius: 20px 0px 0px 20px;
outline: none;
width: 250px;
border-color: red;
padding-left: 20px;
}
.search button {
border-radius: 0px 20px 20px 0px;
padding: 5px 20px;
background-color: red;
color: white;
font-size: 1.2rem;
border-color: red;
cursor: pointer;
outline: none;
border: none;
}
<div class="search">
<input id="searchBar" type="text" placeholder="Search" onkeyup="search()">
<button type="submit">search</button>
</div>
<div class="search-result">
</div>
<div class="img">
<img src="https://www.sare.org/wp-content/uploads/Our-Farms-Our-Future-Podcast-Logo-330x166.jpg" style="width: 100%;" alt="">
</div>
<div class="products" id="product-list">
<div class="product">
<img src="images/img/2.png" alt="" style="width:150px;">
<div class="text">
<h2>Mango</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/3.png" alt="" style="width:150px;">
<div class="text">
<h2>pomegranate</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/4.png" alt="" style="width:150px;">
<div class="text">
<h2>Grape</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/5.png" alt="" style="width:150px;">
<div class="text">
<h2>apple</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/6.png" alt="" style="width:150px;">
<div class="text">
<h2>fig</h2>
<h4>1.50€</h4>
</div>
</div>
</div>

You can use classList in parent .products
searchBarValue.length ? productsList.classList.add('active') : productsList.classList.remove('active')
When class is active the wrapper as display:flex
Note: I improved a bit your code
const searchBar = document.getElementById('searchBar')
function search() {
const searchBarValue = document.getElementById('searchBar').value.toUpperCase()
const productsList = document.getElementById('product-list')
const products = document.querySelectorAll('.product')
const productsTitle = productsList.getElementsByTagName('h2')
searchBarValue.length ? productsList.classList.add('active') : productsList.classList.remove('active')
for (let i = 0; i < productsTitle.length; i++) {
const textValue = products[i].getElementsByTagName('h2')[0];
if (textValue) {
const element = textValue.textContent.toUpperCase()
products[i].style.display = element.indexOf(searchBarValue) > -1 ? "" : "none"
}
}
}
searchBar.addEventListener('keyup', search)
.search-result {
max-width: max-content;
background-color: rgba(0, 0, 0, 0.6);
height: max-content;
}
.products {
padding: 10px;
width: 100%;
display: none;
position: absolute;
top: 50px;
z-index: 2;
}
.products.active {
display: flex;
flex-direction: column;
}
.product {
display: flex;
align-items: center;
direction: rtl;
color: white;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 6px;
border-bottom: 2px solid red;
}
.product text {
float: left;
}
* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.search {
width: 100%;
display: flex;
justify-content: center;
padding: 20px;
}
.search input {
border-radius: 20px 0px 0px 20px;
outline: none;
width: 250px;
border-color: red;
padding-left: 20px;
}
.search button {
border-radius: 0px 20px 20px 0px;
padding: 5px 20px;
background-color: red;
color: white;
font-size: 1.2rem;
border-color: red;
cursor: pointer;
outline: none;
border: none;
}
<div class="search">
<input id="searchBar" type="text" placeholder="Search">
<button type="submit">search</button>
</div>
<div class="search-result">
</div>
<div class="img">
<img src="https://www.sare.org/wp-content/uploads/Our-Farms-Our-Future-Podcast-Logo-330x166.jpg" style="width: 100%;" alt="">
</div>
<div class="products" id="product-list">
<div class="product">
<img src="images/img/2.png" alt="" style="width:150px;">
<div class="text">
<h2>Mango</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/3.png" alt="" style="width:150px;">
<div class="text">
<h2>pomegranate</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/4.png" alt="" style="width:150px;">
<div class="text">
<h2>Grape</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/5.png" alt="" style="width:150px;">
<div class="text">
<h2>apple</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/6.png" alt="" style="width:150px;">
<div class="text">
<h2>fig</h2>
<h4>1.50€</h4>
</div>
</div>
</div>

how to show tick mark and an overlay on image while clicking an image, but when i click other image it should hide and display the same on new image?

i want the image to be overlay-ed with any color and give a tick mark on it(As it is selected) allowing only one image at a time. while clicking other image it should hide the previous one and show tick and overlay on new image.
<div class="grid-two imageandtext">
<figure>
<img src="assets/images/painting.jpg" class="img-thumbnail">
<div class="caption">
<p>Painting</p>
</div>
<div class="imageandtext image_grid">
<img src="assets/images/photography.jpg" class="img-thumbnail" >
<div class="caption1">
<p>Photography</p>
</div></div>
</figure>
</div>
it should display like below image
now it is working like this
https://jsfiddle.net/liza_susan/L8jyum77/

Here is a start, using a pseudo element for the cover, a label and an input of type radio to take care of the selection.
I wrapped the image in a label, and when clicked, it simply checks the input.
In the CSS, when an input is checked, the .image_grid input:checked + .caption::after rule apply the properties to cover and show the check mark.
Updated fiddle
.caption {
position: absolute;
top: 0;
left: 5px; /* changed to match image_grid padding */
height: 100%;
width: calc(100% - 5px); /* changed to match image_grid padding */
padding: 0 10px;
box-sizing: border-box;
pointer-events: none;
}
.caption p {
display: inline-block;
padding: 10px;
color: #fff;
background: rgba(0,0,0,0.5);
font-family: 'Myriad Pro regular';
font-size: 15.31px;
}
.imageandtext {
position: relative;
}
.image_grid {
display: inline-block;
padding-left: 5px;
}
.image_grid img { /* added rule */
display: block;
}
.image_grid input {
display: none;
}
.image_grid input:checked + .caption {
background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
content: '✔';
position: absolute;
top: 50%; left: 50%;
width: 70px; height: 70px;
transform: translate(-50%,-50%);
color: white;
font-size: 60px;
line-height: 80px;
text-align: center;
border: 2px solid white;
border-radius: 50%;
}
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label for="selimg1">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
</label>
<input type="radio" name="selimg" id="selimg1">
<div class="caption">
<p>Painting</p>
</div>
</div>
<div class="imageandtext image_grid">
<label for="selimg2">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
</label>
<input type="radio" name="selimg" id="selimg2">
<div class="caption">
<p>Photography</p>
</div>
</div>
</div>
Based on a comment, here is a version where the caption is positioned inside the label, as a span (as label can only have inline element as children).
With this one doesn't need unique id on the input and can drop the for attribute, and no need to compensate for any padding and/or margin set on the image_grid.
Updated fiddle
Stack snippet
.caption {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
pointer-events: none;
}
.caption span {
display: inline-block;
padding: 10px;
color: #fff;
background: rgba(0,0,0,0.5);
font-family: 'Myriad Pro regular';
font-size: 15.31px;
}
.image_grid {
display: inline-block;
padding-left: 25px;
}
.image_grid label {
position: relative;
display: inline-block;
}
.image_grid img {
display: block;
}
.image_grid input {
display: none;
}
.image_grid input:checked + .caption {
background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
content: '✔';
position: absolute;
top: 50%; left: 50%;
width: 70px; height: 70px;
transform: translate(-50%,-50%);
color: white;
font-size: 60px;
line-height: 80px;
text-align: center;
border: 2px solid white;
border-radius: 50%;
}
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label>
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<input type="radio" name="selimg">
<span class="caption">
<span>Painting</span>
</span>
</label>
</div>
<div class="imageandtext image_grid">
<label>
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<input type="radio" name="selimg">
<span class="caption">
<span>Painting</span>
</span>
</label>
</div>
</div>

How about adding an image when someone hovers over it.
i.e.
.image-thumbnail:hover {
background-image: <path to image>;
background-repeat: no-repeat;
}

How about this JQuery function:
$('.image_grid').click(function() {
$('.image_grid img:nth-of-type(2)').hide();
$(this).children('img:nth-of-type(2)').show();
});
$('.image_grid').click(function() {
$('.image_grid img:nth-of-type(2)').hide();
$(this).children('img:nth-of-type(2)').show();
});
.grid-two {
width: 50%;
display: inline;
}
.caption1 {
position: absolute;
top: -51px;
left: 11px;
width: 100%;
color: #000;
font-family: Myriad Pro regular;
font-size: 15.31px;
}
.imageandtext {
position: relative;
}
.image_grid {
display: inline;
padding-left: 5px;
}
.absolute {
border: 1px solid black;
position: absolute;
left: 0px;
display: none;
width: 50%;
margin: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="grid-two imageandtext">
<figure>
<div class="imageandtext image_grid">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<div class="caption1">
<p>Painting</p>
</div>
<img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute">
</div>
<div class="imageandtext image_grid">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<div class="caption1">
<p>Photography</p>
</div>
<img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute">
</div>
</figure>
</div>
JSFiddle

Create an automatic slider

I created this code for a slider. When I hover the thumbnail image it shows me image, but I need to create an automatic slider. How can i do this?
/******************************************************************************************************/
.sliderconteainer {
width: 100%;
position: relative;
border: 2px double silver;
border-radius: 5px;
}
.thmbnail {
width: 25%;
height: 100px;
float: left;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
float: right;
left: 0;
top: 0;
opacity: 0;
}
.slide img {
height: 300px;
width: 100%;
}
.thmbnail img {
width: 100%;
height: 95%;
border: 2px solid #EEEEEE;
border-radius: 5px;
}
.content-placeholder {
width: 100%;
height: 300px;
}
.info {
background-color: black;
z-index: 99;
margin-top: -66px;
position: absolute;
width: 100%;
padding-right: 10px;
opacity: .75;
border-radius: 5px;
}
.info p {
color: #ABB3BD;
font-family: 'B Mitra';
}
.info h5 {
font-family: 'B Titr';
color: #ffffff;
}
.thmbnail:hover .slide {
opacity: 1;
}
.thmbnail:hover .thmbnail img {
border: 2px solid #56656E;
}
#main {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class=" sliderconteainer col-md-5 col-sm-5">
<div class="content-placeholder"></div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/SiteDesign/profile.jpg" class="img-responsive"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/SiteDesign/profile.jpg"/>
</div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/Slider/8.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/8.jpg"/>
</div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/Slider/image-slider-2.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/image-slider-2.jpg"/>
</div>
<div class="thmbnail ">
<div class="slide">
<img src="~/Image/Slider/Megumi-4565.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/Megumi-4565.jpg"/>
</div>
</div>
</div>

If you want to change things automatically, you can use the build-in JavaScript function setInterval(xfunction, xInterval), which calls xFunction, every xInterval
setInterval(function() {
console.log("MOVE IT");
moveLeft();
}, 1000);
As #dennis-koch mentioned, I would also have a look at plugins you may use for a slider.

CSS && JavaScript Scrolling div

I've got a div with images in it. There are going to be a lot of images so I want to be able to scroll left and right within the div with the use of buttons. I previous had the code working but upon changing the divs from media queried and response to static straight CSS, it no longer scrolls.
html:
<div id="maincontent">
<h3 align="center" > Title </h3>
<div id="gallery-display">
<div id="image-1"><img src="image1.jpg" alt="" /></div>
<div id="image-2"><img src="image2.jpg" alt="" /></div>
<div id="image-3"><img src="image3.jpg" alt="" /></div>
<div id="image-4"><img src="image4.jpg" alt="" /></div>
</div>
<div id="gallery-slider-parent">
<div class="left-slider-button">
<input
type="button"
value="◄"
onmousedown="scrollDiv('gallery-slider', 3)"
onmouseup="clearTimeout(timer1)"
/>
</div>
<div id="gallery-slider">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
</div>
<div class="right-slider-button">
<input
type="button"
value="►"
onmousedown="scrosllDiv('gallery-slider', 3)"
onmouseup="clearTimeout(timer1)"
/>
</div>
</div>
</div>
css:
body {
background-color: #000;
}
#maincontent {
width: 960px;
margin: 0 auto;
background-color: #000;
color: #fff;
}
#gallery-display {
height: 500px;
margin: 0 auto;
position: relative;
overflow: hidden;
background-color: #000;
}
#gallery-display img {
display: block;
margin: 0 auto;
height: 500px;
right: 0;
left: 0;
}
#gallery-display [id^='image']:target img {
top: 0;
display: block;
margin: 0 auto;
height: 500px;
}
#gallery-display [id^="image"] img {
position: absolute;
top: -500px;
border: 0;
-moz-transition: top 0.5s ease-in;
-ms-transition: top 0.5s ease-in;
-webkit-transition: top 0.5s ease-in;
-o-transition: top 0.5s ease-in;
}
#gallery-display [id^='image']:target a {
background: #fff;
border: 3px solid #333;
width: 10px;
height: 10px;
}
#gallery-slider-parent {
background-color: #000;
position: relative;
width: 960px;
overflow: hidden;
float: left;
}
#gallery-slider {
background-color: #000;
display: inline;
width: 94%;
float: left;
height: 120px;
overflow: auto;
white-space: nowrap;
}
#gallery-slider img {
height: 75px;
padding: 15px;
float: none;
}
.left-slider-button input[type="button"]{
opacity: .7;
color: #FFF;
float: left;
width: 28px;
border: none;
height: 100px;
background-color: #151515;
}
.right-slider-button input[type="button"]{
opacity: .7;
color: #FFF;
float: left;
width: 28px;
border: none;
height: 100px;
display: inline-block;
background-color: #151515;
}
javascript:
var timer1;
function scrollDiv(divId, depl) {
var scroll_container = document.getElementById(divId);
scroll_container.scrollLeft -= depl;
timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 10);
}