Buttons in slider not working using javascript - javascript

I am trying to make a slider for a list of products and I have placed a button on each side of the slider to slide the products. The problem I am facing is that it works fine when I press exactly at the buttons but when I press anywhere around it, it throws the error Uncaught TypeError: Cannot read property 'style' of null.
next = (target) => {
target.parentElement.parentElement.previousElementSibling.style.transform = 'translateX(-44vw)';
// next[0].style.display = 'none';
// previous[0].style.display = 'inline-block';
}
previous = (target) => {
target.parentElement.parentElement.previousElementSibling.style.transform = 'translateX(0vw)';
// previous[0].style.display = 'none';
// next[0].style.display = 'inline-block';
}
* {
font-family: "Segoe UI";
}
.shop {
background-color: rgb(255, 255, 255);
overflow: hidden;
position: relative;
margin: 10px;
margin-top: 0;
}
.product-display-area {
width: 81.5vw;
display: inline-block;
}
.shop_header {
margin: 10px;
margin-bottom: 0px;
position: relative;
padding: 10px;
border-bottom: 1px solid rgb(229, 229, 229);
background-color: rgb(255, 255, 255);
}
.shop_header h2 {
display: inline-block;
font-weight: 500;
margin-left: 30px;
}
.shop_header p {
margin-left: 30px;
}
.shop_header .clock {
display: inline-block;
margin-left: 30px;
}
.shop_header .clock img {
position: relative;
top: 6px;
width: 24px;
}
.shop_header .clock #time_remaining {
margin-left: 10px;
}
.shop_header button[type="button"] a {
text-decoration: none;
padding: 10px 15px;
display: inline-block;
font-size: 15px;
font-weight: 700;
background-color: rgb(40, 116, 240);
color: rgb(255, 255, 255);
}
.shop_header button[type="button"] {
border: none;
position: absolute;
right: 20px;
top: 0px;
}
.shop_items {
width: 130vw;
transition: 1s;
}
.shop_items .items {
display: inline-block;
padding: 25px;
}
.shop_items .items img {
display: block;
margin: auto;
}
.shop_items .items .item_info {
text-align: center;
margin: auto;
}
.shop_items .items .item_info p {
padding: 5px;
color: rgb(56, 142, 60);
font-size: 14px;
}
.shop_items .items .item_info p:first-of-type {
color: rgb(0, 0, 0);
font-weight: 500;
}
.shop_items .items .item_info p:last-of-type {
color: rgb(151, 151, 151);
}
.item_carousel_left_arrow {
position: absolute;
top: 35%;
padding: 50px 20px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid rgb(209, 211, 213);
background-color: rgb(255, 255, 255);
cursor: pointer;
}
.item_carousel_right_arrow {
right: 0;
position: absolute;
top: 35%;
padding: 50px 20px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border: 1px solid rgb(209, 211, 213);
background-color: rgb(255, 255, 255);
cursor: pointer;
}
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="product-display-area">
<div class="shop" id="best_of_electronics">
<div class="shop_header">
<h2>Best of Electronics</h2>
<p>Devices and Accessories</p>
<button type="button">VIEW ALL</button>
</div>
<div class="shop_items">
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k4vmxzk0/cases-covers/back-cover/y/y/g/spigen-f23cs25961-original-imafnzhgzuty3gb6.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Best Brands</p>
<p class="product_price">Shop Now</p>
<p class="product_company">For All Phone Models</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kdhphu80/sports-action-camera/j/f/k/4000-air-4k-full-hd-wifi-30m-waterproof-sports-action-camera-original-imafue3ghmhtk39f.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Sports & Action Camera</p>
<p class="product_price">From ₹4199</p>
<p class="product_company">GoPro, SJCAM, DJI & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kbqu4cw0/speaker/soundbar/9/s/0/mt160dsb-motorola-original-imaftf6csukur9he.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Dolby Enabled</p>
<p class="product_price">Up to 50% Off</p>
<p class="product_company">Home Theaters</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k6mibgw0/datacard/r/h/g/jiofi-jmr-541-original-imafpfhandhkptwc.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Data Cards</p>
<p class="product_price">Upto 60% off</p>
<p class="product_company">JioFi, Huawei & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/ja73ki80/webcam/pc-webcam/7/q/e/logitech-c310-original-imaeztzqny7jh7gh.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Webcams</p>
<p class="product_price">From ₹499</p>
<p class="product_company">Logitech, Quantum & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kb5eikw0/trimmer/z/d/n/0-5-10-mm-bt3101-15-stainless-steel-cordless-philips-original-imafsjquyq2hapug.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Trimmers & Hair Clippers</p>
<p class="product_price">From ₹700</p>
<p class="product_company">By Nova, Philips & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k51cpe80/hearing-aid/e/e/s/ha50-behind-ear-beurer-original-imafnth6bue82ngc.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Best of Hearing Aids</p>
<p class="product_price">From ₹499</p>
<p class="product_company">Beurer & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kex5ci80/printer/k/n/z/hp-laserjet-pro-m1136-mfp-original-imafvhnbe2dg4vem.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Top 10 Printers</p>
<p class="product_price">₹2399</p>
<p class="product_company">Print, Scan & copy</p>
</div>
</div>
</a>
</div>
<div>
<span class="item_carousel_left_arrow" id="arruw" onclick="previous(event.target)">
<i class="fas fa-arrow-left"></i>
</span>
<span class="item_carousel_right_arrow" id="arruw" onclick="next(event.target)">
<i class="fas fa-arrow-right"></i>
</span>
</div>
</div>
</div>


You need to delegate and test what you clicked since you have two elements you can click, the button and the <i>
Also you have duplicate IDs which is not allowed (had you used them)
Also DRY (don't repeat yourself)
const shopItems = document.querySelector("#best_of_electronics .shop_items")
document.getElementById("nav").addEventListener("click", function(e) {
let tgt = e.target;
let possibleParent = tgt.closest("span")
if (possibleParent) tgt = possibleParent; // we clicked the <i>
shopItems.style.transform = tgt.id==="prev" ? 'translateX(-44vw)' : 'translateX(0vw)';
})
* {
font-family: "Segoe UI";
}
.shop {
background-color: rgb(255, 255, 255);
overflow: hidden;
position: relative;
margin: 10px;
margin-top: 0;
}
.product-display-area {
width: 81.5vw;
display: inline-block;
}
.shop_header {
margin: 10px;
margin-bottom: 0px;
position: relative;
padding: 10px;
border-bottom: 1px solid rgb(229, 229, 229);
background-color: rgb(255, 255, 255);
}
.shop_header h2 {
display: inline-block;
font-weight: 500;
margin-left: 30px;
}
.shop_header p {
margin-left: 30px;
}
.shop_header .clock {
display: inline-block;
margin-left: 30px;
}
.shop_header .clock img {
position: relative;
top: 6px;
width: 24px;
}
.shop_header .clock #time_remaining {
margin-left: 10px;
}
.shop_header button[type="button"] a {
text-decoration: none;
padding: 10px 15px;
display: inline-block;
font-size: 15px;
font-weight: 700;
background-color: rgb(40, 116, 240);
color: rgb(255, 255, 255);
}
.shop_header button[type="button"] {
border: none;
position: absolute;
right: 20px;
top: 0px;
}
.shop_items {
width: 130vw;
transition: 1s;
}
.shop_items .items {
display: inline-block;
padding: 25px;
}
.shop_items .items img {
display: block;
margin: auto;
}
.shop_items .items .item_info {
text-align: center;
margin: auto;
}
.shop_items .items .item_info p {
padding: 5px;
color: rgb(56, 142, 60);
font-size: 14px;
}
.shop_items .items .item_info p:first-of-type {
color: rgb(0, 0, 0);
font-weight: 500;
}
.shop_items .items .item_info p:last-of-type {
color: rgb(151, 151, 151);
}
.item_carousel_left_arrow {
position: absolute;
top: 35%;
padding: 50px 20px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid rgb(209, 211, 213);
background-color: rgb(255, 255, 255);
cursor: pointer;
}
.item_carousel_right_arrow {
right: 0;
position: absolute;
top: 35%;
padding: 50px 20px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border: 1px solid rgb(209, 211, 213);
background-color: rgb(255, 255, 255);
cursor: pointer;
}
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="product-display-area">
<div class="shop" id="best_of_electronics">
<div class="shop_header">
<h2>Best of Electronics</h2>
<p>Devices and Accessories</p>
<button type="button">VIEW ALL</button>
</div>
<div class="shop_items">
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k4vmxzk0/cases-covers/back-cover/y/y/g/spigen-f23cs25961-original-imafnzhgzuty3gb6.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Best Brands</p>
<p class="product_price">Shop Now</p>
<p class="product_company">For All Phone Models</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kdhphu80/sports-action-camera/j/f/k/4000-air-4k-full-hd-wifi-30m-waterproof-sports-action-camera-original-imafue3ghmhtk39f.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Sports & Action Camera</p>
<p class="product_price">From ₹4199</p>
<p class="product_company">GoPro, SJCAM, DJI & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kbqu4cw0/speaker/soundbar/9/s/0/mt160dsb-motorola-original-imaftf6csukur9he.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Dolby Enabled</p>
<p class="product_price">Up to 50% Off</p>
<p class="product_company">Home Theaters</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k6mibgw0/datacard/r/h/g/jiofi-jmr-541-original-imafpfhandhkptwc.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Data Cards</p>
<p class="product_price">Upto 60% off</p>
<p class="product_company">JioFi, Huawei & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/ja73ki80/webcam/pc-webcam/7/q/e/logitech-c310-original-imaeztzqny7jh7gh.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Webcams</p>
<p class="product_price">From ₹499</p>
<p class="product_company">Logitech, Quantum & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kb5eikw0/trimmer/z/d/n/0-5-10-mm-bt3101-15-stainless-steel-cordless-philips-original-imafsjquyq2hapug.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Trimmers & Hair Clippers</p>
<p class="product_price">From ₹700</p>
<p class="product_company">By Nova, Philips & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k51cpe80/hearing-aid/e/e/s/ha50-behind-ear-beurer-original-imafnth6bue82ngc.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Best of Hearing Aids</p>
<p class="product_price">From ₹499</p>
<p class="product_company">Beurer & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kex5ci80/printer/k/n/z/hp-laserjet-pro-m1136-mfp-original-imafvhnbe2dg4vem.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Top 10 Printers</p>
<p class="product_price">₹2399</p>
<p class="product_company">Print, Scan & copy</p>
</div>
</div>
</a>
</div>
<div id="nav">
<span class="item_carousel_left_arrow arrow" id="prev">
<i class="fas fa-arrow-left"></i>
</span>
<span class="item_carousel_right_arrow arrow" id="next">
<i class="fas fa-arrow-right"></i>
</span>
</div>
</div>
</div>
If you must have inline handlers, you can pass (this) - it is the same as event.target and use the saved div
<span class="item_carousel_left_arrow" id="prev" onclick="nav(this)">
<i class="fas fa-arrow-left"></i>
</span>
<span class="item_carousel_right_arrow" id="next" onclick="nav(this)">
<i class="fas fa-arrow-right"></i>
</span>
using
const shopItems = document.querySelector("#best_of_electronics .shop_items")
function nav(span) {
shopItems.style.transform = span.id==="prev" ? 'translateX(-44vw)' : 'translateX(0vw)';
}


Simply change next and previous function to these:
let next = () => {
document.querySelector(".shop_items").style.transform = 'translateX(-44vw)';
}
let previous = () => {
document.querySelector(".shop_items").style.transform = 'translateX(0vw)';
}
Or even you can change the onclick parameter and use only one function for both next and previous as this:
let nextPrev = (value) => {
document.querySelector(".shop_items").style.transform = 'translateX(' + value + ')';
}
<div>
<span class="item_carousel_left_arrow" id="arruw" onclick="nextPrev('0vw')">
<i class="fas fa-arrow-left"></i>
</span>
<span class="item_carousel_right_arrow" id="arruw" onclick="nextPrev('-44vw')">
<i class="fas fa-arrow-right"></i>
</span>
</div>

Related

Unable to get prime-ng table pagination dropdown to hover over everything

I have been using mat-tab in conjunction with prime-ng table and have been trying really hard to make sure that pagination drop down number doesn't get clipped off as seen in the image below.
I have checked and made sure that the pagination dropdown has the highest z-index, but haven't gotten any success so far. Any help and suggestions would be appreciated.
.mat-tab-label.mat-tab-label-active {
background-color: #105b63;
color: #fff;
/* border: 1px solid lightgray; */
padding: 15px 25px;
border-radius: 5px 5px 5px 5px;
}
.mat-tab-group.mat-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary .mat-ink-bar {
background: #105b63;
height: 0px;
}
/* .mat-tab-body.mat-tab-body-active,
.mat-tab-body,
.mat-tab-body-content,
.mat-tab-body-wrapper {
overflow: inherit !important;
} */
.example-loading-shade {
position: absolute;
top: 0%;
left: 0%;
bottom: 0px;
right: 0%;
background: rgba(0, 0, 0, 0.15);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.mat-progress-spinner circle,
.mat-spinner circle {
stroke: #105b63;
}
.red-box-outlining {
display: inline-block;
padding: 10px 20px 20px;
border: 1px solid #bd4932;
border-radius: 5px;
margin: 15px 15px 20px 15px;
width: 228px;
}
.messages-service-logo {
width: 135px;
padding: 5%;
}
.listContainer {
padding: 20px;
}
:host ::ng-deep .p-dropdown-panel {
transform-origin: center bottom !important;
top: -119px !important;
left: 0 !important;
}
.pageOperationsBtns {
display: flex;
justify-content: end;
}
.pageOperationsBtns>.addVoiceMsgBtn {
border: 2px solid #105b63;
color: white;
background-color: #105b63;
font-weight: 500;
padding: 0.3rem 1rem;
margin: 8px 3px;
/* float: right; */
}
.pageOperationsBtns>.addTextMsGBtn {
border: 2px solid #105b63;
color: white;
background-color: #105b63;
font-weight: 500;
padding: 0.3rem 1rem;
margin: 8px 3px;
/* float: right; */
}
#media screen and (max-width: 500px) {
.pageOperationsBtns {
justify-content: center;
}
.pageOperationsBtns>.addVoiceMsgBtn,
.pageOperationsBtns>.addTextMsGBtn {
font-size: 0.85rem;
}
}
#media screen and (max-width: 40rem) {
.listContainer {
padding: 0;
}
}
<p-toast [baseZIndex]="10000"></p-toast>
<diV>
<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog>
</diV>
<div class="main" style="height: 100%;">
<div class="container-fluid">
<div>
<h2 style="color: #105B63;">
<!--<i class="fa fa-sliders"></i>-->
<img id="ManageMsgIcon" src="./../../../assets/Images/manage msg.png" alt="Manage Messages" style="width: 25px; vertical-align: initial;"> Manage Messages
</h2>
<div class="row">
<div class="col-sm-12">
<!-- <div style="text-align: center;">
<div class="page-operations-container">
<img id="VoiceMsgIcon" src="./../../../assets/Images/create voice.png" alt="Voice Message" class="messages-service-logo">
<br />
<a routerLink="" (click)="onCreateVoice()" [routerLinkActive]="['router-link-active']" class="btn btn-secondary" title="Create Voice Messages"><i class="fa fa-bullhorn"></i> Create Voice Message</a>
</div>
<div class="page-operations-container">
<img id="TextMsgIcon" src="./../../../assets/Images/create text.png" alt="Text Message"class="messages-service-logo">
<br />
<a routerLink="" (click)="onCreateMessage()" [routerLinkActive]="['router-link-active']" class="btn btn-secondary" title="Create Text Messages"><i class="fa fa-comment"></i> Create Text Message</a>
</div>
</div> -->
<div class="pageOperationsBtns ">
<button type="button" (click)="onCreateVoice()" class="btn btn-lg addVoiceMsgBtn" style="font-size: 14px;">
<i class="fa fa-bullhorn fa-lg" style="margin-right: 6px;"></i>Create Voice Message
</button>
<button type="button" (click)="onCreateMessage()" class="btn btn-lg addTextMsGBtn" style="font-size: 14px;"> <i class="fa fa-comment fa-lg" style="margin-right: 6px;"></i>Create Text Message</button>
</div>
</div>
</div>
<div>
<mat-tab-group mat-stretch-tabs class="example-stretched-tabs" [selectedIndex]="Tabs.value" (selectedIndexChange)="onTabChange($event)">
<mat-tab>
<div class="example-loading-shade" *ngIf="isLoadingResultsVoice">
<mat-spinner *ngIf="isLoadingResultsVoice"></mat-spinner>
</div>
<ng-template mat-tab-label>
<i class="fa fa-bullhorn fa-lg"></i>
<span style="margin-left:5px;">Voice Messages</span>
</ng-template>
<div style="border: 1px solid lightgray;">
<div class="listContainer">
<app-voice-list [$dataSource]="dataSourceVoice" [$SelectedData]="SelectedDataVoice" [$Type]="TypeVoice" [$cols]="colsVoice" (OutputSelectedData)="onSelectedDataVoice($event)" (OutputViewVoice)="onViewVoice($event)" (OutputDeleteVoice)="onDeleteVoice($event)"
(OutputPaginationNumberVoice)="paginationNumberChangeVoice($event)">
</app-voice-list>
<!-- <app-table-selection-tile [messagetype]="'Voice Message'"
[$TotalSelected]="TotalSelectedVoice">
</app-table-selection-tile> -->
</div>
</div>
</mat-tab>
<mat-tab>
<div class="example-loading-shade" *ngIf="isLoadingResultsText">
<mat-spinner *ngIf="isLoadingResultsText"></mat-spinner>
</div>
<ng-template mat-tab-label>
<i class="fa fa-comment fa-lg"></i>
<span style="margin-left:5px;">Text Messages</span>
</ng-template>
<div style="border: 1px solid lightgray;">
<div class="listContainer">
<app-text-list [$dataSource]="dataSourceText" [$SelectedData]="SelectedDataText" [$Type]="TypeText" [$cols]="colsText" (OutputSelectedData)="onSelectedDataText($event)" (OutputEditText)="onEditText($event)" (OutputDeleteText)="onDeleteText($event)" (OutputPaginationNumberTxtMsg)="paginationNumberChangeTxtMsg($event)">
</app-text-list>
<!-- <app-table-selection-tile [messagetype]="'Text Message'"
[$TotalSelected]="TotalSelectedText">
</app-table-selection-tile> -->
</div>
</div>
</mat-tab>
</mat-tab-group>
</div>
</div>
</div>
</div>

try working with primeng documentation they use
<p-table
[paginator]="true"
[rows]="6"
[rowsPerPageOptions]="[6, 10, 20]" >

try use paginatorDropdownAppendTo="body" in p-table

Remove card when clicked on confirm button

Please visit the page to see the problem in details https://ibnul.neocities.org/_temporary/au2pr11/au2pr11.html
Here I have 3 cards. Every one of them has a delete button. When clicked it triggers an overlay dialog to cancel or confirm. If I click the cancel it should go away which I have been able to do myself. But If I click the confirm button it should go away and also remove the card which delete button triggered the overlay dialog.
But the overlay dialog is a single one used for all the cards. And also all the cards has the same class name and I also want to keep it that way cause I want to copy paste this multiple time so I don't want to give different class or id name and write different function for each one. How do I detect the element on which the delete icon was clicked and then if user click the confirm button the whole card should disappear? And I want to remove the card by adding a class name called hide-res-card-outer on the res-card-outer element.
Please show it in pure JavaScript.
var delete_menu_btns = document.querySelectorAll('.del-menu-icon-image');
var del_conf_overlay_box = document.querySelector('.del-conf-overl-outer');
var del_conf_cancel_btn = document.querySelector('.del-conf-cancel-btn');
var del_conf_confirm_btn = document.querySelector('.del-conf-confirm-btn');
delete_menu_btns.forEach(btn => {
btn.addEventListener('click', showDeleteConfBox);
});
function showDeleteConfBox() {
del_conf_overlay_box.classList.add('show-del-conf-overl-box');
}
del_conf_cancel_btn.addEventListener('click', removeDeleteconfBox);
del_conf_confirm_btn.addEventListener('click', removeDeleteconfBox);
function removeDeleteconfBox() {
del_conf_overlay_box.classList.remove('show-del-conf-overl-box');
}
* {
margin: 0px;
font-family: 'Segoe UI', sans-serif;
}
body {
background-color: rgb(240, 240, 240);
}
.res-card-cont {
padding: 20px 100px;
}
.res-card-outer {
background-color: #fdfdfd;
padding: 10px 10px 10px 10px;
margin: 15px 0px 15px 0px;
}
.res-card-top-imginfo-box {
display: flex;
}
.res-card-image {
width: 230px;
height: 145px;
}
.res-card-info-box {
flex-grow: 2;
padding: 5px 10px 5px 20px;
}
.res-card-title-price-cont {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.res-card-title-text {
font-size: 18px;
color: rgb(107, 107, 107);
padding: 2px 5px 4px 0px;
white-space: nowrap;
}
.res-card-title-text:hover {
color: green;
}
.res-card-price-text {
font-size: 18px;
white-space: nowrap;
color: rgb(107, 107, 107);
padding: 2px 0px 4px 0px;
}
.res-card-det-text {
font-size: 14px;
color: #8d8d8d;
padding: 6px 0px 6px 0px;
}
.res-card-det-text > span {
padding: 0px 8px 0px 0px;
}
.res-loc-shre-con {
display: flex;
justify-content: space-between;
padding: 4px 0px 5px 0px;
}
.res-loc-leftsd-con {
display: flex;
}
.res-location-ico {
width: 17px;
height: 17px;
cursor: pointer;
padding: 1px 7px 0px 3px;
opacity: 0.7;
}
.res-location-ico:hover {
opacity: 0.9;
}
.res-location-text {
font-size: 14px;
color: #8d8d8d;
padding: 2px 5px 0px 5px;
}
.res-share-ico-box {
display: flex;
padding: 2px 5px 2px 15px;
}
.res-share-ico-link {
margin: 0px 3px 0px 3px;
}
.res-share-icon {
width: 14px;
height: 14px;
opacity: 0.6;
}
.res-share-icon:hover {
opacity: 0.8;
}
.del-menu-icon-con {
position: relative;
margin: -2px 0px -2px 0px;
}
.del-menu-text-icon-con {
display: flex;
align-items: center;
opacity: 0.8;
}
.del-menu-text-icon-con:hover {
opacity: 1;
}
.del-menu-icon-image {
cursor: pointer;
width: 22px;
height: 18px;
padding: 2px 2px 2px 2px;
}
.del-conf-overl-outer {
position: fixed;
z-index: 100;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
display: none;
}
.del-conf-overl-inner {
height: 100%;
padding: 10px 15px 10px 15px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.692);
}
.del-conf-overl-box {
padding: 10px 20px 20px 20px;
width: 350px;
background-color: white;
}
.del-conf-text1 {
font-size: 22px;
padding: 10px 0px 10px 0px;
}
.del-conf-text2 {
font-size: 15px;
padding: 5px 0px 10px 0px;
}
.del-conf-btns-con {
display: flex;
justify-content: flex-end;
padding: 20px 0px 5px 0px;
}
.del-conf-cancel-btn {
border: none;
padding: 5px 18px;
font-size: 14px;
background-color: #90b974;
color: #ffffff;
}
.del-conf-cancel-btn:hover {
background-color: #79b84f;
}
.del-conf-confirm-btn {
border: none;
padding: 5px 18px;
margin: 0px 0px 0px 10px;
font-size: 14px;
background-color: #f34c46;
color: #ffffff;
}
.del-conf-confirm-btn:hover {
background-color: #f8170f;
}
.show-del-conf-overl-box {
display: block;
}
.hide-res-card-outer {
display: none;
}
<!-- result card box start -->
<div class='bdy-adv-res-cont-inner'>
<div class='res-card-cont'>
<div class='res-card-outer'>
<div class='res-card-top-imginfo-box'>
<img class='res-card-image' src='car1.webp' alt=''>
<div class='res-card-info-box'>
<div class='res-card-title-price-cont'>
<a class='res-card-title-text' href=''>Lamborghini Veneno</a>
<p class='res-card-price-text'>200000 €</p>
</div>
<p class='res-card-det-text'>
<span class=''>FR 2/2019</span>
<span class=''>Disel</span>
<span class=''>4895 km</span>
<span class=''>1895ps</span>
<span class=''>HU 4/2001</span>
</p>
<p class='res-card-det-text'>
<span class=''>Semi-automatic</span>
<span class=''>Disel</span>
<span class=''>80mg</span>
<span class=''>7,51</span>
</p>
<p class='res-card-det-text'>
<span class=''>Private</span>
<span class='res-dettext-hid'>au2mobile</span>
</p>
<div class='res-loc-shre-con'>
<div class='res-loc-leftsd-con'>
<img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'>
<p class='res-location-text'>2948 Resoif Voufo</p>
</div>
<div class='del-menu-icon-con'>
<div class='del-menu-text-icon-con'>
<img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='res-card-outer'>
<div class='res-card-top-imginfo-box'>
<img class='res-card-image' src='car4.webp' alt=''>
<div class='res-card-info-box'>
<div class='res-card-title-price-cont'>
<a class='res-card-title-text' href=''>Ferrari 2018</a>
<p class='res-card-price-text'>7895.3 €</p>
</div>
<p class='res-card-det-text'>
<span class=''>FR 2/2019</span>
<span class=''>Disel</span>
<span class=''>95 km</span>
<span class=''>60ps</span>
<span class=''>HU 4/2001</span>
</p>
<p class='res-card-det-text'>
<span class=''>Semi-automatic</span>
<span class=''>Petrol</span>
<span class=''>80mg</span>
<span class=''>7,51</span>
</p>
<p class='res-card-det-text'>
<span class=''>Private</span>
<span class='res-dettext-hid'>au2mobile</span>
</p>
<div class='res-loc-shre-con'>
<div class='res-loc-leftsd-con'>
<img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'>
<p class='res-location-text'>2948 Resoif Voufo</p>
</div>
<div class='del-menu-icon-con'>
<div class='del-menu-text-icon-con'>
<img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='res-card-outer'>
<div class='res-card-top-imginfo-box'>
<img class='res-card-image' src='car5.webp' alt=''>
<div class='res-card-info-box'>
<div class='res-card-title-price-cont'>
<a class='res-card-title-text' href=''>Nissan 2019</a>
<p class='res-card-price-text'>2569.2 €</p>
</div>
<p class='res-card-det-text'>
<span class=''>FR 2/2019</span>
<span class=''>Disel</span>
<span class=''>200 km</span>
<span class=''>1895ps</span>
<span class=''>HU 4/2001</span>
</p>
<p class='res-card-det-text'>
<span class=''>Gearbox</span>
<span class=''>Disel</span>
<span class=''>80mg</span>
<span class=''>7,51</span>
</p>
<p class='res-card-det-text'>
<span class=''>Private</span>
<span class='res-dettext-hid'>au2mobile</span>
</p>
<div class='res-loc-shre-con'>
<div class='res-loc-leftsd-con'>
<img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'>
<p class='res-location-text'>2948 Resoif Voufo</p>
</div>
<div class='del-menu-icon-con'>
<div class='del-menu-text-icon-con'>
<img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- result card box end -->
<!-- delete confirm overlay start -->
<div class='del-conf-overl-outer'>
<div class='del-conf-overl-inner'>
<div class='del-conf-overl-box'>
<p class='del-conf-text1'>Confirm!</p>
<p class='del-conf-text2'>Are you sure you want to delete your favourites!</p>
<div class='del-conf-btns-con'>
<button class='del-conf-cancel-btn' type='button'>Cancel</button>
<button class='del-conf-confirm-btn' type='button'>Confirm</button>
</div>
</div>
</div>
</div>
<!-- delete confirm overlay end -->

I think best practice is to use id's.
But don't worry, if you don't prefer to use id's you can label which card is clicked by adding a class like "toBeRemoved" on the delete button of the card.
You can do this labeling in showDeleteConfBox function by passing button element as parameter.
Then if user confirms removal, find the closest card of labeled button and remove the card.
Then, in either cases (Cancel or Confirm), hide confirmation box and clear the classes "toBeRemoved".
// These two functions is to find the closest parent of a selector
function collectionHas(a, b) { //helper function (see below)
for(var i = 0, len = a.length; i < len; i ++) {
if(a[i] == b) return true;
}
return false;
}
function findParentBySelector(elm, selector) {
var all = document.querySelectorAll(selector);
var cur = elm.parentNode;
while(cur && !collectionHas(all, cur)) { //keep going up until you find a match
cur = cur.parentNode; //go up
}
return cur; //will return null if not found
}
var delete_menu_btns = document.querySelectorAll('.del-menu-icon-image');
var del_conf_overlay_box = document.querySelector('.del-conf-overl-outer');
var del_conf_cancel_btn = document.querySelector('.del-conf-cancel-btn');
var del_conf_confirm_btn = document.querySelector('.del-conf-confirm-btn');
delete_menu_btns.forEach(btn => {
btn.addEventListener('click', function(){
showDeleteConfBox(btn);
});
});
function showDeleteConfBox(btn) {
del_conf_overlay_box.classList.add('show-del-conf-overl-box');
btn.classList.add('toBeRemoved');
}
del_conf_cancel_btn.addEventListener('click', cancelDeleteconfBox);
del_conf_confirm_btn.addEventListener('click', removeDeleteconfBox);
function cancelDeleteconfBox() {
del_conf_overlay_box.classList.remove('show-del-conf-overl-box');
clearBtnClasses();
}
function removeDeleteconfBox() {
var btnToBeRemoved = document.querySelector('.toBeRemoved');
var cartToBeRemoved = findParentBySelector(btnToBeRemoved, '.res-card-outer');
cartToBeRemoved.classList.add('hide-res-card-outer');
del_conf_overlay_box.classList.remove('show-del-conf-overl-box');
clearBtnClasses();
}
function clearBtnClasses() {
delete_menu_btns.forEach(btn => {
btn.classList.remove('toBeRemoved');
});
}
* {
margin: 0px;
font-family: 'Segoe UI', sans-serif;
}
body {
background-color: rgb(240, 240, 240);
}
.res-card-cont {
padding: 20px 100px;
}
.res-card-outer {
background-color: #fdfdfd;
padding: 10px 10px 10px 10px;
margin: 15px 0px 15px 0px;
}
.res-card-top-imginfo-box {
display: flex;
}
.res-card-image {
width: 230px;
height: 145px;
}
.res-card-info-box {
flex-grow: 2;
padding: 5px 10px 5px 20px;
}
.res-card-title-price-cont {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.res-card-title-text {
font-size: 18px;
color: rgb(107, 107, 107);
padding: 2px 5px 4px 0px;
white-space: nowrap;
}
.res-card-title-text:hover {
color: green;
}
.res-card-price-text {
font-size: 18px;
white-space: nowrap;
color: rgb(107, 107, 107);
padding: 2px 0px 4px 0px;
}
.res-card-det-text {
font-size: 14px;
color: #8d8d8d;
padding: 6px 0px 6px 0px;
}
.res-card-det-text > span {
padding: 0px 8px 0px 0px;
}
.res-loc-shre-con {
display: flex;
justify-content: space-between;
padding: 4px 0px 5px 0px;
}
.res-loc-leftsd-con {
display: flex;
}
.res-location-ico {
width: 17px;
height: 17px;
cursor: pointer;
padding: 1px 7px 0px 3px;
opacity: 0.7;
}
.res-location-ico:hover {
opacity: 0.9;
}
.res-location-text {
font-size: 14px;
color: #8d8d8d;
padding: 2px 5px 0px 5px;
}
.res-share-ico-box {
display: flex;
padding: 2px 5px 2px 15px;
}
.res-share-ico-link {
margin: 0px 3px 0px 3px;
}
.res-share-icon {
width: 14px;
height: 14px;
opacity: 0.6;
}
.res-share-icon:hover {
opacity: 0.8;
}
.del-menu-icon-con {
position: relative;
margin: -2px 0px -2px 0px;
}
.del-menu-text-icon-con {
display: flex;
align-items: center;
opacity: 0.8;
}
.del-menu-text-icon-con:hover {
opacity: 1;
}
.del-menu-icon-image {
cursor: pointer;
width: 22px;
height: 18px;
padding: 2px 2px 2px 2px;
}
.del-conf-overl-outer {
position: fixed;
z-index: 100;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
display: none;
}
.del-conf-overl-inner {
height: 100%;
padding: 10px 15px 10px 15px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.692);
}
.del-conf-overl-box {
padding: 10px 20px 20px 20px;
width: 350px;
background-color: white;
}
.del-conf-text1 {
font-size: 22px;
padding: 10px 0px 10px 0px;
}
.del-conf-text2 {
font-size: 15px;
padding: 5px 0px 10px 0px;
}
.del-conf-btns-con {
display: flex;
justify-content: flex-end;
padding: 20px 0px 5px 0px;
}
.del-conf-cancel-btn {
border: none;
padding: 5px 18px;
font-size: 14px;
background-color: #90b974;
color: #ffffff;
}
.del-conf-cancel-btn:hover {
background-color: #79b84f;
}
.del-conf-confirm-btn {
border: none;
padding: 5px 18px;
margin: 0px 0px 0px 10px;
font-size: 14px;
background-color: #f34c46;
color: #ffffff;
}
.del-conf-confirm-btn:hover {
background-color: #f8170f;
}
.show-del-conf-overl-box {
display: block;
}
.hide-res-card-outer {
display: none;
}
<!-- result card box start -->
<div class='bdy-adv-res-cont-inner'>
<div class='res-card-cont'>
<div class='res-card-outer'>
<div class='res-card-top-imginfo-box'>
<img class='res-card-image' src='car1.webp' alt=''>
<div class='res-card-info-box'>
<div class='res-card-title-price-cont'>
<a class='res-card-title-text' href=''>Lamborghini Veneno</a>
<p class='res-card-price-text'>200000 €</p>
</div>
<p class='res-card-det-text'>
<span class=''>FR 2/2019</span>
<span class=''>Disel</span>
<span class=''>4895 km</span>
<span class=''>1895ps</span>
<span class=''>HU 4/2001</span>
</p>
<p class='res-card-det-text'>
<span class=''>Semi-automatic</span>
<span class=''>Disel</span>
<span class=''>80mg</span>
<span class=''>7,51</span>
</p>
<p class='res-card-det-text'>
<span class=''>Private</span>
<span class='res-dettext-hid'>au2mobile</span>
</p>
<div class='res-loc-shre-con'>
<div class='res-loc-leftsd-con'>
<img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'>
<p class='res-location-text'>2948 Resoif Voufo</p>
</div>
<div class='del-menu-icon-con'>
<div class='del-menu-text-icon-con'>
<img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='res-card-outer'>
<div class='res-card-top-imginfo-box'>
<img class='res-card-image' src='car4.webp' alt=''>
<div class='res-card-info-box'>
<div class='res-card-title-price-cont'>
<a class='res-card-title-text' href=''>Ferrari 2018</a>
<p class='res-card-price-text'>7895.3 €</p>
</div>
<p class='res-card-det-text'>
<span class=''>FR 2/2019</span>
<span class=''>Disel</span>
<span class=''>95 km</span>
<span class=''>60ps</span>
<span class=''>HU 4/2001</span>
</p>
<p class='res-card-det-text'>
<span class=''>Semi-automatic</span>
<span class=''>Petrol</span>
<span class=''>80mg</span>
<span class=''>7,51</span>
</p>
<p class='res-card-det-text'>
<span class=''>Private</span>
<span class='res-dettext-hid'>au2mobile</span>
</p>
<div class='res-loc-shre-con'>
<div class='res-loc-leftsd-con'>
<img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'>
<p class='res-location-text'>2948 Resoif Voufo</p>
</div>
<div class='del-menu-icon-con'>
<div class='del-menu-text-icon-con'>
<img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='res-card-outer'>
<div class='res-card-top-imginfo-box'>
<img class='res-card-image' src='car5.webp' alt=''>
<div class='res-card-info-box'>
<div class='res-card-title-price-cont'>
<a class='res-card-title-text' href=''>Nissan 2019</a>
<p class='res-card-price-text'>2569.2 €</p>
</div>
<p class='res-card-det-text'>
<span class=''>FR 2/2019</span>
<span class=''>Disel</span>
<span class=''>200 km</span>
<span class=''>1895ps</span>
<span class=''>HU 4/2001</span>
</p>
<p class='res-card-det-text'>
<span class=''>Gearbox</span>
<span class=''>Disel</span>
<span class=''>80mg</span>
<span class=''>7,51</span>
</p>
<p class='res-card-det-text'>
<span class=''>Private</span>
<span class='res-dettext-hid'>au2mobile</span>
</p>
<div class='res-loc-shre-con'>
<div class='res-loc-leftsd-con'>
<img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'>
<p class='res-location-text'>2948 Resoif Voufo</p>
</div>
<div class='del-menu-icon-con'>
<div class='del-menu-text-icon-con'>
<img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- result card box end -->
<!-- delete confirm overlay start -->
<div class='del-conf-overl-outer'>
<div class='del-conf-overl-inner'>
<div class='del-conf-overl-box'>
<p class='del-conf-text1'>Confirm!</p>
<p class='del-conf-text2'>Are you sure you want to delete your favourites!</p>
<div class='del-conf-btns-con'>
<button class='del-conf-cancel-btn' type='button'>Cancel</button>
<button class='del-conf-confirm-btn' type='button'>Confirm</button>
</div>
</div>
</div>
</div>
<!-- delete confirm overlay end -->

Based on your comment, I decided to completely start over with my answer. This may not be the best way. Here is a fiddle to see for yourself.
The first thing we do, is create a global object to store our events so we can access them anywhere. This is necessary so we can store which delete button was clicked.
var Event = {};
Next, we capture the event from our show function and store it in the object.
function showDeleteConfBox(event) {
Event.remove = event;
del_conf_overlay_box.classList.add('show-del-conf-overl-box');
}
Now inside our remove function, we know exactly which element the event came from so we can traverse to the correct card.
function removeDeleteconfBox() {
del_conf_overlay_box.classList.remove('show-del-conf-overl-box');
Event.remove.target.closest('.res-card-outer').classList.add('hide-res-card-outer');
}
We then remove the existing event listener in our cancel function to prevent any of the other cards from being hidden.
function cancelDeleteconfBox() {
del_conf_overlay_box.classList.remove('show-del-conf-overl-box');
del_conf_confirm_btn.removeEventListener("click", function() {
removeDeleteconfBox();
});
}

on click functions being applied to all divs with same class

I have two panels which are built using the same classes, but their content is slightly different. I have to hide and toggle classes depending on the options the user selects.
I've got the functionality working for the panels, but the issue is that the jQuery its being applied to both panels at the same time on click, which then stops the panels working how I would like. I only want the functions to be applied on click to that specific panel.
I've been reading and I thought that by using (this) would help fix this problem. Same as using .each(). But I've not been able to fix it.
Updated
Here is a jsFiddle, showing how the panels currently work. - new fiddle
User clicks on option 'everyday' within the '1.choose your range' section of the first panel
This triggers option '2 . choose your style' to appear and '1.choose your range' section to hide in the first panel
However when clicking on any of these options its being applied to the second panel also, which I do not want. The second panel should only animate when the user selects the options within that panel.
The panels shouldn't animate unless the user has selected an option within that specific panel.
Here is my jQuery Code:
$('.price-colour li').on('click', function() {
$('.price-colour li').not(this).removeClass('selected');
$(this).toggleClass('selected');
})
$('.style-type').on('click', function() {
$('.style-type').not(this).removeClass('selected');
$(this).toggleClass('selected');
})
$('#basket-cart').on('click', function() {
$('#popup-shopping').toggleClass('visible');
})
$('#popup-shopping__close-icon').on('click', function() {
$('#popup-shopping').toggleClass('visible');
})
$('.edit-txt').on('click', function() {
$('.range-item').not(this).removeClass('selected');
$(this).parents().find('.price-item-section').toggleClass('inactive');
$(this).addClass('hidden');
$(this).parents().find('.link-btn--solid').toggleClass('inactive');
})
$('.range-item').on('click', function() {
$('.range-item').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('.edit-txt').removeClass('hidden');
$(this).parents().find('.price-item-section').toggleClass('inactive');
$(this).parents().find('.link-btn--solid').toggleClass('inactive');
})
body {
font-size: 14px;
line-height: 20px;
}
h1,
h2,
h3,
h4,
h5 {
font-size: 14px;
line-height: 20px;
}
.o-unlist {
list-style: none;
margin: 0;
padding: 0;
}
.price-item {
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
}
.price-item-top {
background: black;
padding: 20px;
color: white;
}
.price-item-section {
padding: 15px 30px;
border-bottom: 2px solid black;
}
.price-item-section.inactive h3 {
color: #7d7d7d;
}
.price-item-section.inactive .price-range,
.price-item-section.inactive .price-detail,
.price-item-section.inactive .price-style,
.price-item-section.inactive .price-item-three {
opacity: 0;
visibility: hidden;
transform: scaleY(0);
height: 0;
margin: 0;
padding: 0;
border: none;
overflow: hidden;
}
.price-range {
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-item-three {
padding: 15px 50px 0;
border-top: 2px solid black;
margin: 10px -30px 0;
}
.price-style {
margin-top: 50px;
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-style p {
margin: 10px 0 0;
padding: 0;
letter-spacing: 0.15px;
}
.style-type {
opacity: 0.6;
padding: 5px;
transition-duration: 0.3s;
transition-property: all;
cursor: pointer;
}
.style-type.selected {
opacity: 1;
}
.price-detail {
margin-top: 20px;
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-colour {
list-style: none;
text-align: center;
margin: 0 -7px 5px;
padding: 0;
}
.price-colour li {
display: inline-block;
margin: 0 9px;
padding: 2px;
border-radius: 100px;
cursor: pointer;
border: 1px solid transparent;
transition-duration: 0.3s;
transition-property: all;
}
.price-colour li span {
border-radius: 100px;
height: 20px;
width: 20px;
display: block;
}
.price-colour li#pink span {
background: pink;
}
.price-colour li#yellow span {
background: yellow;
}
.price-colour li#black span {
background: black;
}
.price-colour li#grey span {
background: #999999;
}
.price-colour li.selected {
border-color: #999999;
}
.price-size-guide {
font-size: 1.2rem;
line-height: 2rem;
color: $monza;
text-align: center;
letter-spacing: 1px;
border: 1px solid red;
padding: 5px;
cursor: pointer;
}
.size-guide-icon {
background: url(../images/size-guide-icon.jpg) no-repeat;
width: 25px;
height: 12px;
background-size: 25px;
display: inline-block;
}
#price-select {
border: 2px solid black;
font-size: 1.3rem;
line-height: 1.8rem;
letter-spacing: 1px;
padding: 5px;
display: block;
width: 100%;
margin: 10px 0;
}
.radio-indicator {
position: absolute;
top: 0px;
left: 0;
height: 20px;
width: 20px;
background: white;
border: 2px solid black;
border-radius: 100px;
transition-duration: 0.3s;
transition-property: all;
}
.radio-select {
cursor: pointer;
font-size: 1.4rem;
letter-spacing: 2px;
position: relative;
padding: 0 0 0 30px;
margin: 0;
}
.radio-select:first-child {
margin-right: 43px;
}
.radio-select input {
position: absolute;
z-index: -1;
opacity: 0;
}
.radio-select input:checked~.radio-indicator {
background: red;
}
.radio-select a {
font-size: 1.1rem;
line-height: 1.1rem;
color: $heli;
display: block;
font-family: $grotesk;
font-weight: $groreg;
letter-spacing: 1px;
}
.edit-txt {
cursor: pointer;
font-size: 1.5rem;
z-index: 10;
position: relative;
transition-duration: 0.3s;
transition-property: all;
font-size: 14px;
line-height: 20px;
}
.edit-txt.hidden {
opacity: 0;
visibility: hidden;
}
.range-item {
display: inline-block;
text-align: center;
padding: 35px 35px 20px 0;
cursor: pointer;
}
.range-item img {
width: 31px;
height: 31px;
border-radius: 100px;
padding: 2px;
border: 1px solid transparent;
}
.range-item p {
margin: 10px 0 0 0;
padding: 0;
font-size: 1.4rem;
line-height: 1.8rem;
letter-spacing: 1px;
font-family: $grotesk;
font-weight: $groreg;
}
.range-item.selected img {
border-color: #999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="row">
<div class="col-lg-7">
image in here
</div>
<div class="col-lg-5">
<div class="price-item">
<div class="price-item-top">
<h3 class="heading-price">Choose your bottoms</h3>
</div>
<div class="price-item-one price-item-section clearfix inactive">
<div class="clearfix">
<h3 class="heading-price float-left">1. choose your range: lace</h3>
<span class="edit-txt float-right">edit</span>
</div>
<ul class="price-range o-unlist clearfix">
<li id="lace" class="range-item selected">
<img src="https://via.placeholder.com/31x31" />
<p>lace</p>
</li>
<li id="everyday" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>everday</p>
</li>
<li id="adventure" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>adventure</p>
</li>
<li id="slogan" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>slogan</p>
</li>
</ul>
</div>
<div class="price-item-two price-item-section clearfix">
<h3 class="heading-price">2. choose your style</h3>
<div class="clearfix">
<div class="price-style float-left">
<div class="row">
<div class="col-sm-6 o-txt-center">
<div id="style-brief" class="style-type selected">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>brief</p>
</div>
</div>
<div class="col-sm-6 o-txt-center">
<div id="style-thong" class="style-type">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>thong</p>
</div>
</div>
</div>
</div>
<div class="price-detail float-right">
<ul class="price-colour">
<li id="pink" class="selected"><span></span></li>
<li id="yellow"><span></span></li>
<li id="black"><span></span></li>
<li id="grey"><span></span></li>
</ul>
<div class="price-size-guide" data-toggle="modal" data-target="#popup-size-guide">
redefining size guide <i class="size-guide-icon"></i>
</div>
<select id="price-select">
<option value="small">small (8/10)</option>
<option value="medium">medium (12/14)</option>
<option value="large">large (16/18)</option>
</select>
</div>
</div>
<div class="price-item-three clearfix">
<label class="radio-select float-left">buy once £28
<input type="radio" name="radio" checked="checked"/>
<div class="radio-indicator"></div>
</label>
<label class="radio-select float-right">get monthly £24
how subscription works
<input type="radio" name="radio"/>
<div class="radio-indicator"></div>
</label>
</div>
</div>
</div>
<!-- price item-->
</div>
<!--col lg 5-->
</div>
<!-- row-->
<div class="row">
<div class="col-lg-7">
image in here
</div>
<div class="col-lg-5">
<div class="price-item">
<div class="price-item-top">
<h3 class="heading-price">Choose your top</h3>
</div>
<div class="price-item-one price-item-section clearfix">
<div class="clearfix">
<h3 class="heading-price float-left">1. choose your range: lace</h3>
<span class="edit-txt float-right">edit</span>
</div>
<ul class="price-range o-unlist clearfix">
<li id="lace" class="range-item selected">
<img src="https://via.placeholder.com/31x31" />
<p>lace</p>
</li>
<li id="everyday" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>everday</p>
</li>
<li id="adventure" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>adventure</p>
</li>
<li id="slogan" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>slogan</p>
</li>
</ul>
</div>
<div class="price-item-two price-item-section clearfix inactive">
<h3 class="heading-price">2. choose your style</h3>
<div class="clearfix">
<div class="price-style float-left">
<div class="row">
<div class="col-sm-6 o-txt-center">
<div id="style-bra" class="style-type selected">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>bra</p>
</div>
</div>
<div class="col-sm-6 o-txt-center">
<div id="style-bralette" class="style-type">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>bralette</p>
</div>
</div>
</div>
</div>
<div class="price-detail float-right">
<ul class="price-colour">
<li id="pink" class="selected"><span></span></li>
<li id="yellow"><span></span></li>
<li id="black"><span></span></li>
<li id="grey"><span></span></li>
</ul>
<div class="price-size-guide" data-toggle="modal" data-target="#popup-size-guide">
redefining size guide <i class="size-guide-icon"></i>
</div>
<select id="price-select">
<option value="small">small (8/10)</option>
<option value="medium">medium (12/14)</option>
<option value="large">large (16/18)</option>
</select>
</div>
</div>
<div class="price-item-three clearfix">
<label class="radio-select float-left">buy once £28
<input type="radio" name="radio" checked="checked"/>
<div class="radio-indicator"></div>
</label>
<label class="radio-select float-right">get monthly £24
how subscription works
<input type="radio" name="radio"/>
<div class="radio-indicator"></div>
</label>
</div>
</div>
</div>
<div>
<!--col lg 5-->
</div>
<!-- row-->
</section>

Your parents() selector is selecting ALL parents. Use closest() with a selector to only toggle children beneath that element.
$(this).closest('.price-item').find('.price-item-section').toggleClass('inactive');

Music player skip forward/backward functionality JQuery

New project this time, I'm working on a music player widget and I've hit a wall. I'm looking to make it so that the player can cycle the active track with skip forward and backward buttons and I know that it's easier to do when you put your elements in a list, but I still have no idea. I haven't yet hooked this up to any sort of tracklist or api or anything like that, right now I want to get the visual functionalities working.
Here's the Codepen as well.
function currentlyPlaying(target) {
var current = target.parent();
$('.playingTitle').text(current.children('.title').text());
$('.playingAuthor').text(current.children('.author').text());
}
$(document).on('click', '.play', function(e){
$('.pause').attr('class', 'icon play');
$(e.target).attr('class', 'icon pause');
currentlyPlaying( $(e.target));
});
$(document).on('click', '.playing', function(e){
$('.playing').attr('class', 'playingPaused paused controls');
});
$(document).on('click', '.paused', function(e){
$('.paused').attr('class', 'playingPaused playing controls');
});
* {
font-family: arial;
}
.container {
margin: auto;
padding: 0;
width: 500px;
border: 2px solid black;
}
.header {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #e0e0e0;
border-bottom: 1px solid black;
overflow: hidden;
}
.logo {
float: left;
}
.header h1 {
font-size: 32px;
position: relative;
left: 8px;
}
.songList {
margin: auto;
padding: 0;
height: 200px;
width: 100%;
overflow-y: scroll;
}
.songList ul {
list-style: none;
padding: 0;
margin: 0;
}
.song {
height: 49px;
width: calc(100% - 10px);
padding: 5px;
border-bottom: 1px solid #bbbbbb;
background: #f1f1f1;
}
.song:hover {
background: #dddddd;
}
.icon {
float: left;
opacity: 0.2;
}
.icon:hover {
opacity: 0.7;
}
.play {
content:url(https://png.icons8.com/metro/1600/play.png);
}
.pause {
content:url(http://icons.veryicon.com/256/System/Windows%208/Media%20Controls%20Pause.png);
}
.title {
opacity: 0.8;
font-size: 20px;
position: relative;
top: 4px;
left: 4px;
}
.author {
opacity: 0.4;
font-size: 14px;
position: relative;
left: 8px;
}
.footer {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #888888;
border-top: 1px solid black;
overflow: hidden;
}
.controls{
float: left;
position: relative;
filter: invert(1.0);
opacity: 0.7;
}
.controls:hover {
filter: invert(0.15);
}
.skipBack {
top: 16px;
}
.skipForward {
top: 16px;
}
.playing {
content:url(https://png.icons8.com/windows/1600/circled-pause.png);
}
.paused {
content:url(https://png.icons8.com/material/1600/circled-play.png);
}
.playingTitle {
font-size: 24px;
color: white;
opacity: 0.7;
position: relative;
top: 16px;
left: 8px;
}
.playingAuthor {
font-size: 18px;
color: white;
opacity: 0.45;
position: relative;
top: 12px;
left: 12px;
}
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<div class="container">
<div class="header">
<img class="logo" src="http://www.pvhc.net/img59/rpxzzzyofvqahyiwtziu.png" height="80px">
<h1>Virus Free* Music Player!!</h1>
</div>
<div class="songList">
<ul>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">God's Plan</span><br>
<span class="author">Drake</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Havana</span><br>
<span class="author">Camila Cabello & Young Thug</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">River</span><br>
<span class="author">Eminem & Ed Sheeran</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Perfect</span><br>
<span class="author">Ed Sheeran</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Echame La Culpa</span><br>
<span class="author">Luis Fonsi & Demi Lovato</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Rockstar</span><br>
<span class="author">Post Malone & 21 Savage</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Him & I</span><br>
<span class="author">G-Eazy & Halsey</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Finesse</span><br>
<span class="author">Bruno Mars & Cardi B</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Wolves</span><br>
<span class="author">Selena Gomez & Marshmello</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Feel It Still</span><br>
<span class="author">Portugal. The Man</span>
</div>
</li>
</ul>
</div>
<div class="footer">
<img class="skipBack controls" src="https://png.icons8.com/metro/1600/skip-to-start.png" height="48px">
<img class="playingPaused paused controls" height="80px">
<img class="skipForward controls" src="https://png.icons8.com/metro/1600/end.png" height="48px">
<span class="playingTitle">Select a track to begin</span><br>
<span class="playingAuthor">Go ahead no one is stopping you.</span>
</div>
</div>

I have removed the div tags from the inside of you li tags as they did not serve any purpose except to complicate the HTML structure.
You could show a selected song in your play list and then wire up the previous and next buttons to do something.
Here is an example of how:
$(".song").on("click", function() {
$(".selected").removeClass("selected");
$(this).addClass("selected");;
})
$(".skipBack").on("click", function() {
var target = $(".song.selected").prev(".song");
$(".selected").removeClass("selected");
$(target).addClass("selected");
});
$(".skipForward").on("click", function() {
var target = $(".song.selected").next(".song");
$(".selected").removeClass("selected");
$(target).addClass("selected");
});
* {
font-family: arial;
}
.container {
margin: auto;
padding: 0;
width: 500px;
border: 2px solid black;
}
.header {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #e0e0e0;
border-bottom: 1px solid black;
overflow: hidden;
}
.logo {
float: left;
}
.header h1 {
font-size: 32px;
position: relative;
left: 8px;
}
.songList {
margin: auto;
padding: 0;
height: 200px;
width: 100%;
overflow-y: scroll;
}
.songList ul {
list-style: none;
padding: 0;
margin: 0;
}
.song {
height: 49px;
width: calc(100% - 10px);
padding: 5px;
border-bottom: 1px solid #bbbbbb;
background: #f1f1f1;
}
.song:hover {
background: #dddddd;
}
.song.selected {
background: #aaaaaa;
}
.icon {
float: left;
opacity: 0.2;
}
.icon:hover {
opacity: 0.7;
}
.play {
content: url(https://png.icons8.com/metro/1600/play.png);
}
.pause {
content: url(http://icons.veryicon.com/256/System/Windows%208/Media%20Controls%20Pause.png);
}
.title {
opacity: 0.8;
font-size: 20px;
position: relative;
top: 4px;
left: 4px;
}
.author {
opacity: 0.4;
font-size: 14px;
position: relative;
left: 8px;
}
.footer {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #888888;
border-top: 1px solid black;
overflow: hidden;
}
.controls {
float: left;
position: relative;
filter: invert(1.0);
opacity: 0.7;
}
.controls:hover {
filter: invert(0.15);
}
.skipBack {
top: 16px;
}
.skipForward {
top: 16px;
}
.playing {
content: url(https://png.icons8.com/windows/1600/circled-pause.png);
}
.paused {
content: url(https://png.icons8.com/material/1600/circled-play.png);
}
.playingTitle {
font-size: 24px;
color: white;
opacity: 0.7;
position: relative;
top: 16px;
left: 8px;
}
.playingAuthor {
font-size: 18px;
color: white;
opacity: 0.45;
position: relative;
top: 12px;
left: 12px;
}
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>
<div class="container">
<div class="header">
<img class="logo" src="http://www.pvhc.net/img59/rpxzzzyofvqahyiwtziu.png" height="80px">
<h1>Virus Free* Music Player!!</h1>
</div>
<div class="songList">
<ul>
<li class="song">
<img class="icon play" height="48px">
<span class="title">God's Plan</span><br>
<span class="author">Drake</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Havana</span><br>
<span class="author">Camila Cabello & Young Thug</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">River</span><br>
<span class="author">Eminem & Ed Sheeran</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Perfect</span><br>
<span class="author">Ed Sheeran</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Echame La Culpa</span><br>
<span class="author">Luis Fonsi & Demi Lovato</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Rockstar</span><br>
<span class="author">Post Malone & 21 Savage</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Him & I</span><br>
<span class="author">G-Eazy & Halsey</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Finesse</span><br>
<span class="author">Bruno Mars & Cardi B</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Wolves</span><br>
<span class="author">Selena Gomez & Marshmello</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Feel It Still</span><br>
<span class="author">Portugal. The Man</span>
</li>
</ul>
</div>
<div class="footer">
<img class="skipBack controls" src="https://png.icons8.com/metro/1600/skip-to-start.png" height="48px">
<img class="playingPaused paused controls" height="80px">
<img class="skipForward controls" src="https://png.icons8.com/metro/1600/end.png" height="48px">
<span class="playingTitle">Select a track to begin</span><br>
<span class="playingAuthor">Go ahead no one is stopping you.</span>
</div>
</div>

How to vertically align blocks

I have hard time vertically centering my blocks. If you take a look to my code , test1 block is aligned with block catA catB catE catF but test2 block isnt with its respective top blocks.
html :
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">Most popular aisles</span>
</div>
<div class="homepage-top-category-container-list">
<div>
<a href="#">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
<div class="homepage-top-category-container-item-btn">
Browse catA
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
<div class="homepage-top-category-container-item-btn">
Browse catB
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
<div class="homepage-top-category-container-item-btn">
Browse catC
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
<div class="homepage-top-category-container-item-btn">
Browse catD
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
<div class="homepage-top-category-container-item-btn">
Browse catE
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
<div class="homepage-top-category-container-item-btn">
Browse catF
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
<div class="homepage-top-category-container-item-btn">
Browse catG
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
<div class="homepage-top-category-container-item-btn">
Browse catH
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="homepage-banner-grid-wrapper">
<div class="homepage-banner-grid">
<div class="home-page-banner-grid-items" id="home-page-banner-grid-item">
test1
</div>
<div class="home-page-banner-grid-items" id="home-page-banner-grid-item">
test2
</div>
<!--<div class="home-page-banner-grid-items" id="home-page-banner-grid-item3">*******
test3
</div>
</div>****** -->
</div>
css here :
a {
text-decoration: none;
}
body {
margin: 0px;
}
.homepage-wrapper {
max-width: 1078px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title {
color: #808080;
margin-top: 15px;
padding: 15px 0 15px 0;
font-weight: bold;
letter-spacing: -1px;
}
#homepage-top-category-container-title {
color: ##808080;
margin-left: 22px;
}
.homepage-top-category-container-list {
display: flex;
flex-wrap: wrap;
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-list > div {
margin-left: 22px;
margin-bottom: 22px;
}
.homepage-top-category-container-item {
display: block;
float: none;
width: auto;
height: auto;
border: solid 1px #d0d0ce;
position: relative;
border-radius: 3px;
}
#homepage-top-category-container-item {
width: 240px;
height: 360px;
}
.homepage-top-category-container-item:hover {
-webkit-box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
-moz-box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
}
.homepage-top-category-container-item-btn {
background-color: #cde5d9;
color: black;
position: absolute;
padding: 10px;
left: 0;
right: 0;
bottom: 0;
border-top: 1px solid #d0d0ce;
border-bottom: 2px solid #d0d0ce;
}
.homepage-banner-grid-wrapper {
background-color: yellow;
width: 100%;
height: auto;
}
.homepage-banner-grid {
max-width: 1078px;
height: auto;
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;
}
.home-page-banner-grid-items {
width: 506px;
display: block;
margin-left: auto;
margin-right: auto;
}
#home-page-banner-grid-item {
background-color: red;
margin-left: 22px;
/*
#home-page-banner-grid-item1 {
background-color: red;
}
#home-page-banner-grid-item2 {
background-color: green;
}
#home-page-banner-grid-item3 {
background-color: orange;
}
*/
My goal is to align test2 block under its respective blocks , so it will look just like how test1 block is aligned under its respective blocks.
I will appreciate some corrections and/or enhancements of my code.
jsfiddle here --> https://jsfiddle.net/r0gLo9cp/
Many thanks for your help.

That will fix it add flex-direction like thesoorae said
.homepage-banner-grid {
max-width: 1078px;
height: auto;
display: flex;
flex-direction:column;
align-items: center;
margin-left: auto;
margin-right: auto;
}

Are you missing your closing div on the bottom? Looks like flex should take care of the centering for you, if you are looking for them to be listed in a column, make sure you use flex-direction: column; in the parent container (homepage-banner-grid).

Categories

Resources