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

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

Related

Hide scroll and implement it with JS

I'm a beginner to HTML and JavaScript.
I'm building a tabs bar, in which I want to have the option to scroll it horizontally, not with a traditional browser scroll, but with arrow buttons that I've created.
Here is how my tabs bar looks like:
This is the best I've managed to do:
function clickLeft(){
arrowLeft.style.color="white";
setTimeout(function(){
arrowLeft.style.color="black";
},420);
}
function clickRight(){
arrowRight.style.color="white";
setTimeout(function(){
arrowRight.style.color="black";
},420);
}
#outer_container{
margin: auto;
}
#tabs_container{
display: flex;
overflow-x: auto;
left: 0;
right: 0;
margin: auto;
margin-top: 10px;
width: 60vh;
height: 70px;
border: 2px solid black;
border-bottom: 0;
border-radius: 10px;
padding: 4px;
}
#inner_wrap{
display: flex;
border-bottom: 2px solid black;
height: 50px;
}
#inner_wrap div{
text-align: center;
background-color: gray;
padding: 10px;
height: 20px;
border-radius: 5px;
margin: 2px;
width: max-content;
}
#tabs_container::-webkit-scrollbar{
width: 0;
}
#tabs_container::-webkit-scrollbar-track {
margin-top: 20px;
width: 20px;
padding: 20px;
-webkit-box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0);
border-radius: 10px;
background-color: transparent;
}
#tabs_container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
background-color: #666666;
}
#icon_tab{
display: inline-block;
background-color: none;
border:0;
color:white;
float: right;
width: 20px;
margin:5px;
}
.arrow{
font-size: 34px;
margin: 15px;
transition: color 0.4s;
}
<div id="main_container">
<table id=outer_container>
<tr>
<td>
<div>
<i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i>
</div>
</td>()
<td>
<div id="tabs_container">
<div id=inner_wrap>
<div>
geisha ch 1
</div>
<div>
geisha ch 2
</div>
<div>
geisha ch 3
</div>
<div>
work
</div>
<div>
hobby
</div>
<div>
music
</div>
<div>
movie
</div>
<div>
book1
</div>
<div>
book2
</div>
<div>
game
</div>
</div>
<div id=icon_tab>
<i class=" fa fa-plus-circle "aria-hidden="true"></i>
</div>
</div>
</td>
<td>
<div>
<i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
</div>
</td>
</tr>
</table>
</div>
I manage to go to the JavaScript function, but have no idea how to scroll horizontally by JS code. Also I would like to hide the OOTB scroll.
I've also created a fiddle: https://jsfiddle.net/b40c19h6/1/
Use overflow-x: hidden to hide the scrollbar and you can use the scrollLeft or scrollBy function on your tabs element to move the content.
Here how you can do it:
const arrowLeft = document.getElementsByClassName('arrow')[0];
const arrowRight = document.getElementsByClassName('arrow')[1];
const tabs = document.getElementById('tabs_container');
console.log("here")
function clickLeft(){
arrowLeft.style.color="white";
setTimeout(function(){
arrowLeft.style.color="black";
},420);
tabs.scrollLeft -= 30;
}
function clickRight(){
arrowRight.style.color="white";
setTimeout(function(){
arrowRight.style.color="black";
},420);
tabs.scrollLeft += 30;
}
body{
height:100vh;
width:100%;
margin: 0;
}
#main_container{
background-color: #3f51b5;
height:100%;
}
#outer_container{
margin: auto;
}
#tabs_container{
display: flex;
overflow-x: auto;
left: 0;
right: 0;
margin: auto;
margin-top: 10px;
width: 60vh;
height: 70px;
border: 2px solid black;
border-bottom: 0;
border-radius: 10px;
padding: 4px;
}
#inner_wrap{
display: flex;
border-bottom: 2px solid black;
height: 50px;
}
#inner_wrap div{
text-align: center;
background-color: gray;
padding: 10px;
height: 20px;
border-radius: 5px;
margin: 2px;
width: max-content;
}
#tabs_container{
overflow-x: hidden;
}
#tabs_container::-webkit-scrollbar{
width: 0;
}
#tabs_container::-webkit-scrollbar-track {
margin-top: 20px;
width: 20px;
padding: 20px;
-webkit-box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0);
border-radius: 10px;
background-color: transparent;
}
#tabs_container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
background-color: #666666;
}
#icon_tab{
display: inline-block;
background-color: none;
border:0;
color:white;
float: right;
width: 20px;
margin:5px;
}
.arrow{
font-size: 34px;
margin: 15px;
transition: color 0.4s;
}
<!DOCTYPE html>
<html>
<head>
<title>vacabulary</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
</head>
<body>
<div id="main_container">
<table id=outer_container>
<tr>
<td>
<div>
<i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i>
</div>
</td>()
<td>
<div id="tabs_container">
<div id=inner_wrap>
<div>
geisha ch 1
</div>
<div>
geisha ch 2
</div>
<div>
geisha ch 3
</div>
<div>
work
</div>
<div>
hobby
</div>
<div>
music
</div>
<div>
movie
</div>
<div>
book1
</div>
<div>
book2
</div>
<div>
game
</div>
</div>
<div id=icon_tab>
<i class=" fa fa-plus-circle "aria-hidden="true"></i>
</div>
</div>
</td>
<td>
<div>
<i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
</div>
</td>
</tr>
</table>
</div>
<script src="main.js"></script>
</body>
</html>
This should work by using element.scrollBy.
The scrollBy() method of the Element interface scrolls an element by the given amount.
Also, you should set overflow-x to hidden instead of auto. overflow:auto will assign scrollbar to it
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
function clickLeft(){
arrowLeft.style.color="white";
setTimeout(function(){
arrowLeft.style.color="black";
},420);
}
function clickRight(){
arrowRight.style.color="white";
setTimeout(function(){
arrowRight.style.color="black";
},420);
}
let left = document.querySelector('#left')
let right = document.querySelector('#right')
left.addEventListener('click',function(){
document.querySelector('#tabs_container').scrollBy(-20,0);
});
right.addEventListener('click',function(){
document.querySelector('#tabs_container').scrollBy(20,0);
});
#outer_container{
margin: auto;
}
#tabs_container{
display: flex;
overflow-x: hidden;
left: 0;
right: 0;
margin: auto;
margin-top: 10px;
width: 60vh;
height: 70px;
border: 2px solid black;
border-bottom: 0;
border-radius: 10px;
padding: 4px;
}
#inner_wrap{
display: flex;
border-bottom: 2px solid black;
height: 50px;
}
#inner_wrap div{
text-align: center;
background-color: gray;
padding: 10px;
height: 20px;
border-radius: 5px;
margin: 2px;
width: max-content;
}
#tabs_container::-webkit-scrollbar{
width: 0;
}
#tabs_container::-webkit-scrollbar-track {
margin-top: 20px;
width: 20px;
padding: 20px;
-webkit-box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0);
border-radius: 10px;
background-color: transparent;
}
#tabs_container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
background-color: #666666;
}
#icon_tab{
display: inline-block;
background-color: none;
border:0;
color:white;
float: right;
width: 20px;
margin:5px;
}
.arrow{
font-size: 34px;
margin: 15px;
transition: color 0.4s;
}
<div id="main_container">
<table id=outer_container>
<tr>
<td>
<div>
<i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i>
</div>
</td>()
<td>
<div id="tabs_container">
<div id=inner_wrap>
<div>
geisha ch 1
</div>
<div>
geisha ch 2
</div>
<div>
geisha ch 3
</div>
<div>
work
</div>
<div>
hobby
</div>
<div>
music
</div>
<div>
movie
</div>
<div>
book1
</div>
<div>
book2
</div>
<div>
game
</div>
</div>
<div id=icon_tab>
<i class=" fa fa-plus-circle "aria-hidden="true"></i>
</div>
</div>
</td>
<td>
<div>
<button id='left'>Left </button>
<button id='right'>Right</button>
<i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
</div>
</td>
</tr>
</table>
</div>

Buttons in slider not working using 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>

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();
});
}

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).

Show and hide not working in Firefox with jQuery version 3.1.0

I'm creating a small radio player using jQuery. You can find the code on codepen. I'm having problems with the code when I run it on Firefox (it works on every other browser). Following part of the JS:
$(".back").click(function(){
$("h2").show();
$("hr").show();
$(".guziki").hide();
$("#backbutton").hide();
});
doesn't work. I've never experienced that problem. What might cause this?
$(document).ready(
function() {
$(".middle").click(function() {
$(this).children(".guziki").show();
$("h2").hide();
$("hr").hide();
$("#backbutton").show();
});
$(".back").click(function() {
$("h2").show();
$("hr").show();
$(".guziki").hide();
$("#backbutton").hide();
console.log($(".back").parent())
});
});
var buttons = $("#one, #two").on("click", function() {
buttons.toggle();
});
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet"> #radio {
background-color: #e0e0e0;
max-width: 25%;
overflow: hidden;
font-family: helvetica;
}
h2 {
color: #212121;
text-align: center;
font-family: 'Bungee Hairline'
}
h1 {
color: #e0e0e0;
text-align: center;
text-transform: uppercase;
padding-top: 2%;
font-family: 'Bungee Hairline', cursive;
font-size: 2em;
}
.top {
background-color: #212121;
height: 50px;
margin-top: -5%;
}
.bottom {
text-align: center;
background-color: #212121;
color: #e0e0e0;
padding: 5px 0;
}
button {
border: none;
background: transparent;
display: block;
margin: 0 auto;
font-size: 40px;
}
.guziki {
text-align: center;
display: none;
}
#two {
display: none;
}
.fa-chevron-left {
position: absolute;
left: 20px;
font-size: 30px;
padding-top: 10px;
cursor: pointer;
}
#backbutton {
display: none;
padding-top: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<audio id="player" src="http://uk3.internet-radio.com:11128/;"></audio>
<audio id="player2" src="http://stream.techno.fm/live.mp3"></audio>
<div id="radio">
<div class="top">
<h1>radio techno</h1>
<div id="backbutton">
<button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="middle kinetic">
<h2 id="kinetic">Kinetic</h2>
<div class="guziki" id="guzikione">
<button onclick="document.getElementById('player').volume += 0.1">+</button>
</button>
<button class="playStop" id="one" onclick="document.getElementById('player').play()"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<button class="playStop" id="two" onclick="document.getElementById('player').pause()"><i class="fa fa-pause" aria-hidden="true"></i>
</button>
<button onclick="document.getElementById('player').volume -= 0.1">-</button>
</div>
</div>
<hr>
<div class="middle technofm">
<h2 id="technofm">techno.fm</h2>
<div class="guziki">
<button onclick="document.getElementById('player2').volume += 0.1">+</button>
</button>
<button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
<button class="playStop" id="one" onclick="document.getElementById('player2').play()"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<button class="playStop" id="two" onclick="document.getElementById('player2').pause()"><i class="fa fa-pause" aria-hidden="true"></i>
</button>
<button onclick="document.getElementById('player2').volume -= 0.1">-</button>
</div>
</div>
<hr>
<div class="middle">
<h2>uzic</h2>
</div>
<hr>
<div class="middle">
<h2>ballads fm 87,1</h2>
</div>
<hr>
<div class="middle">
<h2>maximum fm 142,2</h2>
</div>
<div class=bottom>
<h4>currently playing</h4>
</div>
</div>
EDIT: I thought it might be a codepen/firefox bug, but even if I run it from my computer, it still doesn't work only in Firefox.
The problem is not with jQuery. The button is so small that you aren't hitting it with your click.
Demo
#backbutton button {
position: absolute;
left: 300px;
min-width: 50px;
min-height: 50px;
background: pink;
}
This is caused by your chevron being repositioned outside the bounds of where Firefox was expecting the button. If you keep the chevron inside the button and position the button then it works.
.fa-chevron-left {
font-size: 30px;
padding-top: 10px;
cursor: pointer;
}
#backbutton {
display: none;
padding-top: 30px;
position:relative;
}
.back {
position: absolute;
left: 20px;
}
http://codepen.io/anon/pen/GjokQp

Categories

Resources