How can I disaply a row of images upon pressing a button? - javascript

I want to be able to press one of the "buttons" as seen on the image below. When the button is pressed, the corresponding section of 3 images would appear/hide. As in, if I press on "Tapas", only the tapas images appear, If I press on "main" only the main images hide/appear.
Here is my HTML code:
var button = document.querySelector('.load-more-button');
var tapas = document.querySelectorAll('.show-tapas');
button.addEventListener("click", function(e) {
tapas.forEach(b => $(b).toggle());
})
.show-tapas {
display: none;
}
.show-tapas.showing {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="grid-portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Main Courses
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_main_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_main_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_main_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Dessert
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_dessert_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_dessert_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_dessert_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
</div>


Everything is perfect including the function you have created, the only problem is that you haven't wrap the main courses images and dessert images into a div show-tapas-2 and show-tapas-3 and giving their a tag class load-more-button-2 and load-more-button-3
Just like you did it with Tapas images and then you can used the function for each respective content
var button1 = document.querySelector('.load-more-button');
var tapas1 = document.querySelectorAll('.show-tapas');
button1.addEventListener("click", function(e) {
tapas1.forEach(b => $(b).toggle());
})
var button2 = document.querySelector('.load-more-button-2');
var tapas2 = document.querySelectorAll('.show-tapas-2');
button2.addEventListener("click", function(e) {
tapas2.forEach(b => $(b).toggle());
})
var button3 = document.querySelector('.load-more-button-3');
var tapas3 = document.querySelectorAll('.show-tapas-3');
button3.addEventListener("click", function(e) {
tapas3.forEach(b => $(b).toggle());
})
.show-tapas {
display: none;
}
.show-tapas.showing {
display: block;
}
.show-tapas-2 {
display: none;
}
.show-tapas-2.showing {
display: block;
}
.show-tapas-3 {
display: none;
}
.show-tapas-3.showing {
display: block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="grid-portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button-2">
Main Courses
</div>
</div>
</div>
<div class="row show-tapas-2">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button-3">
Dessert
</div>
</div>
</div>
<div class="row show-tapas-3">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>


Using some jquery to do that.
I have some rule in a tag. (attribute img-data-class)
and the row including your image should put your class name.
function toggleImage(elm){
var _this = $(elm);
var _class = _this.attr('img-data-class');
$('.' + _class).toggle();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="grid-portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
<a img-data-class="show-tapas" onclick="toggleImage(this)" href="#">Tapas</a>
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
<a img-data-class="show-main" onclick="toggleImage(this)" href="#">Main Courses</a>
</div>
</div>
</div>
<div class="row show-main">
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_main_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_main_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_main_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
<a img-data-class="show-dessert" onclick="toggleImage(this)" href="#">Dessert</a>
</div>
</div>
</div>
<div class="row show-dessert">
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_dessert_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_dessert_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_dessert_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>

Related

Manipulate the card class with css and Html

I'm beginner in frontend programming and I have the following code which describes the following picture:
<div class="row">
<div class="col-12">
<h1>Dashboard</h1>
<div class="separator mb-5"></div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="icon-cards-row">
<div class="glide dashboard-numbers">
</div>
</div>
<div class="row">
<div class="col-xl-40 col-lg-40 mb-4">
<div class="card h-200">
<div class="card-body">
<h5 class="card-title">Calendrier</h5>
<div class="calendar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-10 mb-4">
<div class="card">
<div class="position-absolute card-top-buttons">
<button class="btn btn-header-light icon-button">
<i class="simple-icon-refresh"></i>
</button>
</div>
<div class="card-body">
<h5 class="card-title">Contrats à renouveller</h5>
<div class="scroll dashboard-list-with-thumbs">
#foreach($contrats_expires as $contrat_expires)
<div class="d-flex flex-row mb-3">
<a class="d-block position-relative" href="#">
<img src="{{ '/castingimages/' . $contrat_expires->photo. ''}}" alt="Marble Cake"
class="list-thumbnail border-0" />
<span
class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span>
</a>
<div class="pl-3 pt-2 pr-2 pb-2">
<a href="#">
<p class="list-item-heading">{{$contrat_expires->nom}} {{$contrat_expires->prenom}}</p>
<div class="pr-4 d-none d-sm-block">
<p class="text-muted mb-1 text-small">{{$contrat_expires->numero_projet}} {{$contrat_expires->numero_contrat}} </p>
</div>
<div class="text-primary text-small font-weight-medium d-none d-sm-block">
{{$contrat_expires->date_fin_contrat}}</div>
</a>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
you will find attached a screenshot of my page.
My page
I wanted to enlarge the calendar card and shift the second card to the right.
I'm stuck, please help.

How to sort HTML elements alphabetically with vanilla JavaScript?

I have these animal cards in a container div, and i want to sort them alphabetically. I only want to use vanilla javascript, no jquery please.
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>

Here's what I came up with. I selected all tags with the class "animal-name". Then stored their textContent in an Array, sorted it then replaced it in the original tags
let animals = document.querySelectorAll('.animal-name');
let animalNames = [];
for(let i=0; i<animals.length; i++){
animalNames.push(animals[i].textContent)
}
animalNames = animalNames.sort();
for(let i=0; i<animals.length; i++){
animals[i].textContent = animalNames[i];
}
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>

The idea is to sort the DOM elements, and then append them in that order again inside the container element: this will actually move these elements in their right order:
const container = document.querySelector(".animal-container");
const key = (a) => a.querySelector(".animal-name").textContent.trim();
Array.from(container.children)
.sort((a, b) => key(a).localeCompare(key(b)))
.forEach(child => container.appendChild(child));
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>
</div>

You can do this by appending the elements to the DOM dynamically using JS.
For example,
const arr = ["Giraffe", "Camel", "Dog", "Lion"].sort()
arr.forEach((word) => {
document.getElementById("animal-container").appendChild(
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">{word}</div>
</div>
)})

col-md-4 property in bootstrap 4 not working in my ejs file

<div class="container">
<div class="row card-deck">
<% for(var i=0;i<campgrounds.length;i++){ %>
<div class="card col-12 col-md-4">
<img class="card-image-top" src="<%= campgrounds[i].image %>" style=width:100%;height:350px;>
<div class="card-body">
<h3 class="card-title"><%= campgrounds[i].name %></h3>
</div>
</div>
<% }%>
</div>
</div>
Here "campgrounds" is a dictionary array with 2 properties("name" and image source). Now this array has 6 items and my col-md-4 should give 3 items in a row in resolutions of medium and above. But, this is not working and there are 12 items in a single row when in large/medium resolutions. Why?

.card in Bootstrap has its own flex properties which override .col-*
You need to add .card as a child div of .col-md-4 and you will see the results.
.col-md-4{ margin: 20px auto; } /* Or use my-* classes */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row card-deck">
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
</div>
</div>

Hidden section is not listed in live search?

I m just hided the section 3 which contains #sec3 id. I m trying to do that whenever i going to live search if searchable content is in section 3 it will be shown or visible. Please anybody suggest me or help me to make that content visible. I m just posted only the #sec2 and #sec3 css not the hold css because it crosses the writing limit. So please help me. Thanks in Advance....
here is the html
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-brand" onclick="w3_open()"><i class="fas fa-bars"></i></div>
<div class="nav navbar-nav navbar-right">
<input type="text" class="live-search-box" placeholder="Search...">
</div>
<div class="w3-overlay w3-animate-opacity" onclick="w3_close()" style="cursor:pointer; display:none" id="myOverlay"></div>
<center>
<div>
<img src="logo/mask.png">
<h1>My Website</h1>
</div>
</center>
</div>
</nav>
<div class="w3-sidebar w3-bar-block w3-border-right w3-animate-left" style="display:none;" id="mySidebar">
<button onclick="w3_close()" class="w3-bar-item w3-large">Close ×</button>
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
</div>
<div class="w3-overlay w3-animate-opacity" onclick="w3_close()" style="cursor:pointer; display:none" id="myOverlay"></div>
<!-- Page Content -->
<section id="sec2">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="John Doe" style="width:100%">
<h4>John Doe</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Steve John" style="width:100%">
<h4>Steve John</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="John Cenna" style="width:100%">
<h4>John Cenna</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Mark William" style="width:100%">
<h4>Mark William</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="William Wordssmith" style="width:100%">
<h4>William Wordssmith</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Jason Wathson" style="width:100%">
<h4>Jason Wathson</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Jimmy Coogan" style="width:100%">
<h4>Jimmy Coogan</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Mark Zuckerberg" style="width:100%">
<h4>Mark Zuckerberg</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="sec3">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Hrithik Roshan" style="width:100%">
<h4>Hrithik Roshan</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Salman Khan" style="width:100%">
<h4>Salman Khan</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Shahid Kapoor" style="width:100%">
<h4>Shahid Kapoor</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Dibendu Mondal" style="width:100%">
<h4>Dibendu Mondal</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Sudip Barik" style="width:100%">
<h4>Sudip Barik</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Masum Abdulla" style="width:100%">
<h4>Masum Abdulla</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Debabrata Maji" style="width:100%">
<h4>Debabrata Maji</h4>
</div>
</div>
</div>
</div>
</div>
</section>
Css
#sec2{
position: relative;
width: 100%;
top: 80px;
display: block;
}
#sec3{
position: relative;
width: 100%;
top: 80px;
display: none;
}
Jquery
jQuery(document).ready(function($) {
$('.live-search-box').on('keyup', function() {
var searchTerm = $(this).val().toLowerCase();
$('.myImg').each(function(idx, item) {
var alt = $(item).attr("alt").toLowerCase();
if (alt.indexOf(searchTerm) >= 0 ||searchTerm.length < 1) {
$(item).parent().parent().show();
} else {
$(item).parent().parent().hide();
}
});
});
});

Try this on your js:
jQuery(document).ready(function($) {
$('.live-search-box').on('keyup', function() {
var searchTerm = $(this).val().toLowerCase();
$('.myImg').each(function(idx, item) {
var alt = $(item).attr("alt").toLowerCase();
if (alt.indexOf(searchTerm) >= 0 ||searchTerm.length < 1) {
$(item).parentsUntil('#sec3').parent().find('#sec3').hide();
$(item).parent().parent().show();
} else {
$(item).parentsUntil('#sec3').parent().find('#sec3').show();
$(item).parent().parent().hide();
}
});
});
});

Sliding Material Design Card View

I am writing a web ap which looks like this:
Instead of stacking a bunch of cards like in the image above, I want to try and have a slider that when swiped the next card is displayed.
My html looks like this:
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Starter Template - Materialize</title>
</head>
<body style="">
<div class="navbar-fixed ">
<nav class="orange " role="navigation">
<div id="replaceBar" class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Statistics</a>
<ul class="right hide-on-med-and-down left">
<li>Statistics</li>
</ul>
<ul style="left: -250px;" id="nav-mobile" class="side-nav left">
<li>Statistics</li>
</ul>
<img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30">
<ul id="search" class="right valign-wrapper">
<li class="valign">
<img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30">
</li>
</ul>
</div>
</nav>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="beerCount" class="center-align orange-text text-darken-2">410</h3>
<p class="center-align">Beers Tasted</p>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryCount" class="center-align orange-text text-darken-2">161</h3>
<p class="center-align">Breweries Tried</p>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryVisit" class="center-align orange-text text-darken-2">16</h3>
<p class="center-align">Breweries Visited</p>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Structure -->
<div style="z-index: 1003; display: none; opacity: 0; transform: scaleX(0.7); top: 0px;" id="modal1" class="modal">
<div class="modal-content center">
<div>
<span class="card-title">99 bottles of beer on the wall...</span>
</div>
<div id="load" class="preloader-wrapper big active ">
<div class="spinner-layer spinner-yellow-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<div style="left: 0px;" class="drag-target"></div><div class="hiddendiv common"></div></body></html>
I tried adding them to an image slider that is offered with materializecss which is what I am using to build my web app but it didnt work.
Anyway to slide them with html5 and css?
Here is a fiddle:
https://jsfiddle.net/mjbbc48h/

You can simply replace the image content in the materializecss slider with your card element. Like so:
<div class="slider">
<ul class="slides">
<li>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryVisit" class="center-align orange-text text-darken-2">16</h3>
<p class="center-align">Breweries Visited</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="beerCount" class="center-align orange-text text-darken-2">410</h3>
<p class="center-align">Beers Tasted</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
This should give you what you are looking for. Remember to initialize the slider.

Categories