would you know, how to create notifications which are displayed under the notification bell without using fixed position? I would like to have something clean and resposive if possible. Thank you very much
const bell = document.querySelector("#bell");
const notifications = document.querySelector('#notifications');
const alertBtn = document.querySelector(".active-alert")
bell.addEventListener("click", () => {
alertBtn.style.color =
"white";
notifications.innerHTML += ` <div class="member">
<li>
<span>Notifaction 1</span>
</li> </div> <div class="member">
<li>
<span>Notifaction 2</span>
</li> </div>`;
});
.member {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: auto;
text-align: center;
background-color: darkgrey;
}
#notifications {
position: fixed;
width: 50%;
top: 70px;
right: 0px;
}
<header>
<div class="header">
<div class="logo">
<h1>YourApp™</h1>
</div>
<div class="userProfile">
<div class="bell">
<img id="bell" src="icons/icon-bell.svg" alt="notifications" height="30" width="30" />
<p class="active-alert">●</p>
<ul id="notifications"></ul>
</div>
<div class="user">
<img src="images/member-1.jpg" alt="Image of member 1" title="image_user_1">
<p>Member 1</p>
</div>
</div>
</div>
</header>
See below. Changes documented in the source code. Hope this helps.
const bell = document.querySelector("#bell");
const notifications = document.querySelector('#notifications');
const alertBtn = document.querySelector(".active-alert")
bell.addEventListener("click", () => {
/* alertBtn.style.color = "white"; Removed */
/* Hide button */
alertBtn.style.display = "none";
notifications.innerHTML += ` <div class="member">
<li>
<span>Notifaction 1</span>
</li> </div> <div class="member">
<li>
<span>Notifaction 2</span>
</li> </div>`;
});
.member {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: auto;
text-align: center;
background-color: darkgrey;
}
#notifications {
/* position: fixed; Removed */
width: 50%;
/* top: 70px; Removed */
/* right: 0px; Removed */
padding: 0; /* Added */
margin-top: 0 /* Added */
}
/* Added */
.bell {
display: flex;
flex-direction: column;
}
<header>
<div class="header">
<div class="logo">
<h1>YourApp™</h1>
</div>
<div class="userProfile">
<div class="bell">
<img id="bell" src="icons/icon-bell.svg" alt="notifications" height="30" width="30" />
<p class="active-alert">●</p>
<ul id="notifications"></ul>
</div>
<div class="user">
<img src="images/member-1.jpg" alt="Image of member 1" title="image_user_1">
<p>Member 1</p>
</div>
</div>
</div>
</header>
Related
Created shopping cart using html classes and added functionalities to them using javascript and now i wanted to save the cart details like product name, price,total to phpmysql database
I have written the code in php for connecting my shopping cart with database but its not working
--html page
<html>
<head>
<title>Fruits & Vegetables</title>
<link rel="stylesheet"type="text/css"href="FVc.css">
</head>
<body>
<Style>body {background-image: url('image1.jpg');background-repeat: no-repeat;backgroung-attachment:fixed;background-size:cover;}</style><div class="container">
<div class="screen-togo">
<h2>To Go Menu</h2>
<ul class="menu-items">
<!-- Menu Item 1 -->
<li class="menu-item">
<img src="potato.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">potato</p>
<p class="g-price">RS 30</p>
</div>
<button
class="add-button"
data-title="potato"
data-price="30">Add to Cart</button>
</li>
<!-- Menu Item 2 -->
<li class="menu-item">
<img src="onion.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">onion</p>
<p class="g-price">RS 40</p>
</div>
<button
class="add-button"
data-title="onion"
data-price="40">Add to Cart</button>
</li>
<!-- Menu Item 3 -->
<li class="menu-item">
<img src="capsicum.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">capsicum</p>
<p class="g-price">RS 20</p>
</div>
<button
class="add-button"
data-title="capsicum"
data-price="20">Add to Cart</button>
</li>
<!-- Menu Item 4 -->
<li class="menu-item">
<img src="brinjal.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">brinjal</p>
<p class="g-price">RS 15</p>
</div>
<button
class="add-button"
data-title="brinjal"
data-price="15"
>Add to Cart</button>
</li>
<!-- Menu Item 5 -->
<li class="menu-item">
<img src="tomato.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">tomato</p>
<p class="g-price">RS 50</p>
</div>
<button
class="add-button"
data-title="tomato"
data-price="50">Add to Cart</button>
</li>
<!-- Menu Item 6 -->
<li class="menu-item">
<img src="apple.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">apple</p>
<p class="g-price">RS 200</p>
</div>
<button
class="add-button"
data-title="apple"
data-price="200">Add to Cart</button>
</li>
<!-- Menu Item 7 -->
<li class="menu-item">
<img src="banana.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">banana</p>
<p class="g-price">RS 120</p>
</div>
<button
class="add-button"
data-title="banana"
data-price="120">Add to Cart</button>
</li>
<!-- Menu Item 8 -->
<li class="menu-item">
<img src="pomegrenate.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">pomegrenate</p>
<p class="g-price">RS 300</p>
</div>
<button
class="add-button"
data-title="pomegrenate"
data-price="300">Add to Cart</button>
</li>
<!-- Menu Item 9 -->
<li class="menu-item">
<img src="guava.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">guava</p>
<p class="g-price">RS 80</p>
</div>
<button
class="add-button"
data-title="guava"
data-price=" 80">Add to Cart</button>
</li>
<!-- Menu Item 10 -->
<li class="menu-item">
<img src="mango.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">mango</p>
<p class="g-price">RS 60</p>
</div>
<button
class="add-button"
data-title="mango"
data-price="60">Add to Cart</button>
</li>
<!-- Menu Item 11 -->
<li class="menu-item">
<img src="grapes.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">grapes</p>
<p class="g-price">RS 40</p>
</div>
<button
class="add-button"
data-title="grapes"
data-price="40">Add to Cart</button>
</li>
<!-- Menu Item 12 -->
<li class="menu-item">
<img src="papapya.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">papapya</p>
<p class="g-price">RS 55</p>
</div>
<button
class="add-button"
data-title="papapya"
data-price="55">Add to Cart</button>
</li>
</div>
<div class="screen-cart">
<h2>Your Cart</h2>
<!-- Cart Items -->
<ul class="cart-items">
</ul>
<div class="cart-math">
<p>Add items to cart</p>
</div>
<b>Back</b>
<button style="background-color:#87CEFA" align =right>OrderNow</button>
</div>
</div>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js></script>
<script src="Fruits.js"></script>
</body>
</html>
--css code
body {
background-image: url('../img/background.webp');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
font-family: "Poppins", sans-serif;
}
h2, .g-price {
font-size: 32px;
font-weight: 700;
margin-bottom: 50px;
}
.g-price {
margin: 8px 0;
}
.container {
width: 90%;
max-width: 780px;
margin: 0 auto;
padding: 70px 0;
display: flex;
justify-content: space-between;
}
#media (max-width: 950px) {
.container {
display: block;
}
}
.screen-togo, .screen-cart {
width: 375px;
max-height: 750px;
overflow: scroll;
border-radius: 25px;
background: white;
padding-top: 30px;
padding-left: 30px;
margin: 20px;
box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.1);
}
ul {
padding: 0;
list-style: none;
}
.menu-item {
background: #E4F0FD;
border-radius: 20px 0 0 20px;
margin: 30px 0;
padding-top: 15px;
padding-right: 30px;
padding-bottom: 10px;
position: relative;
}
.menu-item:nth-child(2n) {
background: #FBE4F0;
}
.menu-item:nth-child(3n) {
background: #F7F7FE;
}
.menu-item:nth-child(4n) {
background: #E4FDF1;
}
.menu-item img {
width: 150px;
position: absolute;
top: -20px;
left: -20px;
}
.menu-item .add-button {
position: absolute;
border: none;
background: #6B00F5;
padding: 6px 20px 4px;
border-radius: 20px;
color: white;
font-weight: 700;
font-size: 16px;
bottom: -10px;
left: 150px;
transition: all 0.3s;
}
.menu-item .add-button:hover {
background: #5815AE;
}
.menu-item-dets {
margin-left: 150px;
padding-bottom: 15px;
}
.menu-item-heading {
font-size: 18px;
margin: 10px 0 12px;
}
.screen-cart {
padding-right: 30px;
}
#keyframes fadeIn {
from {
opacity: 0;
transform: translate(10px);
}
to {
opacity: 1;
transform: translate(0);
}
}
.cart-item {
display: flex;
align-items: flex-start;
padding-bottom: 25px;
margin-bottom: 25px;
border-bottom: 1px solid #D7D7F9;
animation: fadeIn 0.3s;
}
.cart-item:last-child {
border-bottom: 5px solid #D7D7F9;
}
.cart-item img {
width: 30px;
}
.cart-item .g-price {
font-size: 24px;
}
.cart-item-dets {
margin-left: 15px;
width: 100%;
}
.cart-item-heading {
margin: 10px 0;
}
.cart-math-item {
margin: 5px 0;
font-weight: 700;
}
.cart-math-item span {
display: inline-block;
text-align: right;
}
.cart-math-item .cart-math-header {
width: 50%;
}
.cart-math-item .g-price {
width: 40%;
}
--javascript code
let subtotal = 0;
const calculateTax = subtotal => {
const tax = subtotal * 0.13;
const formattedTax = tax.toFixed(2);
return formattedTax;
};
const calculateTotal = subtotal => {
const tax = calculateTax(subtotal);
const total = parseFloat(subtotal) + parseFloat(tax);
const formattedTotal = total.toFixed(2);
return formattedTotal;
};
const getImgLink = title => {
let imgLink;
switch (title) {
case 'potato':
imgLink = 'potato.jpg';
break;
case 'onion':
imgLink = 'onion.jpg';
break;
case 'capsicum':
imgLink = 'capsicum.jpg';
break;
case 'brinjal':
imgLink = 'brinjal.jpg';
break;
case 'tomato':
imgLink = 'tomato.jpg';
break;
case 'apple':
imgLink = 'apple.jpg';
break;
case 'banana':
imgLink = 'banana.jpg';
break;
case 'mango':
imgLink = 'mango.jpg';
break;
case 'pomegrenate':
imgLink = 'pomegrenate.jpg';
break;
case 'guava':
imgLink = 'guava.jpg';
break;
case 'grapes':
imgLink = 'grapes.jpg';
break;
case 'papapya':
imgLink = 'papapya.jpg';
break;
default:
imgLink = 'potato.jpg';}
return imgLink;
};
$('.add-button').on('click', function () {
const title = $(this).data('title');
const price = $(this).data('price');
const imgLink = getImgLink(title);
const element = `
<li name=cart class="cart-item">
<img src="${imgLink}" alt="${title}">
<div class="cart-item-dets">
<p class="cart-item-heading">${title}</p>
<p class="g-price">Rs${price}</p>
</div>
</li>
`;
$('.cart-items').append(element);
subtotal = subtotal + price;
const formattedSubtotal = subtotal.toFixed(2);
const tax = calculateTax(subtotal);
const total = calculateTotal(subtotal);
$('.cart-math').html(`
<p class="cart-math-item">
<span class="cart-math-header">Subtotal:</span>
<span class="g-price subtotal">${formattedSubtotal}</span>
</p>
<p class="cart-math-item">
<span class="cart-math-header">Tax:</span>
<span class="g-price tax">${tax}</span>
</p>
<p class="cart-math-item">
<span class="cart-math-header">Total:</span>
<span class="g-price total">Rs${total}</span>
</p>
`);
});
--php code
<?php
session_start();
$host="localhost";
$user="root";
$password="abc";
$db_name="gsd";
$con = mysqli_connect($host, $user, $password, $db_name);
$LoginId=$_SESSION['id'];
$Category=$_GET['id'];
$TotalAmt = "10";
$NoItem = "2";
echo $LoginId;
echo $Category;
if($_POST['OrderNow'])
{
echo "T";
echo $s="insert into MyOrder(LoginId,Category,TotalAmt,NoItem)values('$LoginId','$Category','$TotalAmt','$NoItem')";
echo"Order Placed Successfull";
header('Refresh:50; URL=http://localhost/consumer_dashboard.php');
if (mysqli_query($con,$s)){
echo"data inserted";
}
else{
echo"error";}
}
?>
Use an AJAX request to send the cart data to the server.
You'll need to do some JSON encoding/decoding in your JS and PHP on the data.
Should be enough to get you started.
I want to ask something about CSS transition to display: none. Currently, I'm using the reference of impressivewebs https://www.impressivewebs.com/animate-display-block-none/ , but I reversed the JavaScript which it should be hidden, but I showed it. You can see it in my snippet result, so when the tab is clicked and should be active but then it fades out.
var ready = (callback) => {
if (document.readyState != "loading") callback();
else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => {
if(window.angular) return;
document.querySelectorAll('.tab:first-child').forEach( first => {
first.classList.add('active');
})
document.querySelectorAll('.content-item:first-child').forEach( first => {
first.classList.add('active');
})
})
window.addEventListener('DOMContentLoaded', ()=> {
let tabs = document.querySelectorAll('.tab');
let content = document.querySelectorAll('.content-item');
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', () => tabClick(i));
}
function tabClick(currentTab) {
removeActive();
tabs[currentTab].classList.add('active');
content[currentTab].classList.add('active');
setTimeout(function () { //Added
content[currentTab].classList.add('show'); //Added
}, 50); //Added
iframe = content[currentTab].querySelector('iframe');
iframe.setAttribute('src', iframe.getAttribute('data-src'));
}
function removeActive() {
for (let i = 0; i < tabs.length; i++) {
tabs[i].classList.remove('active');
content[i].classList.remove('show'); //Changed
content[i].addEventListener('transitionend',function(e) { //Added
content[i].classList.remove('active'); //Changed & Added
});
iframe = content[i].querySelector('iframe');
iframe.removeAttribute('src');
}
}
})
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: top;
align-items: center;
flex-direction: column;
}
.tabs {
display: flex;
justify-content: center;
width: 100%;
}
.tab {
font-size: 16px;
padding: 5px 15px;
cursor: pointer;
}
.tab.active {
background-color: rgb(250, 97, 9);
}
.content {
width: 100vw;
margin-top: 50px;
height: 100vh;
}
.content-item {
display: none;
padding: 0px;
border: none;
}
.content-item.active {
display: flex;
border: none;
justify-content: center;
height: 100%;
transition: 2.5s ease-in-out all;
}
.show {
opacity: 0;
}
.content-iframe {
border: none;
padding: 0px;
margin: 0px;
width: 100vw;
height: 50vh;
}
<div class="container">
<div class="tabs">
<div class="tab">Tokyo</div>
<div class="tab">Paris</div>
<div class="tab">Washington</div>
<div class="tab">Jakarta</div>
<div class="tab">London</div>
</div>
<div class="content">
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Paris" src="https://en.wikipedia.org/wiki/Paris" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Washington" src="https://en.wikipedia.org/wiki/Washington" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Jakarta" src="https://en.wikipedia.org/wiki/Jakarta" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/London" src="https://en.wikipedia.org/wiki/London" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
so i have read your reference and made changes.
it says when
When the element is invisible, first make it display: block, then
(while it’s still visually hidden, but existing on the page), animate
the opacity.
function tabClick(currentTab) {
let prevt = document.querySelectorAll('.tab-active')[0];
let prevc = document.querySelectorAll('.content-active')[0];
prevc.classList.remove('content-active');
prevc.classList.add('visuallyhidden');
prevt.classList.remove('tab-active');
tabs[currentTab].classList.add('tab-active');
content[currentTab].classList.add('content-active');
setTimeout(function () { //Added
content[currentTab].classList.remove('visuallyhidden'); //Added
}, 50); //Added
}
in tabClick we get the clicked item index, initially all div will be hiddden,visuallyhidden expect first div(Tokyo).
when click trigger we will get active tab, and active content. remove or hide previously active tab and content.
now at time of showing element, make it display flex by adding content-active and than add transition by removing visuallyhidden class.
var ready = (callback) => {
if (document.readyState != "loading") callback();
else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => {
if(window.angular) return;
document.querySelectorAll('.tab:first-child').forEach( first => {
first.classList.add('tab-active');
})
document.querySelectorAll('.hidden:first-child').forEach( first => {
first.classList.remove('visuallyhidden');
first.classList.add('content-active');
})
})
window.addEventListener('DOMContentLoaded', ()=> {
let tabs = document.querySelectorAll('.tab');
let content = document.querySelectorAll('.hidden');
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', () => tabClick(i));
}
function tabClick(currentTab) {
let prevt = document.querySelectorAll('.tab-active')[0];
let prevc = document.querySelectorAll('.content-active')[0];
prevc.classList.remove('content-active');
prevc.classList.add('visuallyhidden');
prevt.classList.remove('tab-active');
tabs[currentTab].classList.add('tab-active');
content[currentTab].classList.add('content-active');
setTimeout(function () { //Added
content[currentTab].classList.remove('visuallyhidden'); //Added
}, 50); //Added
}
})
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: top;
align-items: center;
flex-direction: column;
}
.tabs {
display: flex;
justify-content: center;
width: 100%;
}
.tab {
font-size: 16px;
padding: 5px 15px;
cursor: pointer;
}
.tab-active {
background-color: rgb(250, 97, 9);
}
.content {
width: 100vw;
margin-top: 50px;
height: 100vh;
}
.hidden {
display: none;
padding: 0px;
border: none;
}
.content-active {
display: flex;
border: none;
justify-content: center;
height: 100%;
transition: 2.5s ease-in-out all;
}
.visuallyhidden {
opacity: 0;
}
.content-iframe {
border: none;
padding: 0px;
margin: 0px;
width: 100vw;
height: 50vh;
}
<div class="container">
<div class="tabs">
<div class="tab">Tokyo</div>
<div class="tab">Paris</div>
<div class="tab">Washington</div>
<div class="tab">Jakarta</div>
<div class="tab">London</div>
</div>
<div class="content">
<div class="hidden visuallyhidden">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="hidden visuallyhidden">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Paris" src="https://en.wikipedia.org/wiki/Paris" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="hidden visuallyhidden">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Washington" src="https://en.wikipedia.org/wiki/Washington" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="hidden visuallyhidden">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Jakarta" src="https://en.wikipedia.org/wiki/Jakarta" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="hidden visuallyhidden">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/London" src="https://en.wikipedia.org/wiki/London" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
This question already has an answer here:
javascript setAttribute style
(1 answer)
Closed 3 years ago.
I am trying to place an svg over an image using javascript. However, the position:relative style isn't working. I think it might be due to the style getting overwritten by the style sheet. Is there something im missing?
function button() {
var evenPic = document.querySelectorAll("#userList li:nth-child(even) .avatar");
for (var i = 0; i < evenPic.length; i++) {
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "100");
svg.setAttribute("height", "100");
svg.setAttribute("position", "absolute");
svg.setAttribute("top", "0");
svg.setAttribute("left", "0");
svg.setAttribute("fill", "yellow");
svg.setAttribute("opacity", "0.5");
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "30");
circle.setAttribute("cy", "45");
circle.setAttribute("r", "31");
svg.appendChild(circle);
evenPic[i].appendChild(svg);
}
}
#container {
max-width: 400px;
}
header {
text-transform: uppercase;
padding-left: 7%
}
ol {
list-style: none;
}
ol li {
max-width: 400px;
}
.user {
margin: 20px;
padding-left: 20%;
font-family: arial;
}
.name {
/*font-weight: bold;*/
font-size: 120%;
margin-bottom: 10px;
}
.status {
font-size: 110%;
/*font-weight: bold;*/
margin-bottom: 10px;
}
.avatar {
position: relative;
}
.avatar img {
width: 17%;
padding-top: 4%;
float: left;
}
<div id="container">
<header>
Recent Conversations
</header>
<ol id="userList">
<li>
<div class="avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class="user">
<div class="name">
Finn
</div>
<div class="status">
I'm a big deal
</div>
<div class="message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class="avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class="user">
<div class="name">
Finn
</div>
<div class="status">
I'm a big deal
</div>
<div class="message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class="avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class="user">
<div class="name">
Finn
</div>
<div class="status">
I'm a big deal
</div>
<div class="message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
</ol>
<div id="buttons">
<button id="btn" onclick="button()">Button</button>
</div>
</div>
With this code, the svg image is created next to the avatar. Is there a way to create it on top of the avatar?
svg.setAttribute("position", "absolute");
position isn't an HTML or SVG attribute, it is a CSS property
svg.style.position = "absolute";
Simply add this CSS to .avatar svg :
position: absolute;
left: 0;
Since position: relative is set on your avatar, your SVG will be placed over it.
You could actually do this using CSS only instead of an SVG (simply by creating a yellow circle and placing it over it using the code below) :
<!DOCTYPE html>
<html>
<head>
<style>
#container {
max-width: 400px;
}
header {
text-transform: uppercase;
padding-left: 7%
}
ol {
list-style: none;
}
ol li {
max-width: 400px;
}
.user {
margin: 20px;
padding-left: 20%;
font-family:arial;
}
.name {
/*font-weight: bold;*/
font-size: 120%;
margin-bottom: 10px;
}
.status {
font-size: 110%;
/*font-weight: bold;*/
margin-bottom: 10px;
}
.avatar {
position:relative;
}
.avatar:after {
content: "";
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
background: yellow;
/* Using the same width and float as your image */
/* Forced to set a height using pixels since its parent has no height */
float: left;
width: 17%;
margin-top: 4%;
height: 62px;
opacity: 0;
transition: opacity 300ms;
}
.avatar.active:after {
opacity: 0.5;
}
.avatar img {
width: 17%;
padding-top:4%;
float: left;
}
</style>
</head>
<body>
<div id = "container">
<header>
Recent Conversations
</header>
<ol id = "userList">
<li>
<div class = "avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class = "user">
<div class = "name">
Finn
</div>
<div class = "status">
I'm a big deal
</div>
<div class = "message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class = "avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class = "user">
<div class = "name">
Finn
</div>
<div class = "status">
I'm a big deal
</div>
<div class = "message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class = "avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class = "user">
<div class = "name">
Finn
</div>
<div class = "status">
I'm a big deal
</div>
<div class = "message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
</ol>
<div id = "buttons">
<button id="btn" onclick="button()">Button</button>
</div>
</div>
</body>
<script>
function button(){
var evenPic = document.querySelectorAll("#userList li:nth-child(even) .avatar");
for(var i=0; i<evenPic.length; i++){
evenPic[i].classList.add("active");
}
}
</script>
</html>
What I'm trying to do
Alright so I basically want the div with the class js-op to pop up under each of the icons that are clicked on my side bar. Right now all I have is whenever a user clicks on the icons a popup well pops up.
What I'm trying to do
Ok so I ran though all the icons using a for loop, so that its being watched for any clicked actions. Im new to javascript so I think this is a huge accomplishment! Now Im a bit stuck, basically now I just want javascript to add the class .js-display found on the last line (.css) to the class js-op, respectfully. Meaning under each icon there is a div that has that class. (It is set to display:none) When that icon is clicked that div right under it will get the .js-display so that it becomes visible. I am essentially creating dynamic popup menus.
Extra
Im gonna end up asking later
Ok so this icon is clicked right? A panel displays, but the user decides to click on another icon. Is it possible to have the first panel that was displayed first, disappear?
Thank you
Again thank you!
Now if Im not suppose to have the extra thing in here please tell me, before down voting( I heard stack can be a little harsh) Im not sure, I feel like its still relevant to the main question.
js
var pop_action = document.getElementById("js-uX-pop_up").getElementsByClassName("uX-nv-spn ");
var pop_panel = document.getElementsByClassName("js-op");
for(e_op = 0; e_op < pop_action.length; e_op++ ){
pop_action[e_op].addEventListener("click", activate_eop);
}
function activate_eop(){
alert("hello");
}
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="..\XSystem.css">
<meta charset="utf-8" />
<title>Xlaeo</title>
</head>
<body>
<!-- section that holds mains -->
<div class="xU-wper xU-flex-1-1">
<!-- section holds two sends -->
<section class="xU-flex uX-maon-wper">
<!-- BEGIN LEFT: bar -->
<section class="uX-maon-sc xU-white">
<div class="uX-fluid ">
<span class="uX-bar-modules-wper">
<!-- modules for side bar -->
<!-- BEGIN Image company -->
<div class="uX-company-img">
<span>
<img src="http://icons.iconarchive.com/icons/icons-land/vista-hardware-devices/96/Motherboard-icon.png"/>
</span>
</div>
<!-- end image -->
<!-- BEGIN side bar list-->
<div class="uX-list-modules uX-them-pd">
<span class="uX-side-nav " id="js-uX-pop_up" role="navigation">
<li >
<span class="uX-nv-spn">
<a>
<i class="fab fa-d-and-d"></i>
</a>
</span>
<!-- POPUP -->
<div class="js-op" style="display:none">
<section>
pop up
</section>
</div>
</li>
<li >
<span class="uX-nv-spn">
<i class="fab fa-mandalorian"></i>
</span>
<!-- POPUP -->
<div class="js-op" style="display:none">
<section>
pop up2
</section>
</div>
</li>
<li>
<span class="uX-nv-spn">
<i class="fab fa-snapchat-ghost"></i>
</span>
<!-- POPUP -->
<div class="" style="display:none">
<section>
pop up
</section>
</div>
</li>
<li >
<span class="uX-nv-spn ">
<i class="fas fa-handshake"></i>
</span>
<!-- POPUP -->
<div class="" style="display:none">
<section>
pop up
</section>
</div>
</li>
<li>
<span class="uX-nv-spn">
<i class="fab fa-java"></i>
</span>
<!-- POPUP -->
<div class="uX_popU" style="display:none">
<section>
pop up
</section>
</div>
</li>
</span>
</div>
<!-- end side bar list-->
<!-- profile image -->
<div class="">
<a>
<span class="uX-items-center">
<div class="uX_profile-img-wper">
<img src="https://cdn.imaginetricks.com/wp-content/uploads/2017/08/Wonderful-Cute-Girls-Profile-Picture.jpg"/>
</div>
<span>Emma</span>
</span>
</a>
</div>
<!-- end proifle image -->
</span>
</div>
</section>
<!-- END LEFT: bar -->
<!-- BEGIN RIGHT: bar -->
<section class="uX-maon-sc uX-maon-sc2">
content
</section>
<!-- END RIGHT: bar -->
</section>
</div>
<script type="text/javascript" src="../Js-script/mod-up.js"></script>
</body>
</html>
Css
.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li, html,
body, .uX-maon-sc, .uX-items-center, .uX-side-nav {
display: flex;
flex-flow: column; }
.xU-flex, .uX-side-nav {
display: flex; }
.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li {
flex: 1 1 auto; }
.uX-side-nav li {
justify-content: center; }
.uX_profile-img-wper {
border-radius: 100%;
overflow: hidden; }
.xU-font, .uX-side-nav .uX-nv-spn {
font-size: 1.4rem;
color: #c62f09; }
.uX-side-nav .uX-nv-spn:hover {
background: lightgray; }
.uX-side-nav .uX-nv-spn:hover {
border-radius: 100%; }
.uX-side-nav .uX-nv-spn {
height: 2.2rem;
width: 2.2rem;
display: flex;
justify-content: center;
align-items: center; }
body {
background: #f4f4f4; }
body li {
list-style-type: none; }
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; }
.xU-white {
background: white; }
img {
width: 100%;
height: 100%; }
.uX-maon-wper, .uX-maon-sc2 {
flex: 1 1 auto; }
.uX_profile-img-wper {
height: 4rem;
width: 4rem; }
.uX-items-center {
align-items: center; }
.uX-bar-modules-wper .uX-company-img {
width: 4.5rem;
border-bottom: 1px solid lightgray; }
.uX-bar-modules-wper .uX-list-modules {
padding: 0.4rem; }
.uX-side-nav {
align-items: center;
flex: 1 1 auto; }
.uX-side-nav li {
height: 100%; }
.uX-side-nav .uX-nv-spn {
padding: 0.4rem;
border-radius: 100%; }
.uX-list-modules {
border-right: 1px solid #c62f09; }
.js-display {
display: block; }
/*# sourceMappingURL=XSystem.css.map */
Your code is missing 'js-op' classes on all of the elements. Also, inline styles always override class/id styles, therefore you need to change
.js-display {display: block;}
to
.js-display {display: block !important;}
or it won't work.
You also didn't provide any JS here, so I had to just make it up, but you get the idea. This should do it:
document.querySelectorAll('.uX-side-nav li').forEach((el)=>{
el.addEventListener('click', (e)=>{
document.querySelectorAll('.js-op').forEach((x)=>{x.classList.remove('js-display');});
e.target.closest('li').querySelector('.js-op').classList.add('js-display');
});
});
.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li, html,
body, .uX-maon-sc, .uX-items-center, .uX-side-nav {
display: flex;
flex-flow: column; }
.xU-flex, .uX-side-nav {
display: flex; }
.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li {
flex: 1 1 auto; }
.uX-side-nav li {
justify-content: center; }
.uX_profile-img-wper {
border-radius: 100%;
overflow: hidden; }
.xU-font, .uX-side-nav .uX-nv-spn {
font-size: 1.4rem;
color: #c62f09; }
.uX-side-nav .uX-nv-spn:hover {
background: lightgray; }
.uX-side-nav .uX-nv-spn:hover {
border-radius: 100%; }
.uX-side-nav .uX-nv-spn {
height: 2.2rem;
width: 2.2rem;
display: flex;
justify-content: center;
align-items: center; }
body {
background: #f4f4f4; }
body li {
list-style-type: none; }
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; }
.xU-white {
background: white; }
img {
width: 100%;
height: 100%; }
.uX-maon-wper, .uX-maon-sc2 {
flex: 1 1 auto; }
.uX_profile-img-wper {
height: 4rem;
width: 4rem; }
.uX-items-center {
align-items: center; }
.uX-bar-modules-wper .uX-company-img {
width: 4.5rem;
border-bottom: 1px solid lightgray; }
.uX-bar-modules-wper .uX-list-modules {
padding: 0.4rem; }
.uX-side-nav {
align-items: center;
flex: 1 1 auto; }
.uX-side-nav li {
height: 100%; }
.uX-side-nav .uX-nv-spn {
padding: 0.4rem;
border-radius: 100%; }
.uX-list-modules {
border-right: 1px solid #c62f09; }
.js-display {
display: block !important; }
/*# sourceMappingURL=XSystem.css.map */
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="..\XSystem.css">
<meta charset="utf-8" />
<title>Xlaeo</title>
</head>
<body>
<!-- section that holds mains -->
<div class="xU-wper xU-flex-1-1">
<!-- section holds two sends -->
<section class="xU-flex uX-maon-wper">
<!-- BEGIN LEFT: bar -->
<section class="uX-maon-sc xU-white">
<div class="uX-fluid ">
<span class="uX-bar-modules-wper">
<!-- modules for side bar -->
<!-- BEGIN Image company -->
<div class="uX-company-img">
<span>
<img src="http://icons.iconarchive.com/icons/icons-land/vista-hardware-devices/96/Motherboard-icon.png"/>
</span>
</div>
<!-- end image -->
<!-- BEGIN side bar list-->
<div class="uX-list-modules uX-them-pd">
<span class="uX-side-nav " id="js-uX-pop_up" role="navigation">
<li>
<span class="uX-nv-spn">
<i class="fab fa-d-and-d"></i>
</span>
<div class="js-op" style="display:none">
<section>
pop up1
</section>
</div>
</li>
<li>
<span class="uX-nv-spn">
<i class="fab fa-mandalorian"></i>
</span>
<div class="js-op" style="display:none">
<section>
pop up2
</section>
</div>
</li>
<li>
<span class="uX-nv-spn">
<i class="fab fa-snapchat-ghost"></i>
</span>
<div class="js-op" style="display:none">
<section>
pop up3
</section>
</div>
</li>
<li>
<span class="uX-nv-spn ">
<i class="fas fa-handshake"></i>
</span>
<div class="js-op" style="display:none">
<section>
pop up4
</section>
</div>
</li>
<li>
<span class="uX-nv-spn">
<i class="fab fa-java"></i>
</span>
<div class="js-op" style="display:none">
<section>
pop up5
</section>
</div>
</li>
</span>
</div>
<!-- end side bar list-->
<!-- profile image -->
<div class="">
<a>
<span class="uX-items-center">
<div class="uX_profile-img-wper">
<img src="https://cdn.imaginetricks.com/wp-content/uploads/2017/08/Wonderful-Cute-Girls-Profile-Picture.jpg"/>
</div>
<span>Emma</span>
</span>
</a>
</div>
<!-- end proifle image -->
</span>
</div>
</section>
<!-- END LEFT: bar -->
<!-- BEGIN RIGHT: bar -->
<section class="uX-maon-sc uX-maon-sc2">
content
</section>
<!-- END RIGHT: bar -->
</section>
</div>
<script type="text/javascript" src="../Js-script/mod-up.js"></script>
</body>
</html>
When I use Material Box from Materialize along with Muuri grid items, the maximized Material Box will still display behind the subsequent Muuri grid items even though the Material Box's z-index is set high.
Here's my plunker example https://plnkr.co/edit/aM2427AEwuWIqV3N9GvE/.
In the example, if you click on box three it appears to work, but if you click on boxes one and two you will see that they will still have the other boxes overlapping them.
Here's the CSS:
.grid {
position: relative;
}
.item {
display: block;
position: absolute;
}
.item-content {
position: relative;
width: 100%;
height: 100%;
}
Here's the HTML:
<div class="grid">
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/ffab91/?text=one" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/90caf9?text=two" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/80cbc4/?text=three" />
</div>
</div>
</div>
Here's the JavaScript:
$(function() {
var grid = new Muuri('.grid');
});
I just created a new example from your code and it's working fine. Hope this will help!
here is the link to that example MUURI EXAMPLE
code:
HTML
<div class="grid">
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/ffab91/?text=one" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/90caf9?text=two" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/80cbc4/?text=three" />
</div>
</div>
</div>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
background: #fcfaf9;
}
.grid {
position: relative;
}
.item {
display: block;
position: absolute;
height: 200px;
width: 200px;
line-height: 200px;
margin: 5px;
text-align: center;
z-index: 1;
}
.item.muuri-item-dragging {
z-index: 3;
}
.item.muuri-item-releasing {
z-index: 2;
}
.item.muuri-item-hidden {
z-index: 0;
}
.item-content {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
color: #fff;
background: #59687d;
font-size: 40px;
text-align: center;
}
.item.muuri-item-dragging .item-content {
background: #8993a2;
}
.item.muuri-item-releasing .item-content {
background: #152c43;
}
JS
const grid = new Muuri(".grid", {
dragEnabled: true
// dragAxis: 'y'
});