Problem with Javascript on running image portfolio filter Bootstrap code
Question
Hello i took the code from bootstrap for image portfolio filter
This code has 4 Filter buttons [ Show all, Nature, Cars, People ]. Now i wanted to add more filter buttons i added 2 buttons Namely [ Animals and Tribals ]. Now i will write the code that i have used below on running the code and clicking the buttons Animals and Tribals The filter results of Cars is shown.
Please correct my script. Also i wanted to add 16 filters so how can this script be modified to use for that purpose. Thanks
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
/* Center website */
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 10px -16px;
}
/* Add padding BETWEEN each column */
.row,
.row > .column {
padding: 8px;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
display: none; /* Hide all elements by default */
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}
</style>
</head>
<body>
<!-- MAIN (Center website) -->
<div class="main">
<h1>MYLOGO.COM</h1>
<hr>
<h2>PORTFOLIO</h2>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('nature')"> Nature</button>
<button class="btn" onclick="filterSelection('cars')"> Cars</button>
<button class="btn" onclick="filterSelection('people')"> People</button>
<button class="btn" onclick="filterSelection('cars')"> Animals</button>
<button class="btn" onclick="filterSelection('cars')"> Tribals</button>
</div>
<!-- Portfolio Gallery Grid -->
<div class="row">
<div class="column nature">
<div class="content">
<img src="https://drive.google.com/uc?export=view&id=19EzpAuz8LCYDABdPQ9Qe-RMVU1uLzHo0" alt="Mountains" style="width:100%">
<h4>Mountains</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column nature">
<div class="content">
<img src="https://drive.google.com/uc?export=view&id=197DFuM_xI8NYmOQKbWQ0oGnm1sWuWCrk" alt="Lights" style="width:100%">
<h4>Lights</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column nature">
<div class="content">
<img src="https://drive.google.com/uc?export=view&id=1ZLABZ6SF3rWeDlQGr_9MqDnek0IIeTj5" alt="Nature" style="width:100%">
<h4>Forest</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="https://drive.google.com/uc?export=view&id=11lgC324ZlpNnE3e-XD8nuohLhTnIjHi_" alt="Car" style="width:100%">
<h4>Retro</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="https://drive.google.com/uc?export=view&id=1rm82AVlz3K9AC4AznY8RL54-_mpNQal4" alt="Car" style="width:100%">
<h4>Fast</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="https://drive.google.com/uc?export=view&id=1qtvMg67R8xDeenPOWafU_CvvCGARdFM8" alt="Car" style="width:100%">
<h4>Classic</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="https://drive.google.com/uc?export=view&id=1wSNS1bfZJKN6dIa5JjVR0OvXKywWUzvy" alt="Car" style="width:100%">
<h4>Girl</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="https://drive.google.com/uc?export=view&id=12yrA84gd0oQKBYycPuydBqPzcg8hjKf3" alt="Car" style="width:100%">
<h4>Man</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="https://drive.google.com/uc?export=view&id=1AwBmZO76_qemRD3eUmGXZlJRvNJ7fuBX" alt="Car" style="width:100%">
<h4>Woman</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column Animals">
<div class="content">
<img src="https://drive.google.com/uc?export=view&id=1HqEUHhEIfWPQd6d44E0PzDWr2cx7NLrj" alt="Animals" style="width:100%">
<h4>Dog</h4>
<p>Animals Filter check</p>
</div>
</div>
<div class="column Animals">
<div class="content">
<img src="https://drive.google.com/uc?export=view&id=16nc-dDbo_bmaUy5q3VPihblkSNJr1GzY" alt="Animals" style="width:100%">
<h4>Cat</h4>
<p>Air cool down.</p>
</div>
</div>
<div class="column Animals">
<div class="content">
<img src="https://drive.google.com/uc?export=view&id=1lYSylzeExeNv4OvYO8xXr9HjT9YcI77O" alt="Animals" style="width:100%">
<h4>Tiger</h4>
<p>LFairytale Anime Check</p>
</div>
</div>
<div class="column Tribals">
<div class="content">
<img src="https://drive.google.com/uc?export=view&id=1hlB_WWrmBgL5XP0hEC0i06XdKEIFCK35" alt="Tribals" style="width:100%">
<h4>Apparel</h4>
<p>Tribals Check Filter</p>
</div>
</div>
<div class="column Tribals">
<div class="content">
<img src="https://drive.google.com/uc?export=view&id=10Um1rXN2YIaM3DxYUrK_PHPob4xjbkBb" alt="Tribals" style="width:100%">
<h4>Glossy</h4>
<p>Violet sky wonder.</p>
</div>
</div>
<div class="column Tribals">
<div class="content">
<img src="https://drive.google.com/uc?export=view&id=137zmiZigzAEJwHpp16x9y7kZFIUvtyr6" alt="Tribals" style="width:100%">
<h4>Prited</h4>
<p>Edge Of Tomorrow</p>
</div>
</div>
<!-- END GRID -->
</div>
<!-- END MAIN -->
</div>
<script>
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>
1 answers
solution1
0 2020-07-26 15:10:14
The problem lies in the following lines:
<button class="btn" onclick="filterSelection('cars')"> Animals</button>
<button class="btn" onclick="filterSelection('cars')"> Tribals</button>
It should become
<button class="btn" onclick="filterSelection('Animals')"> Animals</button>
<button class="btn" onclick="filterSelection('Tribals')"> Tribals</button>
The value that is given to the filterSelection function is used to show and hide the correct elements, and it should correspond to the class name you use in the markup. So in the code
<div class="column Tribals">
<div class="content">
<img src="https://drive.google.com/uc?export=view&id=1hlB_WWrmBgL5XP0hEC0i06XdKEIFCK35" alt="Tribals" style="width:100%">
<h4>Apparel</h4>
<p>Tribals Check Filter</p>
</div>
the class "Tribals" is used to show and hide this column. Expanding your filtering system to 16 filters should be no problem, as long as you correctly give the value to the function that you call in your button.
So for example if you want to add a button that filters images that show tables the markup for your button would look like this:
<button class="btn" onclick="filterSelection('Tables')"> Tables</button>
The markup for the column that you want to hide or show would look like this:
<div class="column Tables">
<div class="content">
.......
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Problem in running code with Promises in javascript
Portfolio filter
jQuery library interfering with Javascript for navbar & filterable portfolio small issue - bootstrap 3
animation bootstrap in portfolio
How do I use ajax and javascript to build an image portfolio
Filter Portfolio JQuery
HTML Portfolio with filter and fancybox
How to filter Portfolio grid with nav nav-pills in twitter bootstrap3 with jquery
Remove “all” button in portfolio filter and auto display specific filter button in JavaScript
Double image slider portfolio
Related Tags