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>

jquery load tab-content onclick

These are chrome-like tabs. In this when i click on first tab i.e. facebook tab it shows facebook content and when i click on second tab i.e. on twitter tab it shows first tab's content and while clicking on third fourth and fifth tabs it shows their own content, there is no noissue with third fourth and fifth tabs.
And when clicking second time on first tab it shows no content. same is the issue with second tab.
HTML
<div class="box box-primary">
<div class="row">
<div class="col-md-12">
<div class="tabs">
<div class="tab fb-icon-color active" id="#tab1">
<a href="#tab1">
<div class="tab-box">
<h3 style="text-align: center;margin-top: 15px;" class="facebook">
<i class="fa fa-facebook" title="Facebook"></i>
</h3>
</div>
</a>
</div>
<div class="tab twitter-icon-color">
<a href="#tab2">
<div class="tab-box">
<h3 style="text-align: center;margin-top: 15px;"><i class="fa fa-twitter" title="Twitter"></i></h3>
</div>
</a>
</div>
<div class="tab google-plus-icon-color">
<a href="#tab3">
<div class="tab-box">
<h3 style="text-align: center;margin-top: 15px;"><i class="fa fa-google-plus" title="Google+"></i></h3>
</div>
</a>
</div>
<div class="tab crawl-icon-color">
<a href="#tab4">
<div class="tab-box">
<h3 style="text-align: center;margin-top: 15px;"><i class="fa fa-bug" aria-hidden="true" title="Crawling"></i>
</div>
</a>
</div>
<div class="tab video-icon-color">
<a href="#tab5">
<div class="tab-box">
<h3 style="text-align: center;margin-top: 15px;"><i class="fa fa-video-camera" title="Youtube"></i></h3>
</div>
</a>
</div>
</div>
<div class="tabs-content pane">
<!-- first Pane -->
<div id="tab1" >
<%= render :partial =>"fb_tab"%>
</div>
<div id="tab2" style="display: none;">
<%= render :partial =>"twitter_tab"%>
</div>
<div id="tab3" style="display: none;">
<%= render :partial =>"gplus_tab"%>
</div>
<div id="tab4" style="display: none;">
<%= render :partial =>"crawled_tab"%>
</div>
<div id="tab5" style="display: none;">
<h1> youtube</h1>
</div>
</div>
</div>
</div>
JAVASCRIPT
<script>
$(document).ready(function (){
$('.tab').click(function(){
$('.tab').removeClass('active');
$(this).addClass('active');
$(".tabs a").click(function() {
$(".pane div").hide();
$($(this).attr("href")).show();
});
});
});
</script>
CSS
.tabs {
height:45px;
padding: 1px 0 0 0;
overflow:visible;
}
.tab {
width:246px;
height:45px;
overflow:hidden;
float:left;
margin:0 -15px 0 0;
}
.tab-box {
height:50px;
background: rgba(60, 141, 188, 0.87);
border-radius: 4px;
border:1px solid #ccc;
margin:0 13px 0;
box-shadow: 0 0 2px #fff inset;
-webkit-transform: perspective(100px) rotateX(30deg);
-moz-transform: perspective(100px) rotateX(30deg);
}
.tab.active {
z-index:40;
position:relative;
padding-bottom:1px;
}
.tab.active .tab-box{
background-color: #ECF0F5;
#include background-image(linear-gradient(top, #ccc , #ddd 3%, rgba(#eee, 0.5) ));
box-shadow: 0 0 2px 0 #fff inset;
}
.tabs-content.pane {
z-index:1;
padding:15px;
border:1px solid #ccc;
background:#ECF0F5;
}

The problem is that you have nested click handlers, please try this:
$(document).ready(function() {
$(".tabs a").click(function(event) {
event.preventDefault();
$('.tab').removeClass('active');
$(this).parent().addClass('active');
$(".pane div").hide();
$($(this).attr("href")).show();
});
});

How to prevent bootstrap navbar buttons from stacking

I'm trying to design a responsive page.
This is how it looks like in a wide browser.
It changes to the ff. when I make it narrow:
What I want to happen is this:
This is my code for it:
/**For Eample Only So the Icons are Visible*/
.navbar-ct-blue {
background: #1B96BF;
}
<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-ct-blue navbar-fixed-bottom" role="navigation">
<div class="container">
<ul class="nav nav-justified">
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-piggy" style="color: white;"></i>
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-cash" style="color: white;"></i>
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-wallet" style="color: white;"></i>
</a>
</li>
</ul>
</div>
<!-- /.container-fluid -->
</nav>
I have looked at these links, but I couldn't find the answer. Please help.
How to prevent Bootstrap navbar from displaying in multiple lines without collapsing them into an icon
How to prevent a bootstrap navbar from collapsing when window resizing
Centering navbar buttons in bootstrap

You're seeing this happen since the nav-justified class only uses display:table-cell above 768px:
#media (min-width:768px) {
.nav-justified > li {
display: table-cell;
width: 1%
}
Here are two examples that solve this:
Using nav-justified:
.navbar.navbar-ct-blue {
background: #1B96BF;
border: 1px solid #1B96BF;
max-height: 50px;
line-height: 30px;
margin: 0;
}
.navbar.navbar-ct-blue .nav-justified > li {
display: table-cell;
width: 1%
}
.navbar.navbar-ct-blue .nav-justified > li > a {
color: white;
font-size: 30px;
}
.navbar.navbar-ct-blue .nav-justified > li > a:hover {
color: #00F2FF;
background: none;
}
<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-ct-blue navbar-fixed-bottom" role="navigation">
<div class="container">
<ul class="nav nav-justified">
<li>
<a href="#">
<span class="pe-7s-piggy"></span>
</a>
</li>
<li>
<a href="#">
<span class="pe-7s-cash"></span>
</a>
</li>
<li>
<a href="#">
<span class="pe-7s-wallet"></span>
</a>
</li>
</ul>
</div>
</nav>
Using the Grid:
.navbar.navbar-ct-blue {
background: #1B96BF;
border: 1px solid #1B96BF;
margin: 0;
}
.navbar.navbar-ct-blue .nav-row span {
color: white;
padding: 20px 0;
font-size: 30px;
}
.navbar.navbar-ct-blue .nav-row span:hover {
color: #00F2FF;
}
<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-bottom navbar-ct-blue" role="navigation">
<div class="container">
<div class="row nav-row text-center">
<div class="col-xs-4">
<span class="pe-7s-piggy"></span>
</div>
<div class="col-xs-4">
<span class="pe-7s-cash"></span>
</div>
<div class="col-xs-4">
<span class="pe-7s-wallet"></span>
</div>
</div>
</div>
</nav>

To give the <li class="navbar-nav"> is obviously wrong. Removing that could fix it. Additionally, as Tasos said inline-block for the list item should do it. Sure, look in the corresponding media query.

Bootstrap - Toggle sidebar with icons

I have such a layout:
I would like that when one clicks the orange button, the sidebar shrinks and leaves only the icons visible. And for the mobile should totally shrink and when one clicks the button only the icons should be visible. The behaviour should be like this but I don't understand how to make it work.
For now I have my header:
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#menu-toggle" onclick="toggle()"><i class="fa fa-bars"></i></a>
<a class="navbar-brand" href="#">...</a>
</div>
But I don't know how to make it collapse when one clicks.. Thanks

In a rough way you could assign 2 classes (one for the icon, one for the relative text) for example, class "icon" and class "text", and on button click, toggle (hide and show) the element with the class "text". Then in a callback you could animate the resizing of the sidebar.
Edit2: Improved example
$('#togglebutton').click(function() {
if ($(window).width() > 500) { //your chosen mobile res
$('.text').toggle(300);
} else {
$('.menu').animate({
width: 'toggle'
}, 350);
}
});
​.wrapper { width: 100% }
.menu {
background: #222;
float: left;
display: block;
}
.icon { max-width: 1em }
.menu ul {
list-style-type: none;
margin: 0;
padding: 0.2em 0.5em;
}
.menu li { margin: 0 }
.menu a, .menu a:visited {
color: white;
text-decoration: none;
}
.text {
display: inline;
margin: 0;
}
.content { display: block; }
button { margin: 1em; }
#media only screen and (max-width: 500px) {
.text {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="menu">
<ul>
<li>
<a href="#">
<img class="icon" src="http://bit.do/iconUrl">
<p class="text">Text 1</p>
</a>
</li>
<li>
<a href="#">
<img class="icon" src="http://bit.do/iconUrl">
<p class="text">Text 2</p>
</a>
</li>
</ul>
</div>
<div class="content">
<button id="togglebutton">☰</button>
</div>
</div>
Hope it was useful to have a general idea of my suggestion.

Update 2019
Bootstrap 4
This is also possible in Bootstrap 4, but still requires extra CSS to handle the sidebar state.
https://www.codeply.com/p/e5IcpodgE2
Bootstrap 3
You can create an "off canvas" sidebar, and then use Bootstrap's responsive utility classes to toggle display of the icons.
<div class="wrapper">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
<ul class="nav" id="menu">
<li><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></li>
<li><i class="glyphicon glyphicon-list"></i> <span class="collapse in hidden-xs">Stories</span></li>
<li><i class="glyphicon glyphicon-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></li>
<li><i class="glyphicon glyphicon-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></li>
</ul>
</div>
<!-- main right col -->
<div class="column col-sm-9 col-xs-11" id="main">
<i class="fa fa-navicon"></i>
<p>
content...
</p>
</div>
</div>
</div>
https://www.codeply.com/p/uunNOeQAqo

Why doesn't the menu background color change?

I have created 2 menus:prod & prod2, I find when the mouse focus on prod2, the background color is changed but when the mouse focus on prod1 the background color doesn't change.
Why it doesn't change?
Styles:
ul.hMenu {
margin: 0;
padding: 0;
z-index: 1;
}
ul.hMenu > li {
margin: 0;
padding: 0;
list-style: none;
float: left;
width:140px;
}
ul.hMenu li a {
display: block;
text-align: left;
text-decoration: none
}
ul.hMenu li > div {
position: absolute;
display: none;
}
ul.hMenu div a {background: yellow;
}
div.lay1{ float:left;}
div.lay1 br{line-height:50%}
.topMenu{font:bold 12px arial;color:#169e39;text-decoration: none;}
.secondMenu{font:12px arial;color:#000000;text-decoration: none;}
.arrow_box {
position: relative;
background: red;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(149, 213, 53, 0);
border-bottom-color: red;
border-width: 13px;
left: 10%;
margin-left: -13px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 19px;
left: 10%;
margin-left: -19px;
}
Script:
function showMenu(obj){
var a=obj.children[0];
a.style.color="blue";
var div = obj.children[1];
obj.style.backgroundColor="yellow";
div.style.display="block";
}
function hideMenu(obj){
var a=obj.children[0];
a.style.color="red";
var div = obj.children[1];
div.style.display="none";
obj.style.backgroundColor="";
}
HTML:
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod</a>
<div><br/>
<!-- here-->
<div class="arrow_box" >
<div class="lay1">
<div>Manage Content<br> Message </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<div class="lay1">
<div>Manage Content<br> Message <br> Help </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</li>
</ul>
<br/><br/><br/><br/><br/>
Test
Problem In JsFiddle

I tested your code and it worked! what is your browser? please place a demo and also add this code as well
a.setAttribute('style','background-color:blue');
some browsers have incompatibility with element.style

give CSS Like this
.arrow_box{ position:absolute; white-space:nowrap}
Check this
http://jsfiddle.net/zz5XJ/2/

try the below HTML:
<body>
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod</a>
<div class="arrow_box" >
<div class="lay1">
<div>Manage Content<br> Message </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<div class="lay1">
<div>Manage Content<br> Message <br> Help </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</li>
</ul>
<br/><br/><br/><br/><br/>
Test
</body>

Please check your HTML :
Because you execute same function for both Pord or Pord2 but the Inner html is different for both li. so function showMenu() works different for both Pord or Pord2:
HTML:
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;"
href="javascript:void(0);">prod</a>
<div class="arrow_box">
<br />
<div class="lay1">
<div>
Manage Content<br>
Message
</div>
<br />
<br />
<div>
Manage Assignment<br>
User Inquiry</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;"
href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<br />
<div class="lay1">
<div>
Manage Content<br>
Message
<br>
Help
</div>
<br />
<br />
<div>
Manage Assignment<br>
User Inquiry</div>
</div>
</div>
</li>
</ul>
Try This
UPDATED
Put <br /> before arrow_box div for both li and some change into Javascript:
var div = obj.children[2];
Javascript -
function showMenu(obj){
var a=obj.children[0];
a.style.color="blue";
var div = obj.children[2];
obj.style.backgroundColor="yellow";
div.style.display="block";
}
function hideMenu(obj){
var a=obj.children[0];
a.style.color="red";
var div = obj.children[2];
div.style.display="none";
obj.style.backgroundColor="";
}
Updated Jsfiddle