Remove card when clicked on confirm button - javascript

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

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

How to Make a Reversible animation

I Want to Make a Sliding animation when a button is pressed
And I Want to Ask That How can i bind the button to reverse animation in second click
First Click - Animation
Second Click - Reverse Animation
I Have Tried
function menu_open() {
document.querySelector('.drop_content').style.cssText = "display: block;";
document.querySelector('#menu_init').style.cssText = "display: none";
document.querySelector('#menu_final').style.cssText = "display: block";
}
function menu_close() {
document.getElementsByClassName("drop_content").style.cssText = ".drop_content {animation: drop_menu_slide 1s reverse;}";
document.getElementById("menu_init").cssText = "display: block;";
document.getElementById("menu_final").cssText = "display: none;";
}
#dropbutton {
font-size: 24px;
float: left;
padding: 8px 12px 9px 12px;
margin-left: 7px;
}
.drop_content {
display: none;
position: relative;
text-align: center;
margin: -5px 0px 0px 0px;
background-color: rgb(195, 195, 195);
padding: 18px;
min-width: 250px;
min-height: 100%;
text-align: center;
position: fixed;
border: 2px solid grey;
}
.dropbutton:focus {
animation: drop_menu_slide 1s reverse;
}
.drop_content {
animation: drop_menu_slide 1s forwards;
}
#keyframes drop_menu_slide {
from {
margin-left: -30%;
}
to {
margin-left: 0%;
}
}
.dropbutton .drop_content {
position: relative;
}
<div class="dropdown" style="float: left;">
<div style="margin-bottom: 18px;" onclick="menu_open()" id="menu_init">
<hr class="menu_line" id="menu1">
<hr class="menu_line" id="menu2">
<hr class="menu_line" id="menu3">
</div>
<div style="margin-bottom: 18px; display: none;" onclick="menu_close()" id="menu_final">
<hr class="menu_load">
</div>
<div class="drop_content">
<img style="float: left; margin: 0 0 0 40px;" src="icon.png" width="60" height="60">
<p style="text-align: center; font-style: normal; font-size: 25px; color: white; font-weight: bolder;">Code With Me</p>
<hr class="rounded"><br>
<a style="padding: 7px 152px 7px 152px" href="login()">Login</a><br><br>
<a style="padding: 7px 140px 7px 140px" href="signup()">Sign Up</a><br><br>
<hr class="rounded"><br>
<a style="padding: 7px 145px 7px 145px" href="logout()">Logout</a><br><br>
<hr class="rounded"><br>
<a style="padding: 7px 140px 7px 140px" target="_blank" href="https://www.youtube.com/codwithme">Youtube</a><br><br>
<a style="padding: 7px 128px 7px 128px" target="_blank" href="https://www.instagram.com/bhaveshbansiwal">Instagram</a><br><br>
<a style="padding: 7px 145px 7px 145px" href="bansiwalbhavesh#gmail.com">E-Mail</a><br><br>
<hr class="rounded"><br>
<a style="padding: 7px 123px 7px 123px" href="/Webpages/contact_us.html">Contact Me</a><br><br>
</div>
</div>
<button onclick="location.href='../index.html'" title="Home" id="home_button">Home</button>
<button onclick="location.href='/Webpages/contact_us.html'" title="Contact Me">Contact</button>
<button onclick="location.href='/Webpages/python.html'" title="Python Tutorials">Python</button>
<button onclick="location.href='/Webpages/html_tutorials.html'" title="HTML Tutorials">HTML</button>
<button onclick="location.href='/Webpages/gui.html'" title="GUI">GUI</button>
<button onclick="location.href='/Webpages/about.html'" title="About Us" style="margin-right: 10px;">About Me</button>
<br><br>
</div>
I Want to Bind the Button to Two Animation One When Animation and Other Of Reverse Animation to Same Button
Your HTML code is a mess. You should only use the style attribute in weird exceptions, and you should never ever style using float and <br>.
You animation didn't work because you can't animate elements that have display: none, so what I did was to just translate the menu to the side and then having it translate back whenever the menu is given the class .open.
Closing the menu should be done by a button or by clicking outside the drawer (preferably on a transparent backdrop), but I just added a simple click anywhere on the menu.
function menu_toggle() {
document.getElementById('drawer').classList.toggle("open");
document.getElementById('hamburger').classList.toggle("open");
}
:root {
--menu-animation-speed-close: 200ms;
--menu-animation-speed-open: 300ms;
}
#hamburger {
width: 1rem;
cursor: pointer;
transition: opacity var(--menu-animation-speed-close);
}
#hamburger.open {
opacity: 0;
transition: opacity var(--menu-animation-speed-close);
}
#hamburger > hr {
margin: 0.25rem 0px;
}
#drawer {
position: fixed;
transform: translateX(-100%);
top: 0px;
left: 0px;
transition: transform var(--menu-animation-speed-close);
padding: 1rem;
background-color: lightgray;
}
#drawer.open {
transform: translateX(0%);
transition: transform var(--menu-animation-speed-open);
}
#drawer > .close-button {
position: absolute;
top: 0.5rem;
right: 0.5rem;
cursor: pointer;
font-family: Arial;
}
nav > p.bottom-separator {
border-bottom: 1px solid black;
padding-bottom: 1rem;
}
<div class="dropdown">
<div onclick="menu_toggle()" id="hamburger">
<hr class="menu_line" id="menu1">
<hr class="menu_line" id="menu2">
<hr class="menu_line" id="menu3">
</div>
<nav onclick="menu_toggle()" id="drawer">
<div class="close-button">X</div>
<p class="bottom-separator">
<img src="icon.png" width="60" height="60">
Code With Me
</p>
<p>Login</p>
<p class="bottom-separator">Sign Up</p>
<p class="bottom-separator">Logout</p>
<p><a target="_blank" href="https://www.youtube.com/codwithme">Youtube</a></p>
<p><a target="_blank" href="https://www.instagram.com/bhaveshbansiwal">Instagram</a></p>
<p class="bottom-separator">E-Mail</p>
<p>Contact Me</p>
</nav>
</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>

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

How to create a button to every list item which opens a menu over it?

I am bulding a mobile responsive web page that looks like the "Play Market" from Android.
I have a list of divs which have a button inside them.
Each button opens a div with unique links.
how do I create something like this in an efficient way without positioning every div differently?
This is my JSfiddle: http://jsfiddle.net/e0byofe2/
I tried using the position: relative; property to the menu - it made a mess with the elements within the div.
I tried using position: absolute; which is ok, but I can't position the menu over each single div in a global way.
HTML:
<div class="main">
<div id="header-wrap">
<div id="header" class="clear">
<img src="arrow.jpg" />
<img src="search.jpg" style="float: right;" />
</div>
</div>
<div class="content">
<div id="apps-header">Apps</div>
<div class="line"></div>
<div class="apps">
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
<div style="width: 202px; height: 106px; border: 1px solid grey; position: relative; ">
</div>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
</div>
</div>
</div>
CSS:
body{
margin: 0;
height: 100%;
}
.main{
overflow-x: hidden;
width: 100%;
height: 100%;
}
#header-wrap {
width: 100%;
position: fixed;
background-color: #689f38;
height: 62px;
}
#header {
width: 100%;
position: absolute;
bottom: 0;
box-shadow: 0px 0px 19px rgb(10, 29, 90);
-webkit-box-shadow: 0px 0px 19px rgb(10, 29, 90);
-moz-box-shadow: 0px 0px 19px rgb(10, 29, 90);
}
.content{
padding-top: 80px;
width: 100%;
/*height: 100%;*/
background-color: #eeeeee;
}
#apps-header{
margin-left: 10px;
font-family: arial;
background-image: url('triangle.png');
background-position: bottom;
width: 86px;
background-repeat: no-repeat;
background-size: 10px;
}
.line{
width: 100%;
height: 2px;
background-color: #458b09;
margin-top: 10px;
}
.apps{
width: 100%;
/*border: 1px solid black;*/
padding-top: 10px;
height: 100%;
}
.app{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0px 0px 6px rgb(145, 145, 145);
-webkit-box-shadow: 0px 0px 6px rgb(145, 145, 145);
-moz-box-shadow: 0px 0px 6px rgb(145, 145, 145);
background-color: #fafafa;
padding: 10px 8px;
margin: 5px 8px;
display: inline-table; /******/
}
.app_icon{
width: 83px;
height: 83px;
float: left;
}
.app_info{
/*border: 1px solid red;*/
float: left;
width: 210px;
height: 81px;
padding-left: 20px;
}
.app_name{
font-family: arial;
font-size: 18px;
}
.app_comp{
font-family: arial;
font-size: 16px;
color: #595959;
}
.stars img{
float: left;
width: 14px;
height: 14px;
}
.free{
color: #69a03a;
font-family: arial;
position: relative;
bottom: -25px;
left: 105px;
font-size: 14px;
}
.3dots{
height: 25px;
}
The best example I can give you is when you open the "Play Market" on your Android and search for a random app, you get a bunch of app div results. When clicking the 3 dots on the top-right corner - it opens a list with 2 items over the specific apps div.
It should look like this:
When you choose an other app and press the 3 dots in the corner, you get the same list with 2 option, but over the apps div.
I've changed your structure little bit and made the 'dots' image as a button of the menu with jquery
HTML:
<img src="3dots.png" class="dots"/>
<div class="dots_menu">
link 1
link 2
</div>
CSS:
.app
{
position: relative;
}
.dots
{
float: right;
}
.dots_menu
{
display: none;
width: 202px;
position: absolute;
top: 35px;
right: 0;
z-index: 1;
background: rgb(238, 238, 238);
-webkit-box-shadow: 0px 4px 15px #000;
-moz-box-shadow: 0px 4px 15px #000;
box-shadow: 0px 4px 15px #000;
}
.dots_menu.show
{
display: block;
}
.dots_menu a
{
display: block;
text-decoration: none;
color: #000;
padding: 10px;
}
JQuery:
$(document).ready(function(){
$('.dots').click(function(){
$('.dots_menu').removeClass('show');
$(this).next().addClass('show');
});
});
example: http://jsfiddle.net/e0byofe2/3/
is that what you are looking for?

Categories

Resources