If one anchor is hidden, show another anchor? - javascript

How do you show one anchor, when another anchor is hidden? (I tried to do a custom context menu. And if you hover over the datasafety tab, the lock icon should close, to do this you have to do two different anchors with an open and a closed lock, that is why i wondered, how to show a anchor if another is hidden aka. display:none)
window.addEventListener("contextmenu", function(event) {
event.preventDefault();
var contextElement = document.getElementById("context-menu");
contextElement.style.top = event.offsetY + "px";
contextElement.style.left = event.offsetX + "px";
contextElement.classList.add("active");
});
window.addEventListener("click", function() {
this.document.getElementById("context-menu").classList.remove("active")
});
#context-menu {
position: fixed;
z-index: 10000;
width: 150px;
background: #494949;
transform: scale(0);
transform-origin: top left;
margin-top: 50px;
margin-left: 2.5px;
}
#context-menu h1 {
font-size: 1.5rem;
margin: 0;
margin-left: 5px;
font-weight: 600;
}
#context-menu h1::before {
content: " ";
position: absolute;
left: 0;
bottom: 145px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 150px;
margin-top: 5px;
}
#context-menu.active {
transform: scale(1);
transition: transform 200ms ease-in-out;
}
#context-menu .item {
padding: 8px 10px;
font-size: 15px;
color: #eee;
}
.item-title {
padding: 8px 10px;
font-size: 15px;
color: #eee;
}
#item-datasafety-lock-open {
display: block;
}
#item-datasafety-lock-open:hover {
display: none;
}
#item-datasafety-lock-closed {
display: none;
}
#item-datasafety-lock-closed:hover {
display: block;
}
#context-menu .item:hover {
background: #555;
}
#context-menu .item a {
color: #ffffff;
text-decoration: none;
}
#context-menu .item i {
display: inline-block;
margin-right: 5px;
margin-left: 10px;
}
#context-menu hr {
margin: 2px;
border-color: #555;
}
<p>Right-click anywhere</p>
<div id="context-menu">
<div class="item-title" id="context-menu-title">
<i></i>
<h1>Schnellwahl:</h1>
</div>
<div class="item">
<i class="fa-solid fa-house"></i>Home
</div>
<div class="item">
<i class="fa-solid fa-address-book"></i>Kontakt
</div>
<div class="item">
<i class="fa-solid fa-link"></i>Links
</div>
<div class="item">
<a id="item-datasafety-lock-open" href="/datenschutz.html"><i class="fa-solid fa-lock-open"></i>Datenschutz</a>
<a id="item-datasafety-lock-closed" href="/datenschutz.html"><i class="fa-solid fa-lock"></i>Datenschutz</a>
</div>
</div>
Thank you for your help


This problem is already Solved, i made a
onmouseenter=scriptStart();
and with
onmouseleave=scriptStop();
or in the Code
<div class="item" id="context-menu-home" onmouseleave="contextMenuHome_notActive()" onmouseenter="contextMenuHome_active()">
<i class="fa-solid fa-house"></i>Home
</div>
and it worked!

Related

Preloader javascript + css + html

I wanted to add a preloader on my website, but when i add it is put in the body, i want when i reload the page to show the preloader first and after show my page. What can i add, or change? There are my full code. (sorry for my bad english). I hope you understand what i mean and you can try to resolve my problem and give me any advice.
var percent = document.querySelector('.percent');
var progress = document.querySelector('.progress');
var text = document.querySelector ('.text');
var count = 4;
var per = 16;
var loading = setInterval(animate, 50);
function animate() {
if(count == 100 && per == 400) {
percent.classList.add('.text-blink');
text.style.display = 'block';
clearInterval(loading);
} else {
per = per + 4;
count = count + 1;
progress.style.width = per + "px";
percent.textContent = count + "%";
}
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght#800&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-family: 'Gloria Hallelujah', cursive;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #23232e;
--bg-secondary: #141418;
}
body {
font-family: 'Gloria Hallelujah', cursive;
background-color: #363535;
display: flex;
}
.loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: visible;
}
.percent {
color: #999;
font-size: 100px;
font-weight: 400;
text-align: center;
margin-bottom: 15px;
}
.text {
position: fixed;
left: 160px;
color: #fdb5ca;
font-size: 15px;
letter-spacing: 1px;
line-height: 21px;
display: none;
}
.text-blink {
animation: blink .7s ease-in-out .1s;
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: .2;
}
100% {
opacity: 1;
}
}
.progress-bar {
width: 406px;
height: 21px;
background: #111;
border-radius: 13px;
padding: 3px;
box-sizing: border-box;
}
.progress {
width: 200px;
height: 15px;
background: #f60d54;
border-radius: 13px;
}
.main {
margin-left: 5rem; /* 1 rem = 16 px => 5 rem = 80px */
padding: 1rem;
max-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow = hidden;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: #757d77;
}
body::-webkit-scrollbar-thumb {
background: #c2c2c2;
}
.navbar {
width: 5rem;
height: 100vh;
position: fixed;
background-color: #2e2e2e;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
margin-top: 225px;
}
.nav-item {
font-size: 30px;
text-align: center;
width: 85%;
padding: 10px
}
ul {
list-style-type: none;
}
li a {
display: block;
text-decoration:0;
color:#b6b8ba;
}
.nav-link {
align-items: center;
height: 3rem;
text-decoration: none;
}
.secnav-item {
font-size: 30px;
text-align: center;
padding: 5px;
width: 85%
}
.secnavbar {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
margin-top: 50px;
}
.imgnav {
margin-top: 10px;
margin-left: 27px;
position: absolute;
}
.copy {
color: white;
position: absolute;
margin-left: 55px;
}
.contact-section {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.contact-info {
position: relative;
color: #fff;
max-width: 500px;
line-height: 95px;
padding-left: 50px;
font-size: 18px;
top: 50px;
}
.contact-info i {
margin-right: 20px;
font-size: 25px;
}
.contact-form {
max-width:700px;
margin-right: 50px;
position: relative;
top: 50px;
left: 100px;
}
.contact-info, .contact-form {
flex: 1;
}
.contact-form h2 {
color: #fff;
text-align: center;
font-size: 35px;
text-transform: uppercase;
margin-bottom: 30px;
font-family: 'Poppins', sans-serif;
}
.contact-form .text-box {
background: #b8b8b8;
color: #fff;
border: none;
width: calc(50% - 10px);
height: 50px;
padding: 12px;
font-size: 15px;
border-radius: 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin-bottom: 20px;
opacity: 0.9;
}
.contact-form .text-box:first-child {
margin-right: 15px;
}
.contact-form textarea {
background: #b8b8b8;
color: #fff;
border: none;
width: 100%;
padding: 12px;
font-size: 15px;
min-height: 200px;
max-height: 400px;
resize: vertical;
border-radius: 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin-bottom: 20px;
opacity: 0.9;
}
.contact-form .send-btn {
float: right;
background: #261010;
color: #fff;
border: none;
width: 120px;
height: 40px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
transition-property: background;
}
.contact-form .send-btn:hover {
background: #ff2a00;
}
#error_message {
padding: 0;
background: #d60000;
margin-bottom: 2px;
text-align: center;
font-size: 15px;
transition: all 0.5s ease;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Constantin Bogdan-Teodor</title>
<link rel="icon" href="https://icon-library.com/images/b-icon/b-icon-7.jpg" type = "image/x-icon">
<link rel="stylesheet" href="contactme.css" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet"
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/af8a8677c5.js" crossorigin="anonymous"></script>
<script src="contact.js"></script>
</head>
<body>
<div class="navbar">
<div class="copy">
©
</div>
<div class="imgnav">
<a href="home.html">
<svg id="logos" width="27" height="37" viewBox="0 0 27 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.96094 36H0.960938V37H1.96094V36ZM1.96094 1.875V0.875H0.960938V1.875H1.96094ZM21.4609 4.17188L20.8252 4.94381L20.8284 4.94641L21.4609 4.17188ZM22.9141 15.2109L23.7165 15.8077L23.7201 15.8027L22.9141 15.2109ZM19.2109 18.0469L18.8159 17.1282L16.2139 18.2471L18.9416 19.0099L19.2109 18.0469ZM23.5703 21L22.763 21.5903L22.7703 21.6L23.5703 21ZM6.46094 20.0391V19.0391H5.46094V20.0391H6.46094ZM6.46094 32.3203H5.46094V33.3203H6.46094V32.3203ZM18.8359 30.7031L19.5033 31.4479L19.5038 31.4474L18.8359 30.7031ZM6.46094 16.4297H5.46094V17.4297H6.46094V16.4297ZM17.9688 14.9531L17.3305 14.1832L17.3256 14.1874L17.9688 14.9531ZM18.1094 6.86719L17.4915 7.65354L17.4986 7.65897L18.1094 6.86719ZM6.46094 5.57812V4.57812H5.46094V5.57812H6.46094ZM2.96094 36V1.875H0.960938V36H2.96094ZM1.96094 2.875H13.1172V0.875H1.96094V2.875ZM13.1172 2.875C16.707 2.875 19.219 3.62101 20.8252 4.94381L22.0966 3.39994C19.9841 1.66024 16.9336 0.875 13.1172 0.875V2.875ZM20.8284 4.94641C22.4161 6.243 23.2734 8.1903 23.2734 10.9688H25.2734C25.2734 7.7472 24.2558 5.16325 22.0935 3.39734L20.8284 4.94641ZM23.2734 10.9688C23.2734 12.3589 22.8829 13.5637 22.108 14.6191L23.7201 15.8027C24.7578 14.3894 25.2734 12.7661 25.2734 10.9688H23.2734ZM22.1116 14.6142C21.3226 15.6753 20.2364 16.5174 18.8159 17.1282L19.606 18.9655C21.3104 18.2326 22.693 17.1841 23.7165 15.8076L22.1116 14.6142ZM18.9416 19.0099C20.584 19.4692 21.8417 20.3302 22.7631 21.5902L24.3775 20.4098C23.1739 18.7636 21.5253 17.6558 19.4803 17.0838L18.9416 19.0099ZM22.7703 21.6C23.704 22.8449 24.1875 24.3469 24.1875 26.1562H26.1875C26.1875 23.9656 25.5929 22.0301 24.3703 20.4L22.7703 21.6ZM24.1875 26.1562C24.1875 28.9817 23.2838 31.0955 21.5495 32.625L22.8724 34.125C25.1068 32.1545 26.1875 29.4558 26.1875 26.1562H24.1875ZM21.5495 32.625C19.8059 34.1627 17.2688 35 13.7969 35V37C17.5749 37 20.6472 36.0873 22.8724 34.125L21.5495 32.625ZM13.7969 35H1.96094V37H13.7969V35ZM5.46094 20.0391V32.3203H7.46094V20.0391H5.46094ZM6.46094 33.3203H13.8906V31.3203H6.46094V33.3203ZM13.8906 33.3203C16.1558 33.3203 18.0678 32.7343 19.5033 31.4479L18.1686 29.9584C17.1979 30.8282 15.8129 31.3203 13.8906 31.3203V33.3203ZM19.5038 31.4474C20.9693 30.1322 21.6641 28.3421 21.6641 26.2031H19.6641C19.6641 27.8766 19.1401 29.0865 18.168 29.9589L19.5038 31.4474ZM21.6641 26.2031C21.6641 23.9717 21.0535 22.1207 19.6652 20.844C18.2927 19.5819 16.3296 19.0391 13.9609 19.0391V21.0391C16.061 21.0391 17.4495 21.5236 18.3114 22.3162C19.1574 23.0941 19.6641 24.3251 19.6641 26.2031H21.6641ZM13.9609 19.0391H6.46094V21.0391H13.9609V19.0391ZM6.46094 17.4297H13.2578V15.4297H6.46094V17.4297ZM13.2578 17.4297C15.3931 17.4297 17.2135 16.8935 18.6119 15.7188L17.3256 14.1874C16.3803 14.9815 15.06 15.4297 13.2578 15.4297V17.4297ZM18.6069 15.723C20.047 14.5293 20.75 12.8987 20.75 10.9453H18.75C18.75 12.3669 18.2655 13.4082 17.3306 14.1832L18.6069 15.723ZM20.75 10.9453C20.75 8.87908 20.1402 7.17082 18.7202 6.07541L17.4986 7.65897C18.2661 8.25105 18.75 9.26155 18.75 10.9453H20.75ZM18.7272 6.08087C17.3786 5.02127 15.4493 4.57812 13.1172 4.57812V6.57812C15.2538 6.57812 16.6526 6.99435 17.4916 7.65351L18.7272 6.08087ZM13.1172 4.57812H6.46094V6.57812H13.1172V4.57812ZM5.46094 5.57812V16.4297H7.46094V5.57812H5.46094Z" fill="white"/>
</svg>
</a>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a href="home.html" class="nav-link">
<i class="fas fa-home"></i>
</a>
</li>
<li class="nav-item">
<a href="aboutme.html" class="navbar-link">
<i class="far fa-user"></i>
</a>
</li>
<li class="nav-item">
<a href="stiaica.html" class="navbar-link">
<i class="fas fa-code"></i>
</a>
</li>
<li class="nav-item">
<a href="contactme.html" class="navbar-link">
<i class="fas fa-at"></i>
</a>
</li>
</ul>
<div class="secondnav">
<ul class="secnavbar">
<li class="secnav-item">
<a href="https://www.facebook.com/bogdan.teodor.148/" target="_blank" class="secnavbar-link">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="secnav-item">
<a href="https://www.instagram.com/bogdanteodor1/" target="_blank" class="secnavbar-link">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="loading">
<div class="percent">100%</div>
<div class="text"></div>
<div class="progress-bar">
<div class="progress"></div>
</div>
</div>
<script src="preloader.js"></script>
<div class="contact-section">
<div class="contact-info">
<div><i class="fas fa-map-marker-alt"></i>Str. Avram Iancu nr16, Ors. Cernavoda, jud. CT</div>
<div><i class="fas fa-envelope"></i>bogdan.constantin0110#gmail.com</div>
<div><i class="fas fa-phone"></i>+40769881692</div>
<div><i class="fas fa-university"></i>Universitatea Tehnica Gheorghe Asachi</div>
</div>
<div class="contact-form">
<h2>Contacteaza-ma</h2>
<div id="error_message"></div>
<form class="contact" onsubmit=" return validation()" method="post">
<input type="text" name="name" class="text-box" id="name" placeholder="Nume complet">
<input type="email" name="email" class="text-box" id="email" placeholder="Email">
<textarea name="message" id="message" rows="5" placeholder="Mesajul tau"></textarea>
<input type="submit" class="send-btn" value="Trimite">
</form>
</div>
</div>
</div>
</body>
</html>

In your code, the preloader has no background and does not fill the entire screen
Solution: Give the preloader a background and stretch it over the whole screen!
At 100 percent, hide the preloader with loadingscreen .style.display = "none";
See code below.
var percent = document.querySelector('.percent');
var progress = document.querySelector('.progress');
var text = document.querySelector ('.text');
var loadingscreen = document.querySelector('.loading');
var count = 4;
var per = 16;
var loading = setInterval(animate, 50);
function animate() {
if(count == 100 && per == 400) {
percent.classList.add('.text-blink');
loadingscreen .style.display = "none";
clearInterval(loading);
} else {
per = per + 4;
count = count + 1;
progress.style.width = per + "px";
percent.textContent = count + "%";
}
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght#800&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-family: 'Gloria Hallelujah', cursive;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #23232e;
--bg-secondary: #141418;
}
body {
font-family: 'Gloria Hallelujah', cursive;
background-color: #363535;
display: flex;
}
.loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 999999;
overflow: visible;
display:flex;
justify-content:center;
align-items:center;
flex-direction: column;
}
.percent {
color: #999;
font-size: 100px;
font-weight: 400;
text-align: center;
margin-bottom: 15px;
}
.text {
position: fixed;
left: 160px;
color: #fdb5ca;
font-size: 15px;
letter-spacing: 1px;
line-height: 21px;
display: none;
}
.text-blink {
animation: blink .7s ease-in-out .1s;
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: .2;
}
100% {
opacity: 1;
}
}
.progress-bar {
width: 406px;
height: 21px;
background: #111;
border-radius: 13px;
padding: 3px;
box-sizing: border-box;
}
.progress {
width: 200px;
height: 15px;
background: #f60d54;
border-radius: 13px;
}
.main {
margin-left: 5rem; /* 1 rem = 16 px => 5 rem = 80px */
padding: 1rem;
max-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow = hidden;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: #757d77;
}
body::-webkit-scrollbar-thumb {
background: #c2c2c2;
}
.navbar {
width: 5rem;
height: 100vh;
position: fixed;
background-color: #2e2e2e;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
margin-top: 225px;
}
.nav-item {
font-size: 30px;
text-align: center;
width: 85%;
padding: 10px
}
ul {
list-style-type: none;
}
li a {
display: block;
text-decoration:0;
color:#b6b8ba;
}
.nav-link {
align-items: center;
height: 3rem;
text-decoration: none;
}
.secnav-item {
font-size: 30px;
text-align: center;
padding: 5px;
width: 85%
}
.secnavbar {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
margin-top: 50px;
}
.imgnav {
margin-top: 10px;
margin-left: 27px;
position: absolute;
}
.copy {
color: white;
position: absolute;
margin-left: 55px;
}
.contact-section {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.contact-info {
position: relative;
color: #fff;
max-width: 500px;
line-height: 95px;
padding-left: 50px;
font-size: 18px;
top: 50px;
}
.contact-info i {
margin-right: 20px;
font-size: 25px;
}
.contact-form {
max-width:700px;
margin-right: 50px;
position: relative;
top: 50px;
left: 100px;
}
.contact-info, .contact-form {
flex: 1;
}
.contact-form h2 {
color: #fff;
text-align: center;
font-size: 35px;
text-transform: uppercase;
margin-bottom: 30px;
font-family: 'Poppins', sans-serif;
}
.contact-form .text-box {
background: #b8b8b8;
color: #fff;
border: none;
width: calc(50% - 10px);
height: 50px;
padding: 12px;
font-size: 15px;
border-radius: 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin-bottom: 20px;
opacity: 0.9;
}
.contact-form .text-box:first-child {
margin-right: 15px;
}
.contact-form textarea {
background: #b8b8b8;
color: #fff;
border: none;
width: 100%;
padding: 12px;
font-size: 15px;
min-height: 200px;
max-height: 400px;
resize: vertical;
border-radius: 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin-bottom: 20px;
opacity: 0.9;
}
.contact-form .send-btn {
float: right;
background: #261010;
color: #fff;
border: none;
width: 120px;
height: 40px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
transition-property: background;
}
.contact-form .send-btn:hover {
background: #ff2a00;
}
#error_message {
padding: 0;
background: #d60000;
margin-bottom: 2px;
text-align: center;
font-size: 15px;
transition: all 0.5s ease;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Constantin Bogdan-Teodor</title>
<link rel="icon" href="https://icon-library.com/images/b-icon/b-icon-7.jpg" type = "image/x-icon">
<link rel="stylesheet" href="contactme.css" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet"
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/af8a8677c5.js" crossorigin="anonymous"></script>
<script src="contact.js"></script>
</head>
<body>
<div class="navbar">
<div class="copy">
©
</div>
<div class="imgnav">
<a href="home.html">
<svg id="logos" width="27" height="37" viewBox="0 0 27 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.96094 36H0.960938V37H1.96094V36ZM1.96094 1.875V0.875H0.960938V1.875H1.96094ZM21.4609 4.17188L20.8252 4.94381L20.8284 4.94641L21.4609 4.17188ZM22.9141 15.2109L23.7165 15.8077L23.7201 15.8027L22.9141 15.2109ZM19.2109 18.0469L18.8159 17.1282L16.2139 18.2471L18.9416 19.0099L19.2109 18.0469ZM23.5703 21L22.763 21.5903L22.7703 21.6L23.5703 21ZM6.46094 20.0391V19.0391H5.46094V20.0391H6.46094ZM6.46094 32.3203H5.46094V33.3203H6.46094V32.3203ZM18.8359 30.7031L19.5033 31.4479L19.5038 31.4474L18.8359 30.7031ZM6.46094 16.4297H5.46094V17.4297H6.46094V16.4297ZM17.9688 14.9531L17.3305 14.1832L17.3256 14.1874L17.9688 14.9531ZM18.1094 6.86719L17.4915 7.65354L17.4986 7.65897L18.1094 6.86719ZM6.46094 5.57812V4.57812H5.46094V5.57812H6.46094ZM2.96094 36V1.875H0.960938V36H2.96094ZM1.96094 2.875H13.1172V0.875H1.96094V2.875ZM13.1172 2.875C16.707 2.875 19.219 3.62101 20.8252 4.94381L22.0966 3.39994C19.9841 1.66024 16.9336 0.875 13.1172 0.875V2.875ZM20.8284 4.94641C22.4161 6.243 23.2734 8.1903 23.2734 10.9688H25.2734C25.2734 7.7472 24.2558 5.16325 22.0935 3.39734L20.8284 4.94641ZM23.2734 10.9688C23.2734 12.3589 22.8829 13.5637 22.108 14.6191L23.7201 15.8027C24.7578 14.3894 25.2734 12.7661 25.2734 10.9688H23.2734ZM22.1116 14.6142C21.3226 15.6753 20.2364 16.5174 18.8159 17.1282L19.606 18.9655C21.3104 18.2326 22.693 17.1841 23.7165 15.8076L22.1116 14.6142ZM18.9416 19.0099C20.584 19.4692 21.8417 20.3302 22.7631 21.5902L24.3775 20.4098C23.1739 18.7636 21.5253 17.6558 19.4803 17.0838L18.9416 19.0099ZM22.7703 21.6C23.704 22.8449 24.1875 24.3469 24.1875 26.1562H26.1875C26.1875 23.9656 25.5929 22.0301 24.3703 20.4L22.7703 21.6ZM24.1875 26.1562C24.1875 28.9817 23.2838 31.0955 21.5495 32.625L22.8724 34.125C25.1068 32.1545 26.1875 29.4558 26.1875 26.1562H24.1875ZM21.5495 32.625C19.8059 34.1627 17.2688 35 13.7969 35V37C17.5749 37 20.6472 36.0873 22.8724 34.125L21.5495 32.625ZM13.7969 35H1.96094V37H13.7969V35ZM5.46094 20.0391V32.3203H7.46094V20.0391H5.46094ZM6.46094 33.3203H13.8906V31.3203H6.46094V33.3203ZM13.8906 33.3203C16.1558 33.3203 18.0678 32.7343 19.5033 31.4479L18.1686 29.9584C17.1979 30.8282 15.8129 31.3203 13.8906 31.3203V33.3203ZM19.5038 31.4474C20.9693 30.1322 21.6641 28.3421 21.6641 26.2031H19.6641C19.6641 27.8766 19.1401 29.0865 18.168 29.9589L19.5038 31.4474ZM21.6641 26.2031C21.6641 23.9717 21.0535 22.1207 19.6652 20.844C18.2927 19.5819 16.3296 19.0391 13.9609 19.0391V21.0391C16.061 21.0391 17.4495 21.5236 18.3114 22.3162C19.1574 23.0941 19.6641 24.3251 19.6641 26.2031H21.6641ZM13.9609 19.0391H6.46094V21.0391H13.9609V19.0391ZM6.46094 17.4297H13.2578V15.4297H6.46094V17.4297ZM13.2578 17.4297C15.3931 17.4297 17.2135 16.8935 18.6119 15.7188L17.3256 14.1874C16.3803 14.9815 15.06 15.4297 13.2578 15.4297V17.4297ZM18.6069 15.723C20.047 14.5293 20.75 12.8987 20.75 10.9453H18.75C18.75 12.3669 18.2655 13.4082 17.3306 14.1832L18.6069 15.723ZM20.75 10.9453C20.75 8.87908 20.1402 7.17082 18.7202 6.07541L17.4986 7.65897C18.2661 8.25105 18.75 9.26155 18.75 10.9453H20.75ZM18.7272 6.08087C17.3786 5.02127 15.4493 4.57812 13.1172 4.57812V6.57812C15.2538 6.57812 16.6526 6.99435 17.4916 7.65351L18.7272 6.08087ZM13.1172 4.57812H6.46094V6.57812H13.1172V4.57812ZM5.46094 5.57812V16.4297H7.46094V5.57812H5.46094Z" fill="white"/>
</svg>
</a>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a href="home.html" class="nav-link">
<i class="fas fa-home"></i>
</a>
</li>
<li class="nav-item">
<a href="aboutme.html" class="navbar-link">
<i class="far fa-user"></i>
</a>
</li>
<li class="nav-item">
<a href="stiaica.html" class="navbar-link">
<i class="fas fa-code"></i>
</a>
</li>
<li class="nav-item">
<a href="contactme.html" class="navbar-link">
<i class="fas fa-at"></i>
</a>
</li>
</ul>
<div class="secondnav">
<ul class="secnavbar">
<li class="secnav-item">
<a href="https://www.facebook.com/bogdan.teodor.148/" target="_blank" class="secnavbar-link">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="secnav-item">
<a href="https://www.instagram.com/bogdanteodor1/" target="_blank" class="secnavbar-link">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="loading">
<div class="percent">100%</div>
<div class="text"></div>
<div class="progress-bar">
<div class="progress"></div>
</div>
</div>
<script src="preloader.js"></script>
<div class="contact-section">
<div class="contact-info">
<div><i class="fas fa-map-marker-alt"></i>Str. Avram Iancu nr16, Ors. Cernavoda, jud. CT</div>
<div><i class="fas fa-envelope"></i>bogdan.constantin0110#gmail.com</div>
<div><i class="fas fa-phone"></i>+40769881692</div>
<div><i class="fas fa-university"></i>Universitatea Tehnica Gheorghe Asachi</div>
</div>
<div class="contact-form">
<h2>Contacteaza-ma</h2>
<div id="error_message"></div>
<form class="contact" onsubmit=" return validation()" method="post">
<input type="text" name="name" class="text-box" id="name" placeholder="Nume complet">
<input type="email" name="email" class="text-box" id="email" placeholder="Email">
<textarea name="message" id="message" rows="5" placeholder="Mesajul tau"></textarea>
<input type="submit" class="send-btn" value="Trimite">
</form>
</div>
</div>
</div>
</body>
</html>

You are taking a long approach, try this:
Add this <div id="preloader"></div> anywhere inside your body tag
Add this css:
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
background: #fff;
}
#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #f2f2f2;
border-top: 6px solid #00579f;
border-radius: 50%;
width: 60px;
height: 60px;
-webkit-animation: animate-preloader 1s linear infinite;
animation: animate-preloader 1s linear infinite;
}
#search-preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
}
#search-preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 4px solid #f2f2f2;
border-top: 4px solid #00579f;
border-radius: 50%;
width: 40px;
height: 40px;
-webkit-animation: animate-preloader 1s linear infinite;
animation: animate-preloader 1s linear infinite;
}
#-webkit-keyframes animate-preloader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes animate-preloader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
And the last thing add this javascript:
window.onload = function () {
document.querySelector("#preloader").style.display = "none";
};
Codepen: https://codepen.io/manaskhandelwal1/pen/WNGgQJV

How to fix the a href tag clickable?

I have an html css code for notification dropdown box the issues is i can't able to click the tag and same time i tried with javaScript also not working i can't understand this issues please advice me how to make a clickable tag..
$('.toparea-right > .setting-area > li').on("click",function(){
$(this).siblings().children('div').removeClass('active');
$(this).children('div').addClass('active');
return false;
});
//------- remove class active on body
$("body *").not('.toparea-right > .setting-area > li').on("click", function() {
$(".toparea-right > .setting-area > li > div").removeClass('active');
return true;
});
.dropdowns {
background: #FFF none repeat scroll 0 0;
border: 1px solid #e1e8ed;
list-style: outside none none;
max-height: 294px;
overflow: auto;
padding-left: 0;
position: absolute;
right: -175px;
text-align: left;
top: 55px;
width: 440px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.dropdowns.active{
opacity: 1;
visibility: visible;
}
.drops-menu {
list-style: outside none none;
padding-left: 0;
}
.drops-menu > li > a {
border-bottom: 1px solid #e1e8ed;
display: inline-block;
padding: 5px;
width: 100%;
}
.dropdowns > h6{
font-size: 15px;
}
.drops-menu > li > .tag {
color: #fff;
display: inline-block;
font-size: 11px;
padding: 0 6px;
position: absolute;
right: 0;
top: 0;
}
.drops-menu > li:nth-child(2n) > a {
background: whitesmoke none repeat scroll 0 0;
}
.drops-menu > li a img {
display: inline-block;
vertical-align: middle;
width: 10%;
border-radius: 100%;
margin-bottom: 10px;
margin-left: 10px;
height: 45px;
}
.mesg-meta {
display: inline-block;
padding-left: 30px;
vertical-align: middle;
width: -1%;
color: #000000;
padding-top: -21px;
top: 18px;
margin-top: 0px;
line-height: 25px;
}
.mesg-meta > h6 {
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.3px;
margin-bottom: 0;
text-transform: capitalize;
margin-left: -15px;
}
.mesg-meta > span {
color: #000000;
display: inline-block;
font-size: 12px;
line-height: 15px;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.mesg-meta > i {
color: #000000;
font-size: 12px;
font-style: normal;
margin-left: -15px;
}
.drops-menu > li > a:hover {
background: #fafafa none repeat scroll 0 0;
}
.dropdowns > span {
border-bottom: 1px solid #ccc;
display: inline-block;
font-size: 14px;
padding: 0px 10px;
text-align: center;
width: 100%;
height: 59px;
margin-top: 0px;
}
.dropdowns > a.more-mesg {
display: inline-block;
font-size: 14px;
padding-bottom: 5px;
text-align: center;
text-transform: capitalize;
width: 100%;
}
.blue{background: #337ab7;}
.red{background: #ff0000;}
.green{background: #33b7a0;}
.dropdowns.active > a {
background: #fafafa none repeat scroll 0 0;
display: block;
font-size: 13px;
margin-bottom: 2px;
padding: 0px 0px;
text-align: center;
}
.dropdowns.active > a i {
font-size: 11px;
left: 8px;
position: absolute;
top: 10px;
}
.dropdowns.languages {
width: 100px;
}
.dropdowns.active > a:hover {
background: #f1f1f1 none repeat scroll 0 0;
}
<div class="toparea-right">
<ul class="setting-area">
<li>
<i class="far fa-newspaper"></i>
<span class="notifi-count" id="displayNotiCount">00</span>
Notifications
<div class="dropdowns">
<ul class="drops-menu">
<li>
<a href="view-post.php" onclick="window.location.href('view-post.php')" title="">
<div class="mesg-meta-notification">
<h6>Bruce Wayne</h6>
<span>is commented in your post!</span>
<i>0 min ago</i>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
I attached my CSS and HTML code and i tried it's working but URL is opening in another tab. i need open the url in same tab please tell me the solution how to fix this.

In your code dropdown isn't ever made visible.
I think, you on click of "Notifications" you have to toggle(hide/show) dropdown by toggling(adding and removing) "active" class on Notifications tag.
Once your dropdown becomes visible. clicks should work as you desire.
Sample working code:
Notifications
<script>
function toggleDropdownVisibility(event) {
var notificationBell = event.target;
if (notificationBell.classList.contains('active')) {
notificationBell.classList.remove('active');
} else {
notificationBell.classList.add('active');
}
}
</script>
In addition to that please remove onclick="window.location.href('view-post.php')" as window.location.href is not a function instead it a property to which a url can be assigned. like window.location.href='view-post.php' . But you can completely remove this onclick as its not needed.

Your code looks fine here , except that I don't understand why you have opacity:0 and visibility:hidden on the .dropdown css class. These are making your control not accessible.
But once I remove these 2 properties in css worked for me (on last version of Chrome)
My advice:
For tags you can use this :
https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/. No need too much custom JS.

I have the solution for this, i tried that and it's working.
<div class="toparea-right">
<ul class="setting-area">
<li>
<i class="far fa-newspaper"></i>
<span class="notifi-count" id="displayNotiCount">00</span>
Notifications
<div class="dropdowns" id="MmailNoti">
<ul class="drops-menu">
<li>
<a href="view-post.php" onclick="window.location.href('view-post.php')" title="">
<div class="mesg-meta-notification">
<h6>Bruce Wayne</h6>
<span>is commented in your post!</span>
<i>0 min ago</i>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("MmailNoti");
popup.classList.toggle("show");
}
</script>

My JQuery is not working on Chrome, sometimes works on firefox and then stops

when I click on the menu Icon, sometimes it works but after refreshing 3 or 4 times it stops. not working in Chrome at all. am i missing something. Please help.
$(function () {
const menu = $(".fa-3x");
const list = $(".show");
const main = $("#firstpage");
const last = $("#secondpage");
menu.on("click", _=> {
$(".show").toggleClass("hide");
});
});
Mock-up Site here - codepen

The query selector is wrong. $(".show").toggleClass("hide");
It could be better to use #menulinks to access related lu element.
$("#menulinks").on("click", _=> {
$("#menulinks ul").toggleClass("hide");
});
Demo
/* jshint esversion:6 */
/* global $ */
$(function () {
$("#menulinks").on("click", _=> {
$("#menulinks ul").toggleClass("hide");
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* makes the image fill entire screen*/
}
.name,
.scroller {
position: absolute;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
/* makes text in perfect mid*/
}
h1 {
font-family: "Inconsolata", monospace;
text-transform: uppercase;
}
.name {
top: 45%;
}
.show {
width: 130px;
background: rgba(3, 4, 32, 0.54);
position: relative;
left: 43px;
visibility: visible;
opacity: 1;
z-index: 4;
transition: 0.3s;
}
.fa-3x:hover,
#arrow:hover {
cursor: pointer;
opacity: 0.75;
}
.hidden li:hover a,
.name,
a:hover {
background: linear-gradient(to right, #215AF6, #F2359D);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-decoration: none;
}
.info {
font-size: 350%;
padding: 0;
margin-bottom: 20px;
letter-spacing: 5px;
}
.description {
letter-spacing: 4px;
word-spacing: 5px;
}
header {
background: linear-gradient(rgba(17, 20, 42, 0.95), rgba(17, 20, 42, 0.95)), url("https://images.pexels.com/photos/399636/pexels-photo-399636.jpeg?w=940&h=650&auto=compress&cs=tinysrgb") center;
background-attachment: fixed;
background-size: cover;
text-transform: uppercase;
height: 100vh;
color: white;
}
#secondpage {
background-size: cover;
height: 100vh;
}
div.scroller {
position: absolute;
top: 95%;
left: 50%;
}
.scrolltext {
font-size: 10px;
letter-spacing: 3px;
padding-top: 0;
}
.material-icons.md-100 {
font-size: 100px;
margin-top: -20px;
}
#menulinks {
text-align: left;
padding: 20px;
}
nav p {
font-size: 65%;
letter-spacing: 4px;
}
li a {
text-decoration: none;
color: white;
padding-left: 10px;
font-size: 90%;
}
ul {
list-style: none;
}
li {
padding: 5px;
}
.hide {
opacity: 0;
visibility: hidden;
}
.show li:hover {
background: rgba(3, 4, 32, 1);
padding-left: 12px;
transition: 0.3s;
}
.dp {
max-width: 400px;
max-height: 200px;
filter: grayscale(100%);
}
#bottom {
max-height: 110px;
max-width: 350px;
overflow: hidden;
margin: 0 auto;
margin-top: 230px;
margin-bottom: 50px;
text-align: center;
}
#summary,
#greeting {
max-width: 400px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
}
#greeting {
letter-spacing: 10px;
word-spacing: 10px;
}
#summarytext,
#span {
line-height: 150%;
font-size: 20px;
}
#span {
margin-top: 30px;
}
.fa-2x {
opacity: 0.1;
}
<html lang="en">
<head>
<title>Brian Profile</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header id="firstpage">
<nav id="menulinks">
<i class="fas fa-align-justify fa-3x"></i>
<p>menu</p>
<ul class="hide">
<li id="firstopt">About</li>
<li id="secondopt">Experience</li>
<li id="thirdopt">Portfolio</li>
<li id="fourthopt">Contact</li>
</ul>
</nav>
<div class="name">
<h1 class="info">Hello, I'm Brian</h1>
<p class="description">an aspiring web developer</p>
</div>
<div class="scroller">
<p class="scrolltext"> SCROLL DOWN</p>
<i class="material-icons md-100" id="arrow">expand_more</i>
</div>
</header>
<footer id="secondpage">
<div id="bottom">
<p>
<img src="https://dl.dropbox.com/s/3c0xlv56hhb1ed7/2013-07-20%2021.58.43.jpg?=raw1" alt="InstaPic" class="dp"></p>
</div>
<div id="greeting">
<span>HI THERE</span>
<p><i class="far fa-window-minimize fa-2x"></i></p>
</div>
<div id="summary">
<p id="summarytext">
I am a web developer based in London. With a growing Portfolio that is constantly updated, I have a passion for all things 'web'.</p>
<p id="span"><span>For more information visit my Blog.</span>
</p>
</div>
</footer>
<script src="scripts.js"></script>
</body>
</html>

Generating HTML based on search functions result

I am working in ASP.NET MVC 5 and I want to generate HTML based on the search functions result. A simple filter that filters on Title. This is how I want the accordion to look.
//Accordion-----------------------------------------------
$(".accordion-desc").fadeOut(0);
$(".accordion").click(function() {
$(".accordion-desc").not($(this).next()).slideUp('fast');
$(this).next().slideToggle(400);
});
$(".accordion").click(function() {
$(".accordion").not(this).find(".rotate").removeClass("down");
$(this).find(".rotate").toggleClass("down");
});
//-----------------------------------------------------------
body {
background-color: #eee;
font-family: "Open Sans", sans-serif;
}
header {
background-color: #2cc185;
color: #fff;
padding: 2em 1em;
margin-bottom: 1.5em;
}
h1 {
font-weight: 300;
text-align: center;
}
.container {
position: relative;
margin: 0 auto;
}
button {
background-color: #2cc185;
color: #fff;
border: 0;
padding: 1em 1.5em;
}
button:hover {
background-color: #239768;
color: #fff;
}
button:focus {
background-color: #239768;
color: #fff;
}
.accordion {
position: relative;
background-color: #fff;
display: inline-block;
width: 100%;
border-top: 1px solid #f1f4f3;
border-bottom: 1px solid #f1f4f3;
font-weight: 700;
color: #74777b;
vertical-align: middle;
}
/*Rotation-------------------------------------*/
.accordion .fa {
position: relative;
float: right;
}
.rotate {
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.rotate.down {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
/*------------------------------------------*/
.link {
text-align: right;
margin-bottom: 20px;
margin-right: 30px;
}
.accordion h4 {
position: relative;
/* top: 0.8em; */
margin: 0;
font-size: 14px;
font-weight: 700;
float: left;
}
.accordion a {
position: relative;
display: block;
color: #74777b;
padding: 1em 1em 2.5em 1em;
text-decoration: none;
}
.accordion a:hover {
text-decoration: none;
color: #2cc185;
background-color: #e7ecea;
transition: 0.3s;
}
.accordion-desc {
background-color: #f1f4f3;
color: #74777b;
z-index: 2;
padding: 20px 15px;
}
#media (min-width:480px) {
.container {
max-width: 80%;
}
}
#media (min-width:768px) {
.container {
max-width: 1000px;
}
}
.accordion-desc p {
word-break: break-all;
}
.accordion .status {
position: relative;
float: right;
right: 20%;
vertical-align: middle;
}
.btn {
margin-top: 10px;
}
.heading {
margin: 10px 0px 10px 0px;
vertical-align: middle;
display: inline-block;
position: relative;
width: 100%;
}
.heading h2 {
float: left;
position: relative;
margin: auto;
vertical-align: middle;
}
.heading .searcheBar {
float: right;
position: relative;
margin: auto;
vertical-align: middle;
}
.checkboxInput {
float: right;
position: relative;
margin: auto;
vertical-align: middle;
right: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="acc" class="accordion">
<a href="#">
<h4 id="title"></h4>
<h4 class="status">#Resource.AccordionStatus</h4>
<i class="fa fa-chevron-right rotate"></i>
</a>
</div>
<div class="accordion-desc">
<h3>#Resource.AccordionProjectLead</h3>
<h4>Kay Wiberg</h4>
<h3>#Resource.AccordionDescription</h3>
<p id="description">
<p>
<div class="link">
<a id="link" class="btn btn-success" href="">#Resource.AccordionGoTo</a>
</div>
</div>
I wanted to show a snippet of the malfunctioning code, but could not get it to work as a snippet. But here it is flat:
$("#searcheBar").on("keyup", function () {
var input = "";
input = this.value;
var strInput = globalModel;//Array from Ajax call
var accordionWrapper = document.getElementById("acc");
var myHtml = "";
for (i = 0; i < strInput.length; i++) {
if (strInput[i]["Title"].indexOf(input) > -1) {
myHtml += '<h4 id="title">' + (strInput[i]["Title"]) + '</h4><h4 class="status">#Resource.AccordionStatus</h4><i class="fa fa-chevron-right rotate"></i> </div><div class="accordion-desc"><h3>#Resource.AccordionProjectLead</h3><h4>Kay Wiberg</h4><p id ="description">' + (strInput[i]["Description"]) + '<p><div class="link"><a id="link" class ="btn btn-success" href="' + (strInput[i]["Url"]) + '">#Resource.AccordionGoTo</a></div></div>';
}
}
accordionWrapper .innerHTML = myHtml;
});//OnKey up
I am perhaps going in the wrong direction, but I wanted to try and build a search function for my self at first. What I wish is that a full list of items will be shown at first and On keyup the search function should filter the content. But if the search box is emptied the full list should reappear. I am retrieving the content with an Ajax call that returns an array. As of now i am not populating the code with data on initial load of the dom. Was going to use the same idea as this , but this method messes up the classes and click event.

Is the last line supposed to be
accordionWrapper.innerHTML instead of accordion.innerHTML?

You can pass the event object into the function:
$("#searcehBar").on("keyup", function (evt) {
var input = "";
input = evt.target.value;
...

Solved it. went back to my initial build with strongly typed model and the using jquery to .show() and hide() the element. fadeIn(), fadeOut()
$("#searcheBar").on("keyup", function () {
var g = $(this).val().toLowerCase();
$(".accordion #title").each(function () {
var s = $(this).text().toLowerCase();
if (s.indexOf(g) !== -1) {
$(this).parent().parent().fadeIn();
}
else {
$(this).parent().parent().fadeOut();
}
});
});

Target closest icon to change it into another icon

I have a series of cards in the same page. Below is the example the example below where I have put for this example only 1 card (but there are many more).
I fail to use jquery 'closest' or 'siblings' or something similar to do the following: when a user click on a card it collapses and the javascript kicks in to show the content. I need at that moment to replace the "plus icon" by a "minus icon". (only on this specific card so not using at any point a id or class containing the number of the card '354' in the example below)
Jsfiddle Demo
The Javascript should target the icon but it does not change it when I click
If you have trouble making appear the content, do not worry, it's not the focus of the question. I just want to know how to target the icon and change into to glyphicon minus.
HTML
<div id="operation-zone">
<ul class="cards-list">
<li class="card 354" data-opcode="CATIMINI26">
<div class="card-content" id="accordion_354">
<a class="card-detail-opener" id="BtnHomeOperationExpand_53313" role="button" data-toggle="collapse" data-parent="#accordion_354" href="#collapseOne_354" aria-expanded="false" aria-controls="collapseOne_354">
<i class="glyphicon glyphicon-plus detail-icon_354"></i>
</a>
<div class="card-image card-lazy-preloader" id="accordion2">
<a href="/campaigns/xxxxx">
</a><figure><a href="/campaigns/xxxxxx">
<!-- responsive image -->
<img style="opacity: 1; display: block;" id="HPImageBanner_354" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr">
</figure>
</div>
</div>
<div id="collapseOne_354" class="smux details details_354 panel-collapse collapse left-aligned" role="tabpanel" aria-labelledby="headingOne" style="height: auto;">
<div id="DivHomeOperationDates" class="dates">
Jusqu'au <span class="brand-color">mercredi 06/04 6h</span>
</div>
<div id="DivHomeOperationDescription_52850" class="description">
operation in venicesqqsqssqsqsqsqsqsqss qui ravira les petits et les grands ! Retrouvez Les Schtroumpfs, Les Rebelles de la Foret, Hotel Transylvanie et bien d'autres encore...
</div>
<div class="card-info-actions">
<a class="btn btn-lg btn-primary" href="/campaigns/operation-in-venicesqqsqssqsqsqsqsqsqss">go Now ></a>
</div>
</div>
<!-- end of campaign card details on 1-column view-->
</li>
</ul>
</div>
Javascript
$('#collapseOne_354').on('shown.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
});
$('#collapseOne_354').on('hidden.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
CSS
.cards-list {
list-style: none;
display: block;
height: auto;
}
.card {
text-align: left;
width: 100%;
border-bottom: 1px solid black;
position: relative;
}
.card-content {
background: #fff;
position: relative;
}
.card-image {
vertical-align: top;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: green;
}
position: relative;
line-height: 0;
overflow: hidden;
padding-bottom: 33.88%;
}
.container .jumbotron {
padding-left: 0px;
padding-right: 0px;
}
.card-detail-opener {
color: green;
font-size: 16px;
text-align: center;
padding-left: 1px;
width: 25px;
height: 25px;
border-radius: 50%;
line-height: 27px;
background: grey;
position: absolute;
z-index: 2;
opacity: .75;
filter: alpha(opacity=75);
bottom: 60%;
right: 30%;
&:hover { background: #7E7E7E; }
&:focus { background: #7E7E7E; }
}
}
.card-detail-opener:link {
color: green;
}
.glyphicon.glyphicon-remove {
color: #333;
&:hover { color: green; }
&:focus { color: green; }
}
.glyphicon.glyphicon-plus {
top:1px;
color: #333;
&:hover { color: #ffffff; }
&:focus { color: #ffffff; }
}
.glyphicon.glyphicon-minus {
top:2px;
padding-right: 2px;//tweak to center
color: #333;
&:hover { color: #ffffff; }
&:focus { color: #ffffff; }
}
// Content of the card details in the 1-column view
.card .details {
padding-top: 10px;
background-color: rgba(255,255,255,1);
}
.details {
padding-left: 1em;
}
.details .dates {
padding-top: 10px;
font-size: .8em;
line-height: 1.6em;
color: #464650;
margin-right: 1em;
background-size: 90px auto !important;
background-repeat: no-repeat !important;
background-position-x: right !important;
background-position-y: 0px !important;
margin-bottom: 8px;
}
.details .baseline {
color: #888;
font-size: 0.75em;
line-height: 0.4em;
}
.details .description {
font-size: .65em;
color: #464650;
line-height: 1.1em;
overflow: hidden;
}
// End of content of the card details in the 1-column view
.card-info-actions {
float: right;
padding: 0 5px 2px 0;
clear: both;
}
//smaller buttons for cards
.card-info-actions .btn-primary {
font-size: 15px;
}
.card-short-info a.dateSales {
color: #464650;
}
.info-overlay {
display:none;
z-index:999;
position:absolute;
height:100%;
width: 100%;
background-color: rgba(255,255,255,.9);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF)\9";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF);
transition: all .4s ease-in-out;
border-bottom: 4px solid green;
}
.close-overlay {
float:right;
padding:5px;
}
.info-overlay a {
display: block;
line-height: normal;
text-decoration: none;
cursor: pointer;
}

The ID is wrong collapseOne_354 while you are binding collapseOne
EDIT
I would reach the glyphicon with
var list = $('.cards-list')
$('li', list).click(function(e){
var card=$(this);
$(this).find(".glyphicon").toggleClass("glyphicon-minus").toggleClass("glyphicon-plus");
});

Categories

Resources