mouseover and mouseout misbehaves when Vue JS transition component is used

mouseover and mouseout misbehaves when Vue JS transition component is used - javascript

I am creating a popup menu as shown below
const menuItem = {
props: ['name', 'val'],
data() {
return {
showChild: false
}
},
template: /*html */ `
<div class="nav-item" #mouseover="showChild=true" #mouseout="showChild=false">
<span v-if="typeof val === 'string' || val instanceof String">
<a :href="val" target="_blank" rel="noopener noreferrer">{{name}}</a>
</span>
<div v-else>
{{name}}
<ul class="popup" v-show="showChild">
<li v-for="(link, name) in val">
<a :href="link" target="_blank" rel="noopener noreferrer">{{name}}</a>
</li>
</ul>
</div>
</div>
`
}
const app = Vue.createApp({
components: {
menuItem
},
data() {
return {
menu: {
'Home': '#',
'Services': {
'Software Development': 'https://www.upwork.com/signup/create-account/client_contact_freelancer?ciphertext=~0142999d8b15001517&BYOC',
'Business Training & Frenchise': 'https://www.badabusiness.com/dd/BIMK003866',
'Organic Marketing Training & Affiliate Program': 'https://leads-arc.web.app/'
},
'Our Apps': {
'All': 'https://play.google.com/store/apps/collection/cluster?clp=igM4ChkKEzUwMDkwNjA5NzAwNjg3NTk4ODIQCBgDEhkKEzUwMDkwNjA5NzAwNjg3NTk4ODIQCBgDGAA%3D:S:ANO1ljIhW_g&gsr=CjuKAzgKGQoTNTAwOTA2MDk3MDA2ODc1OTg4MhAIGAMSGQoTNTAwOTA2MDk3MDA2ODc1OTg4MhAIGAMYAA%3D%3D:S:ANO1ljJmSZ8',
'Featured': 'https://play.google.com/store/apps/dev?id=5009060970068759882',
'Srila Prabhupada Vani': 'https://play.google.com/store/apps/details?id=com.mayank.srilaprabhupadavani',
'ChatEasy - Easy Messaging': 'https://play.google.com/store/apps/details?id=c.kapps.easymessage.free'
},
'Blogs': 'https://mayank-1513.medium.com/',
'Contact Us': 'https://mayank-chaudhari.web.app/',
},
}
}
})
app.mount('#app');
* {
max-width: 1600px;
margin: auto;
transition: 0.2s all cubic-bezier(0.65, 0.05, 0.36, 1);
color: #2c3e50;
cursor: unset;
box-sizing: border-box;
}
body,
html,
#app {
margin: 0;
padding: 0;
font-family: Avenir, Helvetica, Arial, sans-serif;
max-width: 100%;
}
nav {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
background: transparent;
align-items: center;
align-content: center;
justify-content: center;
}
nav.tr {
background: white;
box-shadow: #5555 0 0 0 2px;
height: 60px;
}
.nav {
display: flex;
align-items: center;
width: 100%;
padding: 15px;
height: 50px;
}
.nav-item {
display: inline-block;
position: relative;
padding: 10px 0;
margin: 20px;
font-weight: bold;
white-space: nowrap;
cursor: pointer;
}
.nav-item * {
text-decoration: none;
}
.nav-item:hover,
.popup li:hover,
.active {
border-bottom: 2px solid #756aee;
transform: translateY(-5%);
filter: drop-shadow(0px 0px 15px #fff);
}
.nav img {
height: 195%;
margin: 0;
cursor: pointer;
}
.nav img:hover {
filter: drop-shadow(-4px 8px 10px #756aee);
transition: all 0.1s;
}
.popup {
position: absolute;
list-style: none;
padding: 15px;
margin-top: 12px;
margin-left: -10px;
line-height: 38px;
border-radius: 5px;
box-shadow: 0px 0px 15px #0005;
background: #fff;
/* display: none; */
}
.nav-item:hover .popup {
display: inherit;
}
<script src="https://unpkg.com/vue#3.0.11/dist/vue.global.js"></script>
<div id="app">
<nav class="tr">
<div class="nav">
<span ref="spacer" class="spacer"></span>
<menu-item :name="key" :val="val" v-for="(val, key) in menu" :key="'menu' + key" />
</div>
</nav>
</div>
This works well. However, when I try to add transition component and enclose ul.popup in transition component, it does not behave properly and opacity becomes 0 even when mouse is on the popup menu. Below is the snippet showing this.
const menuItem = {
props: ['name', 'val'],
data() {
return {
showChild: false
}
},
template: /*html */ `
<div class="nav-item" #mouseover="showChild=true" #mouseout="showChild=false">
<span v-if="typeof val === 'string' || val instanceof String">
<a :href="val" target="_blank" rel="noopener noreferrer">{{name}}</a>
</span>
<div v-else>
{{name}}
<transition name="fade">
<ul class="popup" v-show="showChild">
<li v-for="(link, name) in val">
<a :href="link" target="_blank" rel="noopener noreferrer">{{name}}</a>
</li>
</ul>
</transition>
</div>
</div>
`
}
const app = Vue.createApp({
components: {
menuItem
},
data() {
return {
menu: {
'Home': '#',
'Services': {
'Software Development': 'https://www.upwork.com/signup/create-account/client_contact_freelancer?ciphertext=~0142999d8b15001517&BYOC',
'Business Training & Frenchise': 'https://www.badabusiness.com/dd/BIMK003866',
'Organic Marketing Training & Affiliate Program': 'https://leads-arc.web.app/'
},
'Our Apps': {
'All': 'https://play.google.com/store/apps/collection/cluster?clp=igM4ChkKEzUwMDkwNjA5NzAwNjg3NTk4ODIQCBgDEhkKEzUwMDkwNjA5NzAwNjg3NTk4ODIQCBgDGAA%3D:S:ANO1ljIhW_g&gsr=CjuKAzgKGQoTNTAwOTA2MDk3MDA2ODc1OTg4MhAIGAMSGQoTNTAwOTA2MDk3MDA2ODc1OTg4MhAIGAMYAA%3D%3D:S:ANO1ljJmSZ8',
'Featured': 'https://play.google.com/store/apps/dev?id=5009060970068759882',
'Srila Prabhupada Vani': 'https://play.google.com/store/apps/details?id=com.mayank.srilaprabhupadavani',
'ChatEasy - Easy Messaging': 'https://play.google.com/store/apps/details?id=c.kapps.easymessage.free'
},
'Blogs': 'https://mayank-1513.medium.com/',
'Contact Us': 'https://mayank-chaudhari.web.app/',
},
}
}
})
app.mount('#app');
* {
max-width: 1600px;
margin: auto;
transition: 0.2s all cubic-bezier(0.65, 0.05, 0.36, 1);
color: #2c3e50;
cursor: unset;
box-sizing: border-box;
}
body,
html,
#app {
margin: 0;
padding: 0;
font-family: Avenir, Helvetica, Arial, sans-serif;
max-width: 100%;
}
nav {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
background: transparent;
align-items: center;
align-content: center;
justify-content: center;
}
nav.tr {
background: white;
box-shadow: #5555 0 0 0 2px;
height: 60px;
}
.nav {
display: flex;
align-items: center;
width: 100%;
padding: 15px;
height: 50px;
}
.nav-item {
display: inline-block;
position: relative;
padding: 10px 0;
margin: 20px;
font-weight: bold;
white-space: nowrap;
cursor: pointer;
}
.nav-item * {
text-decoration: none;
}
.nav-item:hover,
.popup li:hover,
.active {
border-bottom: 2px solid #756aee;
transform: translateY(-5%);
filter: drop-shadow(0px 0px 15px #fff);
}
.nav img {
height: 195%;
margin: 0;
cursor: pointer;
}
.nav img:hover {
filter: drop-shadow(-4px 8px 10px #756aee);
transition: all 0.1s;
}
.popup {
position: absolute;
list-style: none;
padding: 15px;
margin-top: 12px;
margin-left: -10px;
line-height: 38px;
border-radius: 5px;
box-shadow: 0px 0px 15px #0005;
background: #fff;
/* display: none; */
}
.nav-item:hover .popup {
display: inherit;
}
.fade-enter-active,
.fade-leave-active {
transition: all .5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
<script src="https://unpkg.com/vue#3.0.11/dist/vue.global.js"></script>
<div id="app">
<nav class="tr">
<div class="nav">
<span ref="spacer" class="spacer"></span>
<menu-item :name="key" :val="val" v-for="(val, key) in menu" :key="'menu' + key" />
</div>
</nav>
</div>
How do I fix this issue?

Try to use
#mouseenter and #mouseleave combination

There was issue with the event that I was listening to. Adding a detailed answer here for benefit of others looking for solution to similar question.
See the WC3 documentation here
The mouseover event triggers when the mouse pointer enters the div element, and its child elements.
The mouseenter event is only triggered when the mouse pointer enters the div element.
changing #mouseover to #mouseenter and #mouseout to #mouseleave solves the issue.

Related

NavBar Auto Toggling On

I am using the onclick method for turning my navbar on/off the problem that I'm having is when I adjust my screen size to mobile view my nav auto turns on.
I'm not very good at JavaScript. I have just started learning it so just fiddled around and absolutely nothing worked for me. Someone told me to put aria-expanded on my HTML so also tried that:
function closeNav() {
document.getElementById("nav_bar").style.height = "0%";
document.getElementById("open-btn").style.display = "inline-block";
document.getElementById("close-btn").style.display = "none";
}
function openNav() {
document.getElementById("nav_bar").style.height = "100%";
document.getElementById("open-btn").style.display = "none";
document.getElementById("close-btn").style.display = "inline-block";
}
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#nav_bar {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: fixed;
top: 0;
width: 100%;
}
#nav_bar>img {
display: none;
}
.nav {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
.list-item {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
}
.list-item {
position: relative;
}
.list-item::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
.list-item:hover::before {
width: 100%;
}
.list-item:hover {
color: #C4C7C8;
}
#close-btn,
#open-btn {
display: none;
}
#media only screen and (max-width:768px) {
#nav_bar>img {
display: block;
position: absolute;
width: 10em;
left: 20%;
top: 10%;
}
#nav_bar {
width: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow: hidden;
transition: 0.5s;
}
.nav {
position: relative;
display: flex;
flex-direction: column;
gap: 1.2rem;
top: 20%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.list-item {
text-decoration: none;
display: block;
color: #ffdada;
font-size: 1.5rem;
transition: 0.3s;
}
#close-btn,
#open-btn {
display: block;
position: absolute;
right: 25px;
top: 20px;
font-size: 2rem;
color: #818181;
transition: all 0.3s;
}
#close-btn:hover {
color: #fff;
}
<body>
<div id="nav_bar">
<a href="#" id="close-btn">
<i aria-expanded="false" onclick="closeNav()" class="bi bi-x-lg"></i>
</a>
<img src="assests/images/moon.png" alt="" />
<div class="nav">
<a class="list-item" href="#">Home</a>
<a class="list-item" href="#">About Me</a>
<a class="list-item" href="#">Projects</a>
<a class="list-item" href="#">C.V</a>
<a class="list-item" href="#">Contact</a>
</div>
</div>
<a aria-expanded="false" href="#" id="open-btn" onclick="openNav()"><i class="bi bi-list"></i
></a>
<script src="assests/nav.js"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Make use of the classList.toggle function that adds/remove a class from the Navbar. In this example, I add or remove the class d-none that has the property: display: none in CSS. With that you can hide or show the navbar by pressing the same button with a single line of code:
const BUTTON = document.querySelector('#toggle_navBar');
const NAV = document.querySelector('nav');
BUTTON.addEventListener('click', function() {
NAV.classList.toggle('d-none');
});
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: sticky;
top: 0;
width: 100%;
}
menu {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
nav li a {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
position: relative;
}
nav li a::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
nav li a:hover::before {
width: 100%;
}
nav li a:hover {
color: #C4C7C8;
}
.d-none {
display: none;
}
<nav>
<img src="assests/images/moon.png" alt="" />
<menu>
<li><a class="list-item" href="#">Home</a></li>
<li><a class="list-item" href="#">About Me</a></li>
<li><a class="list-item" href="#">Projects</a></li>
<li><a class="list-item" href="#">C.V</a></li>
<li><a class="list-item" href="#">Contact</a></li>
</menu>
</nav>
<button id="toggle_navBar">Toggle NavBar</button>
A few changes I made were for semantic reasons. You should use semantic tags if possible and have accessibility in mind. Accessibility is also part of SEO-ratings!

I think the basic idea would be to have a button toggle some variable and then update the UI according to the value of that variable.
You can do this in several ways, but here is an example of a simple way to do it:
// Get your toggle button element
const toggle = document.querySelector(".nav-toggle");
// Get your nav element
const nav = document.querySelector(".nav");
// Create a variable to hold the state of your nav
let navIsOpen = false;
// Listen for clicks on your nav toggle button
toggle.addEventListener('click', () => {
// Update the nav state variable
navIsOpen = !navIsOpen;
// run a function that will update the nav "styles"
updateNav();
})
// This function will update the UI state according to the value of the navIsOpen variable. Here you can update all things you need, like your navbar, your toggle button, ...
function updateNav() {
navIsOpen
?
nav.classList.add('nav--is-open') :
nav.classList.remove('nav--is-open');
}
.nav {
margin-top: 1rem;
padding: 1rem;
background-color: lightgrey;
}
.nav--is-open {
background-color: purple;
color: white;
}
<button class="nav-toggle">Toggle nav</button>
<nav class="nav">
Your nav here
</nav>

If one anchor is hidden, show another anchor?

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!

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>

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

Develop Reference

JavaScript is the programming language of the Web.

mouseover and mouseout misbehaves when Vue JS transition component is used - javascript

Try to use #mouseenter and #mouseleave combination

Related

NavBar Auto Toggling On

If one anchor is hidden, show another anchor?

How to fix the a href tag clickable?

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

Target closest icon to change it into another icon

Categories

Resources