Here in the above piece of code I succeeded in getting the o/p with table pagination but i'm not getting it for grid pagination.Where It should have only 3 columns and 1 row per a page... I'm not getting the logic please help me... How to do pagination for bootstrap grid? Therefore I deleted table tags and rows and tried to do it by bootstrap grid but i didnt get expected o/p
$(document).ready(function() {
$('#t1').after('<div id="nav" class="text-center"></div>');
var rowsShown = 3;
var rowsTotal = $('#t1 row').length;
var numPages = rowsTotal / rowsShown;
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append(' ' + pageNum + ' ');
}
$('#t1 row').hide();
$('#t1 row').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function() {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#t1 row').css('opacity', '0.0').hide().slice(startItem, endItem).
css('display', 'table-row').animate({
opacity: 1
}, 300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div classs="t1">
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="card" style="width: 18rem;">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
I small changed into you existing JS code so its working as you want so you can check blow snippet.
Changed css('display', 'table-row') to css('display', 'flex').
Added e in $('#nav a').bind('click', function(e) method and this line also e.preventDefault(); for prevent the hash(#) show in url.
Note: Please check on FULL Page
$(document).ready(function() {
$('.t1').after('<div id="nav" class="text-center"></div>');
var rowsShown = 3;
var rowsTotal = $('.t1 .row').length;
var numPages = rowsTotal / rowsShown;
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append(' ' + pageNum + ' ');
}
$('.t1 .row').hide();
$('.t1 .row').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function(e) {
e.preventDefault();
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('.t1 .row').css('opacity', '0').hide().slice(startItem, endItem).
css('display', 'flex').animate({
opacity: 1
}, 300);
});
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="container my-2 t1">
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
Related
i am making a website with bootstrap css html and js and i do not know how to make it so that the cards of products move sideways without having to use the scrollbar and just by clicking and dragging
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<h1 class="mt-5">Bootstrap 4 Horizontal Scrolling</h1>
<p class="subtitle">Horizontal scrolling without CSS. Just copy scrolling wrapper classes</p>
<div class="scrolling-wrapper row flex-row flex-nowrap mt-4 pb-4 pt-2">
<div class="col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
</div>
</div>
i do not mind if it is js bootstrap or anything btw im new to coding
It is made of bootstrap 4 and some custom style to look more attractive and a JavaScript which contains a mouse events
Click and Drag Carousel with cards
const slider = document.querySelector('.items');
let isDown = false;
let startX;
let scrollLeft;
slider.addEventListener('mousedown', (e) => {
isDown = true;
slider.classList.add('active');
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
if (!isDown) return; // stop the fn from running
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 3;
slider.scrollLeft = scrollLeft - walk;
});
.items{
overflow: hidden;
user-select: none;
cursor: pointer;
transition: all 0.2s;
transform: scale(0.98);
will-change: transform;
position: relative;
}
.items.active {
cursor: grabbing;
cursor: -webkit-grabbing;
transform: scale(1);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<h1 class="mt-5">Bootstrap 4 Horizontal Scrolling</h1>
<p class="subtitle">Horizontal scrolling without CSS. Just copy scrolling wrapper classes</p>
<div class="items scrolling-wrapper row flex-row flex-nowrap mt-4 pb-4 pt-2">
<div class="item col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="item col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="item col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="item col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I hope I got your point and answered correctly. If not please mention in comment
I can't get the code right for my page.
I have 6 rows with 3 columns each, filled with images. When I click "load more" button it doesn't do anything. I tried to change jquery code .slice(0, 3) to (0, 6) etc, but nothing. I need to show only 2 or 3 rows, then when I click load more button, show another 2 or 3 more rows
$(document).ready(function() {
$(".row").slice(0, 3).show();
$("#loadMore").on("click", function(e) {
e.preventDefault();
$(".row:hidden").slice(0, 3).slideDown();
if ($(".row:hidden").length == 0) {
$("#loadMore").text("No Content").addClass("noContent");
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 col-lg-4">
<!-- Card -->
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModalo">
<!-- Card image -->
<img class="card-img-top" height="350" src="images/lule_1.jpg" alt="Card imgage lule">
<!-- Card content -->
<div class="card-body">
<h5 class="my-3">Phone Bag</h5>
<p class="card-text text-uppercase mb-3">Bag,Box</p>
</div>
</a>
<!-- Card -->
<!-- Card -->
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">
<!-- Card image -->
<img class="card-img-top" src="images/lule_4.jpg" alt="Card image lule">
<!-- Card content -->
<div class="card-body">
<h5 class="my-3">Paper Bag</h5>
<p class="card-text text-uppercase mb-3">Bag</p>
</div>
</a>
<!-- Card -->
Load More
</div>
<!-- Grid column -->
You could do this in two way ,
first - initially hide all rows then show first 3
$(document).ready(function(){
$(".row").hide(); //add this line
$(".row").slice(0, 3).show();
$("#loadMore").on("click", function(e){
e.preventDefault();
$(".row:hidden").slice(0, 3).slideDown();
if($(".row:hidden").length == 0) {
$("#loadMore").text("No Content").addClass("noContent");
}
});
})
second - hide last three first
$(document).ready(function(){
$(".row").slice(3, 6).hide();//change this line
$("#loadMore").on("click", function(e){
e.preventDefault();
$(".row:hidden").slice(0, 3).slideDown();
if($(".row:hidden").length == 0) {
$("#loadMore").text("No Content").addClass("noContent");
}
});
})
I don't know jQuery but I wrote it in standard JavaScript, hope it helps!
document.querySelector('#loadMore').addEventListener('click', (button) =>{
//Set number of rows to show
const numRowsToShow = 2
for (let i = 0; i < numRowsToShow; i++) {
//Get the next row non visible (.d-none)
let rowToShow = document.querySelector('.row.d-none')
//If nothing's found change the text of the link and exit the loop
if(!rowToShow){
button.target.text = 'No Content'
button.classList.add('noContent')
break;
}
//show the row
rowToShow.classList.remove('d-none')
}
})
Does it help?
$(document).ready(function() {
var rows = $(".row").toArray();
$(".row").hide();
$(rows.splice(0, 1)).show();
$(document).on("click", "#loadMore", function(e) {
e.preventDefault();
if (!rows.length) {
$("#loadMore").text("No Content").addClass("noContent");
} else {
$(this).remove();
$(rows.splice(0, 1)).slideDown();
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 col-lg-4">
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModalo">
<img class="card-img-top" height="350" src="images/lule_1.jpg" alt="Card imgage lule">
<div class="card-body">
<h5 class="my-3">Phone Bag</h5>
<p class="card-text text-uppercase mb-3">Bag,Box</p>
</div>
</a>
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">
<img class="card-img-top" src="images/lule_4.jpg" alt="Card image lule">
<div class="card-body">
<h5 class="my-3">Paper Bag</h5>
<p class="card-text text-uppercase mb-3">Bag</p>
</div>
</a>
Load More
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModalo">
<img class="card-img-top" height="350" src="images/lule_1.jpg" alt="Card imgage lule">
<div class="card-body">
<h5 class="my-3">Phone Bag</h5>
<p class="card-text text-uppercase mb-3">Bag,Box</p>
</div>
</a>
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">
<img class="card-img-top" src="images/lule_4.jpg" alt="Card image lule">
<div class="card-body">
<h5 class="my-3">Paper Bag</h5>
<p class="card-text text-uppercase mb-3">Bag</p>
</div>
</a>
Load More
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModalo">
<img class="card-img-top" height="350" src="images/lule_1.jpg" alt="Card imgage lule">
<div class="card-body">
<h5 class="my-3">Phone Bag</h5>
<p class="card-text text-uppercase mb-3">Bag,Box</p>
</div>
</a>
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">
<img class="card-img-top" src="images/lule_4.jpg" alt="Card image lule">
<div class="card-body">
<h5 class="my-3">Paper Bag</h5>
<p class="card-text text-uppercase mb-3">Bag</p>
</div>
</a>
Load More
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModalo">
<img class="card-img-top" height="350" src="images/lule_1.jpg" alt="Card imgage lule">
<div class="card-body">
<h5 class="my-3">Phone Bag</h5>
<p class="card-text text-uppercase mb-3">Bag,Box</p>
</div>
</a>
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">
<img class="card-img-top" src="images/lule_4.jpg" alt="Card image lule">
<div class="card-body">
<h5 class="my-3">Paper Bag</h5>
<p class="card-text text-uppercase mb-3">Bag</p>
</div>
</a>
Load More
</div>
</div>
I'm creating a webpage that displays cards that you can filter by title but the cards are not responding. Here's the codepen
https://codepen.io/dnorton94/pen/PoYqQvx?editors=0010
<div class="container">
<div class="row">
<div class="col-sm-12 mb-3">
<input type="text" id="myFilter" class="form-control" onkeyup="myFunction()" placeholder="Search for names..">
</div>
</div>
<div class="row" id="myItems">
<div class="col-sm-3">
<div class="card">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<div class="card-block">
<h5 class="card-title">Card One</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some text.</p>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<div class="card-block">
<h5 class="card-title">Card Two</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some text.</p>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<div class="card-block">
<h5 class="card-title">Card Three</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some text.</p>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<div class="card-block">
<h5 class="card-title">Card Four</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some text.</p>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<div class="card-block">
<h5 class="card-title">Card Five</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some text.</p>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<div class="card-block">
<h5 class="card-title">Card Six</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some text.</p>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<div class="card-block">
<h5 class="card-title">Card Seven</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some text.</p>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<div class="card-block">
<h5 class="card-title">Card Eight</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some text.</p>
</div>
</div>
</div>
</div>
</div>
function myFunction() {
var input, filter, cards, cardContainer, h5, title, i;
input = document.getElementById("myFilter");
filter = input.value.toUpperCase();
cardContainer = document.getElementById("myItems");
cards = cardContainer.getElementsByClassName("card");
for (i = 0; i < cards.length; i++) {
title = cards[i].querySelector(".card-block h5.card-title");
if (title.innerText.toUpperCase().indexOf(filter) > -1) {
cards[i].style.display = "";
} else {
cards[i].style.display = "none";
}
}
}
I expect to be able to filter cards by title and only see the one that is typed in the search box. It's a straight forward problem and highly likely a really simple solution
I am trying to add a script for the search filter and having an error in implementing it. Please let me know where I am wrong
I have added the search bar using the code
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
and after that I added the script inside the body tag
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable h4").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header class="my-4">
<h1 class="display-3">Welcome to Open Academy</h1>
</header>
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
<div class="row text-center" id="myTable">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
</div>
<!-- /.row -->
You need to show something higher than what you are currently finding.
You cannot hide the cards and then try to show the H4 inside the card.
Access $("#myTable .card") instead
Also you abuse a side effect of filter - Either filter on content or toggle on content
If the wrapping div is not hidden, you will get a scattering. So now I toggle the hidden wrapper instead
$(document).ready(function() {
$("#myInput").on("input", function() {
var value = $(this).val().toLowerCase();
$("#myTable .card").each(function() {
$(this).parent().toggle(
$.trim(value)!="" && $(this).text().toLowerCase().indexOf(value) > -1
)
});
});
});
#myTable>div { display:none; float:left; border:1px solid grey; margin:5px; padding:5px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header class="my-4">
<h1 class="display-3">Welcome to Open Academy</h1>
</header>
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
<div class="row text-center" id="myTable">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
</div>
<!-- /.row -->
You are toggling the h4 instead of the .card that contains it.
You also do not need to toggle while filtering. Filter the ones you want and show them in one go. If you want to go one-by-one then use the .each instead of the .filter
$(document).ready(function() {
$("#myInput").on("input", function() {
var value = $(this).val().toLowerCase();
var allCards = $('#myTable .card');
allCards
.hide() // hide all cards
.filter(function() { // filter the cards that match
var h4text = $(this).find('h4').text().toLowerCase();
return h4text.indexOf(value) > -1;
}).show() // show the filtered cards
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header class="my-4">
<h1 class="display-3">Welcome to Open Academy</h1>
</header>
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
<div class="row text-center" id="myTable">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
</div>
<!-- /.row -->
How to create my image zoom a little bit when I'm using a Bootstrap 4 components called cards. I got an inspiration at http://www.themezaa.com/html/leadgen/demo/seo-marketing/index.html. The following codes I used below.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="card" >
<img class="card-img-top" src="http://www.successmoves.co.uk/wp-content/uploads/2012/07/50708_1280x720-318x180.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card" >
<img class="card-img-top" src="http://mapleleafadventures.com/wp-content/uploads/2015/11/mv-swell-jeffreynolds-318x180.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card" >
<img class="card-img-top" src="http://www.smart-magazine.com/content/uploads/2016/09/Zaraeeb-el-seed-318x180.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card" >
<img class="card-img-top" src="http://www.professionalyachtingservices.com/wp-content/uploads/2016/06/IMG_0271rr-318x180.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
You can wrap them in a new element, set overflow: hidden on that element and use scale() on the image when you hover over the parent element. And I also applied a semi-opaque overlay like the site you referenced.
.card-img-wrap {
overflow: hidden;
position: relative;
}
.card-img-wrap:after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255,255,255,0.3);
opacity: 0;
transition: opacity .25s;
}
.card-img-wrap img {
transition: transform .25s;
width: 100%;
}
.card-img-wrap:hover img {
transform: scale(1.2);
}
.card-img-wrap:hover:after {
opacity: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="card" >
<div class="card-img-wrap"><img class="card-img-top" src="http://www.successmoves.co.uk/wp-content/uploads/2012/07/50708_1280x720-318x180.jpg" alt="Card image cap"></div>
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card" >
<div class="card-img-wrap"><img class="card-img-top" src="http://mapleleafadventures.com/wp-content/uploads/2015/11/mv-swell-jeffreynolds-318x180.jpg" alt="Card image cap"></div>
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card" >
<div class="card-img-wrap"><img class="card-img-top" src="http://www.smart-magazine.com/content/uploads/2016/09/Zaraeeb-el-seed-318x180.jpg" alt="Card image cap"></div>
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card" >
<div class="card-img-wrap"><img class="card-img-top" src="http://www.professionalyachtingservices.com/wp-content/uploads/2016/06/IMG_0271rr-318x180.jpg" alt="Card image cap"></div>
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>