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.
Related
I'm using a Bootstrap v5.2 accordion in my website. Accordion includes bootstrap cards inside of it. Eveything works fine but when I refresh the page, first accordion item is automatically getting actived and opening itself. How can I prevent this issue ? For example, before refreshing the page, I leave the second accordion item open and after the page is refreshed, the second item is closed, and the first item opens by itself, although it was closed before the page was refreshed.
my accordion code :
<div class="accordion-item">
<h2 class="accordion-header" id="üretim_kategorisi_header">
<button class="accordion-button d-block text-center" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse_üretim" aria-expanded="true" aria-controls="collapse_üretim">
<h2 class="text-black">Üretim hakkındaki projeler</h2>
</button>
</h2>
<div id="collapse_üretim" class="accordion-collapse collapse show"
aria-labelledby="üretim_kategorisi_header" data-bs-parent="#proje_kategori_kutusu">
<div class="accordion-body">
<div class="container">
<div class="row">
{{#each projeler as |proje|}}
{{#ifeq proje.proje_kategorisi 'Üretim' }}
<div class="col-md-4 mb-3">
<a data-bs-toggle="modal" data-bs-target="#reg-modal{{proje.id}}"
style="text-decoration:none;" href="#">
<div class="card">
<img class="card-img-top p-2 img-fluid" alt="100%x280"
src="../images/randomForLibrary/{{proje.proje_resmi_url}}">
<div class="card-body">
<h4 class="card-title text-center display-5">
{{ proje.proje_ismi}}
</h4>
<p class="card-text fs-6">
{{proje.proje_aciklamasi}}
</p>
<p class="project_category text-end">
{{proje.proje_kategorisi}}
</p>
</div>
</div>
</a>
</div>
{{/ifeq}}
{{/each}}
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="arge_kategorisi_header">
<button class="accordion-button collapsed d-block text-center" type="button"
data-bs-toggle="collapse" data-bs-target="#collapse_arge" aria-expanded="false"
aria-controls="collapse_arge">
<h2 class="text-black">ARGE hakkındaki projeler</h2>
</button>
</h2>
<div id="collapse_arge" class="accordion-collapse collapse" aria-labelledby="arge_kategorisi_header"
data-bs-parent="#proje_kategori_kutusu">
<div class="accordion-body">
<div class="container">
<div class="row">
{{#each projeler as |proje|}}
{{#ifeq proje.proje_kategorisi 'ARGE' }}
<div class="col-md-4 mb-3">
<a data-bs-toggle="modal" data-bs-target="#reg-modal{{proje.id}}"
style="text-decoration:none;" href="#">
<div class="card">
<img class="card-img-top p-2 img-fluid" alt="100%x280"
src="../images/randomForLibrary/{{proje.proje_resmi_url}}">
<div class="card-body">
<h4 class="card-title text-center display-5">
{{ proje.proje_ismi}}
</h4>
<p class="card-text fs-6">
{{proje.proje_aciklamasi}}
</p>
<p class="project_category text-end">
{{proje.proje_kategorisi}}
</p>
</div>
</div>
</a>
</div>
{{/ifeq}}
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
Remove show from the classes of #collapse_üretim.
Need to find id from multiple div what found by .parentsUntil() method (for a future draw and send ajax)
This is possible to use .parentsUntil for this.
Have script like this
$(document).on('change', ':checkbox', (function(e) {
var prod = $(this).closest("#product");
var productUntilContainer = prod.parentsUntil('.container-fluid');
console.log(productUntilContainer);
/*
if ($(this).is(":checked")) {
prod.remove()
} else {
prod.remove()
}*/
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="container-fluid" id="product-list-container">
<div id="progress" class="in-progress">In progress
<div id="18-11-20" class="datess">18-11-20
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
<div class="e-co-product no-gutter row">
<a class="product-image" align="center" href="">
<img class="img-fluid" src="
http://localhost/blog/public/product_img/7.jpg
" data-toggle="modal" data-target="#modalGallery" alt="">
</a>
<div class="product-info col no-gutter ">
<a href="" class=" align-self-center">
<h6 align="center">Product №7 en</h6>
</a>
<div class="coninfo row justify-content-between no-gutter">
<div class="params">
пар #4 en : 3043
<br> пар #3 en : 9740
<br> пар #3 en : 8907
<br>
</div>
<div class="price text-right">
<p class="product-price"><span class="ml-2"><del>$1172.00</del></span>
</p>
<p class="product-price">$2211.00</p>
<p class="manufacturer">Manufacturer #1</p>
</div>
<!--end price-->
</div>
<!--end coninfo-->
<div class="btn-shop row justify-content-between no-gutter">
<div class="shopsicons ">
<img src="http://localhost/blog/public/shops/3.png " alt="" class="shop-img">
</div>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="112">
<label class="custom-control-label" for="112"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
</div>
<!--product-->
</div>
<!--site div-->
</div>
<div id="19-11-20" class="datess">19-11-20
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
<div class="e-co-product no-gutter row">
<a class="product-image" align="center" href="">
<img class="img-fluid" src="
http://localhost/blog/public/product_img/9.jpg
" data-toggle="modal" data-target="#modalGallery" alt="">
</a>
<div class="product-info col no-gutter ">
<a href="" class=" align-self-center">
<h6 align="center">Product №9 en</h6>
</a>
<div class="coninfo row justify-content-between no-gutter">
<div class="params">
пар #3 en : 2853
<br> пар #1 e : 6405
<br> пар #3 en : 2564
<br> пар #1 e : 8738
<br>
</div>
<div class="price text-right">
<p class="product-price"><span class="ml-2"><del>$1660.00</del></span>
</p>
<p class="product-price">$2653.00</p>
<p class="manufacturer">Manufacture #5</p>
</div>
<!--end price-->
</div>
<!--end coninfo-->
<div class="btn-shop row justify-content-between no-gutter">
<div class="shopsicons ">
<img src="http://localhost/blog/public/shops/3.png " alt="" class="shop-img">
</div>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="114">
<label class="custom-control-label" for="114"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
</div>
<!--product-->
</div>
<!--site div-->
</div>
</div>
<div id="complete" class="complete">Complete
<div id="18-11-20" class="datess">18-11-20
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
<div class="e-co-product no-gutter row">
<a class="product-image" align="center" href="">
<img class="img-fluid" src="
http://localhost/blog/public/product_img/9.jpg
" data-toggle="modal" data-target="#modalGallery" alt="">
</a>
<div class="product-info col no-gutter ">
<a href="" class=" align-self-center">
<h6 align="center">Product №9 en</h6>
</a>
<div class="coninfo row justify-content-between no-gutter">
<div class="params">
пар #3 en : 2853
<br> пар #1 e : 6405
<br> пар #3 en : 2564
<br> пар #1 e : 8738
<br>
</div>
<div class="price text-right">
<p class="product-price"><span class="ml-2"><del>$1660.00</del></span>
</p>
<p class="product-price">$2653.00</p>
<p class="manufacturer">Manufacture #5</p>
</div>
<!--end price-->
</div>
<!--end coninfo-->
<div class="btn-shop row justify-content-between no-gutter">
<div class="shopsicons ">
<img src="http://localhost/blog/public/shops/3.png " alt="" class="shop-img">
</div>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="111" checked="">
<label class="custom-control-label" for="111"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
</div>
<!--product-->
</div>
<!--site div-->
</div>
<div id="19-11-20" class="datess">19-11-20
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
<div class="e-co-product no-gutter row">
<a class="product-image" align="center" href="">
<img class="img-fluid" src="
http://localhost/blog/public/product_img/no_img.jpg
" data-toggle="modal" data-target="#modalGallery" alt="">
</a>
<div class="product-info col no-gutter ">
<a href="" class=" align-self-center">
<h6 align="center">Pr223 №2 en</h6>
</a>
<div class="coninfo row justify-content-between no-gutter">
<div class="params">
пар #1 e : Beetle
<br>
</div>
<div class="price text-right">
<p class="product-price"><span class="ml-2"><del>$421.00</del></span>
</p>
<p class="product-price">$115.00</p>
<p class="manufacturer">Manufacturer #3</p>
</div>
<!--end price-->
</div>
<!--end coninfo-->
<div class="btn-shop row justify-content-between no-gutter">
<div class="shopsicons ">
<img src="http://localhost/blog/public/shops/3.png " alt="" class="shop-img">
</div>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="113" checked="">
<label class="custom-control-label" for="113"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
</div>
<!--product-->
</div>
<!--site div-->
</div>
</div>
</div>
It's not exactly easy to tell what it is you want to happen, or what problem you're having, but if you want to get a list of ids from your .productsUntil list, take this as an example:
$('button').on('click', function() {
console.log('hello world');
var prod = $(this).closest("#product");
var productUntilContainer = prod.parentsUntil('.container');
console.log(productUntilContainer.length);
const ids = [];
productUntilContainer.each(function() {
ids.push($(this).attr('id'));
});
console.log(ids);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div id="one">
<div id="two">
<div id="three">
<div id="product">
<button>click</button>
</div>
</div>
</div>
</div>
</div>
I'm using JavaScript to change the price value of the div based on the selected div, the price is already defined in the div, if I click on any div it should updated the value in the another div as well. so far I have try below code but it doesn't work, it changes the value of only first div. if I click on another div it repeats the same price value.
Here's the code I have tried so far!
let pricebox = document.getElementById('pricingdata');
const totalprice = document.querySelector("#totalprice");
pricebox.addEventListener('click', function(e) {
let mainprice = document.getElementById("pricecad").innerHTML;
console.log(mainprice);
totalprice.innerHTML = '$' + mainprice;
});
<div class="row text-center pricing-box" id="pricingdata">
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
</div>
This code should work. Click Run code snippet and check the result.
const totalprice = document.querySelector("#totalprice");
const priceboxes = document.querySelectorAll('.pricing-box-cad');
for (var i = 0; i < priceboxes.length; i++) {
priceboxes[i].onclick = (e) => {
const mainprice = e.currentTarget.querySelector('.pricecad').innerText;
totalprice.innerText = '$' + mainprice;
}
}
<div class="row text-center pricing-box">
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
</div>
remove all id="pricecad" as polyglot wrote, ids must be unique
you are looking for event delegation, replace your code by:
const pricebox = document.getElementById('pricingdata')
, totalprice = document.querySelector("#totalprice")
;
pricebox.addEventListener('click', function (e)
{
if (!e.target.matches('span.display-5')) return // ignore clicks else where
totalprice.textContent = '$' + e.target.textContent;
});
for click on every .pricing-box-cad' elements do
const pricebox = document.getElementById('pricingdata')
, totalprice = document.querySelector("#totalprice")
;
pricebox.addEventListener('click', function (e)
{
let pricingBox = e.target
while (!pricingBox.matches('div.pricing-box-cad'))
{
if (!pricingBox.parentElement) break
pricingBox = pricingBox.parentElement
}
if (!pricingBox.matches('div.pricing-box-cad')) return // ignore clicks else where
totalprice.textContent = '$' + pricingBox.querySelector('span.display-5').textContent
});
Again using bubbling/delgation, this method uses closest to find the ".pricing-box-cad" ancestor of the element clicked then gets the element with the price. Note the duplicate IDs have been moved to class.
Also note if you need to support IE (for a start I'm sorry about that!) you will need to use a pollyfill (mentioned in the link above).
let pricingData = document.getElementById("pricingdata");
const totalprice = document.querySelector("#totalprice");
//Set even listener on parent box
pricingData.addEventListener("click", function(e) {
//Find closest pricing box ancestor
let priceBox = e.target.closest(".pricing-box-cad")
if(priceBox) {
let price = priceBox.querySelector(".pricecad").innerText;
//console.log(price)
totalprice.textContent = "$" + price;
}
//Alert if clicked outside a pricing box
else {alert("clicked outside area") }
});
<div class="row text-center pricing-box" id="pricingdata">
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">31</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
</div>
Now just for fun, I wanted to see how much I could do in CSS alone with minimal JS. So I came up with the below. This is for demonstration purposes only and is really just to show what you can achieve with minimal JS.
let pricingData = document.getElementById("pricingdata");
const totalprice = document.querySelector("#totalprice");
//Set even listener on parent box
pricingData.addEventListener("click", function(e) {
//Get value from radio button
let value = this.querySelector("[name=price]:checked").value;
//UPdate Attribute on price CSS will take care of the rest
totalprice.dataset.total = "$" + value;
});
#pricingdata label {
display:block;
}
#pricingdata :checked + label {
background-color:#CCC;
}
#pricingdata input[type=radio] {
display:none;
}
#totalprice:before {
content : attr(data-total)
}
<div class="row text-center pricing-box" id="pricingdata">
<input type="radio" value="30" id="rdoPrice1" name="price">
<label for="rdoPrice1" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="31" id="rdoPrice2" name="price">
<label for="rdoPrice2" class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">31</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="30" id="rdoPrice3" name="price">
<label for="rdoPrice3" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="30" id="rdoPrice4" name="price">
<label for="rdoPrice4" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="69" id="rdoPrice5" name="price" checked>
<label for="rdoPrice5" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice" data-total="$69"></strong></div>
</div>
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 -->
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.