Develop Reference

How To Create A Client-Sided Search Bar Using Javascript

I'm trying to create a client-sided search bar using javascript and I'm not sure how to do that and get it to function properly. I'm trying to create one without using PHP since I have no experience with server-sided programming. How would you create one that works with the client-side? Do you need an index for the search results and an API as well? And how would you use an index and an API? The goal of the search bar is to find terms or words that are present on the webpage is what I'm trying to achieve with it. It's to give the user a chance to search for the name of an article present in the webpage. Here is my current code if you want to see it: https://jsfiddle.net/snt87eg9/1/
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="header">
<div id ="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Articles</h2>
</div></div><br>
<div class="row">
<div class="leftcolumn">
<div class="card">
<div id="Title">
<h2>Article 1</h2>
<h5>Date</h5>
<p>Some text over there.,.. </p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<h2>Article 2</h2>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
```

You need a way to select the searchbar, articles and article titles,
lets say you give classes article and article-title and give the searchbar id="searchbar"
Document should look like this:
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search" id="searchbar">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="header">
<div id="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Articles</h2>
</div>
</div><br>
<div class="row article">
<div class="leftcolumn">
<div class="card">
<div id="Title">
<a href="#">
<h2 class="article-title">Article 1</h2>
</a>
<h5>Date</h5>
<p>Some text over there.,.. </p>
</div>
</div>
</div>
</div>
<div class="row article">
<div class="card">
<div id="Title2">
<a href="#">
<h2 class="article-title">Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
Here's the way to filter out what you wrote in the searchbar:
<script>
$('#searchbar').keyup(function(){
let articles = $('.article'); //get all elements with class="article"
let keyword = $(this).val().toLowerCase(); //get the content of the searchbar
if(keyword == "") //show all elements if searchbar is empty
articles.show();
else{ //else loop through articles and check if the keyword is in the title div
articles.each(function(element) {
let title = $(this).find('.article-title').text().toLowerCase();
(title.indexOf(keyword) >= 0) ? $(this).show() : $(this).hide();
});
}
});
</script>
The script uses jQuery , you can put this before the script if you don't have it already imported :
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

I just took the time to make a client-side search javascript function. But if you are not too familiar with javascript try to learn a little bit more before implementing this type of things.
$(document).ready(function() {
$("#header").hide().fadeIn(2000);
});
$(document).ready(function() {
$("#title").hide().fadeIn(2000);
});
$(document).ready(function() {
$("#footer").hide().fadeIn(2000);
});
function searchInArticles(word) {
const articles = document.querySelectorAll(".card");
articles.forEach(article => {
if (article.innerHTML.includes(word)) {
article.style.display = "block";
article.scrollIntoView();
} else {
article.style.display = "none";
}
})
}
searchInArticles("Yes");
//searchInArticles("Some");
/* Add a gray background color with some padding */
body {
font-family: Arial;
padding: 20px;
background: #32cd32;
}
/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: #7df9ff;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 100%;
}
/* Add a card effect for articles */
.card {
background-color: #87ceeb;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #00bfff;
margin-top: 20px;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
#media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a,
.topnav input[type=text],
.topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- My link -->
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="header">
<div id="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Articles</h2>
</div>
</div><br>
<div class="row">
<div class="leftcolumn">
<div class="card">
<div id="Title">
<a href="#">
<h2>Article 1</h2>
</a>
<h5>Date</h5>
<p>Yes text over there.,.. </p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Yes text over here..... </p>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
<div class="footer">
<div id="footer">
</div>
</div>
</body>
</html>

when carousel caption is too long it falls off image, how to fix?

Here's my css code and HTML. Whenever a line in my carousel-caption becomes too long it falls off the image. When I minimize the window, however, the caption eventually moves into the image creating the effect I really want. Wondering how I can contain it to the image? Thanks for the help - because I am relatively new to CSS/BOOTSTRAP styling.
* {
margin: 0;
padding: 0;
}
a {
background-color: transparent !important;
color: white;
}
img {
max-width: 100%;
max-height: 80vh;
margin: auto;
}
.carousel-caption {
padding: 30px;
background-color:transparent !important;
position: absolute;
}
.picsum-img-wrapper {
padding-bottom: 20px;
padding-top: 20px;
background-color: #8E9AAF ;
color: white;
font-size: 20px;
font-family: orpheuspro, serif;
font-style: normal;
font-weight: 600 !important;
display: grid;
height: 100%;
}
h3 {
background-color: transparent !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ngb-carousel [showNavigationArrows]="true"
[showNavigationIndicators]="true"
interval="12000"
[keyboard]="true"
[pauseOnHover]="true"
[wrap]="true"
[activeId]="'secondSlide'"
[interval]="3000" [pauseOnHover]="pauseOnHover" (slide)="onSlide($event)">
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img src="../../assets/img/actual.png" alt="Angular Carousel 1">
<div class="carousel-caption">
<h3>Title Goes Here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.. To read on click <a routerLink="/blog/1">here</a></p>
</div>
</div>
</ng-template>
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img src="../../assets/img/image0.jpeg" alt="Angular Carousel 2">
<div class="carousel-caption">
<h3>Title Goes Here</h3>
<p>Consectetur tortor volutpat pretium... To read on click <a routerLink="/blog/2">here</a></p>
</div>
</div>
</ng-template>
</ngb-carousel>

How to align images in card with dynamic title?

I will have several different cards with dynamic titles coming from the backend. What I need is to align pictures in a same line, no matter how long the title is, it should be aligned based on the longest title. Here is the picture bellow what I need, and here is the JSfiddle link to the code so far.
This is how it should look like
.wrapper {
width: 100%;
display: flex;
}
.card{
text-align: center;
width: 33%;
background: pink;
margin-right: 10px;
padding: 20px 5px;
}
.image {
margin-top: 20px;
}
<div class="wrapper">
<div class="card">
<div class="head">
<div class="title">
Hello
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
<div class="card">
<div class="head">
<div class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
</div>

You need to incorporate flexbox into the children and then force the image to always be at the bottom of the column.
Note...this only works when there are two children...aligning multiple children is not fully supported see Align child elements of different blocks
.wrapper {
width: 100%;
display: flex;
}
.card {
text-align: center;
width: 33%;
background: pink;
margin-right: 10px;
padding: 20px 5px;
display: flex;
flex-direction: column;
}
.title {
flex: 1;
}
.image {
margin-top: auto;
}
.head {
display: flex;
flex: 1;
flex-direction: column;
}
<div class="wrapper">
<div class="card">
<div class="head">
<div class="title">
Hello
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
<div class="card">
<div class="head">
<div class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
</div>

How to scroll a html scrolling section using input slider and vise versa

I have a section which is scrollable in my page and i want to be able to scroll the section with the help of a input slider. If i slide the input slider the section will scroll and also if i scroll on the scrollable section i want the input slider to scroll.
Heres the codepen example where i have created the scrollable section and slider : codepen example
I want to acheive this result only using core javascript.
I want to get the currentposition of the scrolling section and then convert it to percentage and link it to the input slider. The value of input slider ranges from 0 to 100 so i thought that this might be achievable that way. Then when we slide the input slider, it changes the scrollposition of the scrolling section accordingly. The final result should be that whether you slide the slider or scroll on the scrolling section itself both of them scrolls consecutively.

This is all of the code that i made. It should work.
function something() {
var test = document.getElementById("slideScroll").value;
document.getElementById("scrollingSection").style.top = test + "px";
}
setInterval(something, 1)
.second-section {
position: relative;
padding-left: 20%;
background: #d2d2d2;
}
.scrollslider {
width: 100px;
position: absolute;
z-index: 9;
left: 5%;
top: 50%;
transform: translateY(-50%)rotate(90deg);
}
.slider-scroll {
-webkit-appearance: none;
width: 100%;
height: 1.5px;
border-radius: 50%;
background: #030303;
outline: none;
opacity: 0.95;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider-scroll:hover {
opacity: 1;
}
.slider-scroll::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #a1a1a1;
border: 1px solid #fff;
cursor: pointer;
}
.slider-scroll::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
background: #ffc800;
border: 1px solid #fff;
cursor: pointer;
}
.scrollable-section {
overflow-y: auto;
height: 100px;
}
#scrollingSection::-webkit-scrollbar {
display: none;
}
#scrollingSection {
-ms-overflow-style: none;
scrollbar-width: none;
}
<div class="first-section">
<p>Lorem ipsum Loreum ipsum<br>Lorem ipsum Loreum ipsum<br></p>
</div>
<div class="second-section">
<div class="scrollslider">
<input type="range" min="1" max="100" class="slider-scroll" id="slideScroll">
</div>
<div class="scrollable-section" id="scrollingSection" style="position:absolute;top:30px">
<div class="scrollable-section" id="scrollingSection">
<div class="dummydiv">
<p>lorem ipsum</p>
<button>Button</button>
</div>
<div class="dummydiv">
<p>lorem ipsum</p>
<button>Button</button>
</div>
<div class="dummydiv">
<p>lorem ipsum</p>
<button>Button</button>
</div>
<div class="dummydiv">
<p>lorem ipsum</p>
<button>Button</button>
</div>
<div class="dummydiv">
<p>lorem ipsum</p>
<button>Button</button>
</div>
<div class="dummydiv">
<p>lorem ipsum</p>
<button>Button</button>
</div>
<div class="dummydiv">
<p>lorem ipsum</p>
<button>Button</button>
</div>
<div class="dummydiv">
<p>lorem ipsum</p>
<button>Button</button>
</div>
<div class="dummydiv">
<p>lorem ipsum</p>
<button>Button</button>
</div>
</div>
</div>
<div class="third-section">
<p>Lorem ipsum<br>lorem ipsum</p>
</div>
The JS part is basically getting the Slider value and adding it to the top:10px; value. When you drag it down, it goes down. When you drag it up it goes up.

Jquery — Set child to fill remaining width of parent

I am building a responsive layout. I would like to know if anyone knows a way through JS/jQuery which I can set children to fill the remaining space of a parent only if there is space to fill (to the right).
Layout when above 900px
Layout when below 900px
HTML for reference
.row {
width: 100%;
}
.colm-span-2 {
position: relative;
float: left;
margin: 15px auto;
padding: 0px 15px 0px 15px;
background-color: #FFFFFF;
background-clip: content-box;
}
.colm-span-2 {
width: 33.3333333333%;
}
#media screen and (max-width: 900px) {
.colm-span-2 {
width: 50%;
}
}
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-cta-green">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-dark-purple">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>

I would suggest adding:
.colm-span-2:last-child {
width: 100%;
}
to your media query. This will change the final .colm-span-2 to have a 100% width.

With flexbox and :last-child (assuming you have rows) this is possible
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.bg-white {
background: whitesmoke;
}
.bg-cta-green {
background: green;
}
.bg-dark-purple {
background: rebeccapurple;
}
.row {
display: flex;
}
.colm-span-2 {
flex: 0 0 33%;
margin: .25em;
border: 1px solid grey;
}
.colm-span-2:last-child {
flex: 1;
}
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-cta-green">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-dark-purple">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-cta-green">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>