Develop Reference

I want to have a fade effect on the script

I wrote the script code.
I want to have a fade effect on the script.
How can I add a fade effect to this code?
please help..!
※I used a translator because I couldn't speak English. That is why my words may not be natural. Please understand.
const toggleBtn = document.querySelector('.btn');
const activeOn = document.querySelector('#wrap');
toggleBtn.addEventListener('click', () => {
activeOn.classList.toggle('active');
});
a {
color: black;
text-decoration: none;
}
.btn {
display: inline-block;
font-size: 20px;
font-weight: 600;
}
#wrap {
position: relative;
display: none;
}
#wrap.active {
display: block;
}
.contents {
position: relative;
display: inline-block;
margin: 15px;
padding: 30px;
border: 1px solid #555;
}
<a class="btn" href="#none">Click</a>
<div id="wrap">
<div class="contents">
Active Contents!
</div>
</div>

The best way to do the fade effect is using CSS transition.
One thing to note is CSS transitions don't work if you're toggling display: block and display: none, so you need to instead consider using visibility or opacity attributes.
Here's the working code:
const toggleBtn = document.querySelector('.btn');
const activeOn = document.querySelector('#wrap');
toggleBtn.addEventListener('click', () => {
activeOn.classList.toggle('active');
});
a {
color: black;
text-decoration: none;
}
.btn {
display: inline-block;
font-size: 20px;
font-weight: 600;
}
#wrap {
position: relative;
opacity: 0;
transition: opacity 0.5s linear;
height: 0; /* add this if you want it to take no space */
}
#wrap.active {
opacity: 1;
}
.contents {
position: relative;
display: inline-block;
margin: 15px;
padding: 30px;
border: 1px solid #555;
}
<a class="btn" href="#none">Click</a>
<div id="wrap">
<div class="contents">
Active Contents!
</div>
</div>

You can achieve this with opacity instead of display, like this:
const toggleBtn = document.querySelector('.btn');
const activeOn = document.querySelector('#wrap');
toggleBtn.addEventListener('click', () => {
activeOn.classList.toggle('active');
});
a {
color: black;
text-decoration: none;
}
.btn {
display: inline-block;
font-size: 20px;
font-weight: 600;
}
#wrap {
position: relative;
opacity: 0;
transition: opacity 1s;
}
#wrap.active {
opacity: 1;
transition: opacity 1s;
}
.contents {
position: relative;
display: inline-block;
margin: 15px;
padding: 30px;
border: 1px solid #555;
}
<a class="btn" href="#none">Click</a>
<div id="wrap">
<div class="contents">
Active Contents!
</div>
</div>

Make hovered tooltip disappear when clicking button

I am trying to create a tooltip for whatever that needs it on my website, e.g. a button, text, etc. So far I have something like this:
https://jsfiddle.net/f06q3cLg/
.content {
display: grid;
width: 100vw;
height: 100vh;
place-content: center;
}
.content .parent {
border: 1px red solid;
padding: 10px;
position: relative;
}
.content .parent:hover .tooltip-wrapper {
animation: 0.1s fadeInTooltip;
animation-fill-mode: forwards;
animation-delay: 0.4s;
}
.content .parent:hover:before {
animation: 0.1s fadeInTooltip;
animation-fill-mode: forwards;
animation-delay: 0.4s;
}
.content .parent:active .tooltip-wrapper {
animation: 0.05s fadeOutTooltip;
animation-fill-mode: forwards;
}
.content .parent:active:before {
animation: 0.05s fadeOutTooltip;
animation-fill-mode: forwards;
}
.content .parent:before {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
left: 50%;
transform: translateX(-50%);
opacity: 0;
}
.content .parent .tooltip-wrapper {
position: absolute;
display: grid;
left: 0;
width: 300px;
height: 100%;
opacity: 0;
pointer-events: none;
}
.content .parent .tooltip-wrapper.bottom {
top: calc(100% + 8px);
}
.content .parent .tooltip-wrapper .tooltip {
max-width: 300px;
width: fit-content;
padding: 8px;
position: absolute;
display: inline-block;
background: blue;
border-radius: 5px;
padding: 8px;
color: white;
font-size: 11px;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
line-height: 1.3;
text-align: left;
}
/* Keyframes */
#keyframes fadeInTooltip {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOutTooltip {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<div class="content">
<div class="parent">
Hover me
<div class="tooltip-wrapper">
<span class="tooltip">This is my tooltip</span>
</div>
</div>
</div>
As such, it works somewhat fine. My issue is that I would like the tooltip to disappear when I click the button. Now it vanishes, and then comes back with a 0.4s delay as the hover effect actually has. Ideally the tooltip should disappear as long as my mouse is still on the button, but when I remove it and re-enters the button, then the tooltip should re-appear.
I'm not sure if this is even achievable with pure CSS, but any JS would also do.

The problem is that :active is only applied as long as the mouse is down.
mdn: :active:
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
What you could do (if you want to stay CSS only) is to use tabindex="0" on the <div class="parent"> and :focus instead of :active. But you need to verify that using tabindex="0" here won't hurt usability.
Ideally the tooltip should disappear as long as my mouse is still on the button, but when I remove it and re-enters the button, then the tooltip should re-appear.
That won't work with :focus either. I'm pretty sure that this behavior can only be achieved with JS. If it is possible with CSS only it likely would be a pretty hacky solution.
But from the perspective of a user, this seems to be counterintuitive that the tooltip won't appear after clicked.
A JavaScript solution that does what you want could look like this.
It is a simplified version of the tooltip to only show the relevant parts.
Every element having a tooltip has an attribute data-has-tooltip.
// event delegation for all mouse down event:
// this ensures that the code also works for elements that have been added to the DOM after that script was executed.
document.addEventListener('mousedown', (evt) => {
// check if the mousedown happened in an element with a tooltip
const element = evt.target.closest('[data-has-tooltip]');
if (element) {
// if the user already clicked on the element ignore the click
if (!element.classList.contains('active')) {
// add the active class to the element so that hover won't show the toolip
element.classList.add('active');
function removeActiveOnLeave() {
// remove the active class
element.classList.remove('active');
// remove the mouseleave event listener again
element.removeEventListener('mouseleave', removeActiveOnLeave)
}
// add an event listener for mouseleave to remove the active class
element.addEventListener('mouseleave', removeActiveOnLeave)
}
}
});
.parent {
display: inline-block;
border: 1px solid red;
padding: 0.5rem;
margin: 0.5rem;
}
.tooltip-wrapper {
display: none;
}
.parent:hover .tooltip-wrapper {
display: block;
}
.parent.active:hover .tooltip-wrapper {
display: none;
}
<div class="content">
<div class="parent" data-has-tooltip>
Hover me A
<div class="tooltip-wrapper">
<span class="tooltip">This is my tooltip A </span>
</div>
</div>
</div>
<div class="content">
<div class="parent" data-has-tooltip>
Hover me B
<div class="tooltip-wrapper">
<span class="tooltip">This is my tooltip B</span>
</div>
</div>
</div>

HTML
<div class="content">
<div class="parent" onClick="myFunction()">
Hover me
<div class="tooltip-wrapper">
<span class="tooltip" id="tooltip">This is mytooltip</span>
</div>
</div>
</div>
Javascript
function myFunction(){
var tooltip=document.getElementById("tooltip");
if (tooltip.style.display=="none") {
document.getElementById("tooltip").style.display="block";
} else {
document.getElementById("tooltip").style.display="none";
}
}

Manipulating 'display' property.
const parent = document.querySelector('.parent');
const toolTip = document.querySelector('.tooltip');
parent.addEventListener('click', () => {
if(toolTip.style.display !== 'none') {
toolTip.style.display = 'none';
}else {
toolTip.style.display = 'grid';
}
});

A solution using jQuery 3.4.1:
$(".parent").click(function () {
$(".tooltip-wrapper").css("display", "none");
});
The only downfall with that solution is once you click and re-hover in the same session, the SCSS :hover doesn't work properly.
No need to stress, just add the following if you want that functionality:
$(".parent").hover(function () {
$(".tooltip-wrapper").css("display", "block");
});
Try it out in the attached snippet:
$(".parent").click(function () {
$(".tooltip-wrapper").css("display", "none");
});
$(".parent").hover(function () {
$(".tooltip-wrapper").css("display", "block");
});
.content {
display: grid;
width: 100vw;
height: 100vh;
place-content: center;
}
.content .parent {
border: 1px red solid;
padding: 10px;
position: relative;
}
.content .parent:hover .tooltip-wrapper {
animation: 0.1s fadeInTooltip;
animation-fill-mode: forwards;
animation-delay: 0.4s;
}
.content .parent:hover:before {
animation: 0.1s fadeInTooltip;
animation-fill-mode: forwards;
animation-delay: 0.4s;
}
.content .parent:active .tooltip-wrapper {
animation: 0.05s fadeOutTooltip;
animation-fill-mode: forwards;
}
.content .parent:active:before {
animation: 0.05s fadeOutTooltip;
animation-fill-mode: forwards;
}
.content .parent:before {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
left: 50%;
transform: translateX(-50%);
opacity: 0;
}
.content .parent .tooltip-wrapper {
position: absolute;
display: grid;
left: 0;
width: 300px;
height: 100%;
opacity: 0;
pointer-events: none;
}
.content .parent .tooltip-wrapper.bottom {
top: calc(100% + 8px);
}
.content .parent .tooltip-wrapper .tooltip {
max-width: 300px;
width: fit-content;
padding: 8px;
position: absolute;
display: inline-block;
background: blue;
border-radius: 5px;
padding: 8px;
color: white;
font-size: 11px;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
line-height: 1.3;
text-align: left;
}
/* Keyframes */
#keyframes fadeInTooltip {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOutTooltip {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="parent">
Hover me
<div class="tooltip-wrapper">
<span class="tooltip">This is my tooltip</span>
</div>
</div>
</div>
OR, you can see it working in this Fiddle. with your initial
SCSS.
You can uncomment the second function to see the hover working again after clicking.

How to properly use style.display in JavaScript?

I have two divs whose role is the one of a burger menu. One of them has the property display:block, and the other one has display:none;.
After I click one one div the nav opens and the div's display property turns to none, however when I use the similar block of code to make the other div visible the code doesn't work (by applying display: block throught JavaScript).
When I check the console, it shows the the div's property has changed from none to block, but I can't locate the div with my mouse or see it.
code below:
HTML
<div class="burger">
<div class="line"></div>
<div class="line2"></div>
</div>
<div class="secondBurger">
<div class="line3"></div>
<div class="line4"></div>
</div>
CSS
.burger div {
width: 26px;
height: 2px;
background-color: white;
margin: 5px;
transition: all 0.5s ease;
}
.burger {
position: absolute;
right: 0px;
margin: 10px;
display: block;
cursor: pointer;
}
.secondBurger div {
width: 26px;
height: 2px;
background-color: black;
margin: 5px;
transition: all 0.5s ease;
}
.secondBurger {
position: absolute;
right: 10px;
top: 10px;
margin: 10px;
display: none;
cursor: pointer;
}
.burger .line {
transform: rotate(-45deg) translate(0px, 5px);
}
.burger .line2 {
transform: rotate(45deg) translate(0px, -5.5px);
}
#secondBurger .line3 {
transform: rotate(0deg) translate(0px, 1px);
}
#secondBurger .line4 {
transform: rotate(0deg) translate(0px, 1px);
}
JavaScript
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".bubbles");
const bubbles = document.querySelectorAll(".bubbles p");
const mainNav = document.querySelector(".mainNav");
const main = document.querySelector(".main");
burger.addEventListener("click", () => {
nav.classList.toggle("bubbles-active");
bubbles.forEach((link, index) => {
if (nav.classList.contains("bubbles-active")) {
document.querySelector(".line").style.display = "none";
document.querySelector(".line2").style.display = "none";
document.querySelector(".line3").style.display = "block";
document.querySelector(".line4").style.display = "block";
} else if (main.classList.contains("main")) {
document.querySelector(".line").style.backgroundColor = "";
document.querySelector(".line2").style.backgroundColor = "";
}
});
});
};
Codepen
codepen.io/jelaaxo/pen/JjGQMPM

Dissapearing navbar after resizing

I have responsive navbar on my project site. When screen width is lower than 968px, the hamburger menu with sliding menu. But when I resize screen again (so 'normal' wide navbar should appear again) navbar dissapears!
I think it's kind of conflict with my JS function's inside my main.js file. Here's the content of it:
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1400);
});
$(document).ready(function(){
$(".hamburger").on('click', function(event) {
event.preventDefault();
$(".navigation-list").toggle();
});
});
So i have two functions in JS file. First makes the sliding effect when anchor is clicked. The second one shows/hides the hamburger menu when clicked.
So why navbar is dissapearing?
Here's the link:
https://jsfiddle.net/2s7Lnxb6/
I recognised that it is because of the toggle() function.

By adding another class say hide and you can use toggleClass('hide')
$(document).ready(function(){
$(".hamburger").on('click', function(event) {
event.preventDefault();
$(".navigation-list").toggleClass('hide');
});
});
.topbar{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
.navigation-list {
display: flex;
flex-direction: column;
text-align: center;
list-style: none;
max-height : 300px; /* here */
overflow:hidden; /* here */
transition: all 0.3s linear; /* here */
}
.navigation-list.hide { /* here */
max-height : 0px;
overflow:hidden;
transition: all 0.3s linear;
}
.navigation-list-item.hover {
padding: 10px;
flex: 1;
background: #a6b9cd;
list-style: none;
font-family: "Open Sans", sans-serif;
}
.center-logo {
display: none;
}
.navigation-list-item a {
color: #363636;
text-decoration: none;
font-size: 1em;
}
.navigation-list-item.hover {
transition: 0.1s linear;
}
.navigation-list-item.hover:hover {
background: #f8f8ff;
}
.hamburger-container {
text-align: center;
font-size: 2em;
background-color: #a6b9cd;
}
.hamburger:hover {
cursor: pointer;
}
#media screen and (min-width: 968px) {
.hamburger-container {
display: none;
}
.navigation-list {
display: unset;
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: center;
line-height: 70px;
height: 70px;
white-space: nowrap;
}
.navigation-list.hide { /* here */
max-height : 100px;
}
.navigation-list-item {
flex: 1;
background: #a6b9cd;
list-style: none;
font-family: "Open Sans", sans-serif;
}
.navigation-list-item a {
text-decoration: none;
font-size: 1em;
}
.center-logo {
padding: 0;
display: unset;
flex: 1;
width: 100px;
background: #a6b9cd;
border: 5px solid #a6b9cd;
border-radius: 50%;
}
.navigation-list-item.hover {
padding: 0;
transition: 0.3s linear;
}
.hamburger:hover {
cursor: pointer;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topbar clearfix">
<nav class="navigation">
<div class="hamburger-container">
<span>HAMBURGER</span>
</div>
<ul class="navigation-list">
<li class="navigation-list-item hover">Item1</li>
<li class="navigation-list-item hover">Item2</li>
<li class="navigation-list-item hover">Item3</li>
<li class="navigation-list-item"><img src="https://www.elecosoft.com/wp-content/uploads/2014/04/example-logo.png" class="center-logo" alt="page logo"></li>
<li class="navigation-list-item hover">Item4</li>
<li class="navigation-list-item hover">Item5</li>
<li class="navigation-list-item hover">Item6</li>
</ul>
</nav>
</div>

What is a clean way to toggle a slide in menu?

Okay so I am working on my new personal website and I have came to making the off canvas menu toggable. How cna I do so?
So far I have:
var mainNav = document.getElementById('menu');
var navToggle = document.getElementById('menu-toggle');
mainNav.classList.add('collapsed');
function mainNavToggle() {
mainNav.classList.toggle('collapsed');
}
navToggle.addEventListener('click', mainNavToggle);
.collapsed {
margin-left: -330px;
}
.navigation {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 300px;
height: 100%;
color: #212121;
background-color: #FFFFFF;
transition: all ease-in-out 200ms;
box-shadow: 3px 0px 30px rgba(0, 0, 0, 0.4);
}
.navigation ul {
display: flex;
flex-direction: column;
padding: 90px 0 0 30px;
}
.navigation li {
margin-bottom: 30px;
}
.navigation a {
display: inline-block;
font-size: 16px;
font-weight: 500;
}
.navigation i {
vertical-align: top;
margin-right: 10px;
}
.navigation .double-line {
display: inline-block;
line-height: 1.45;
}
.navigation .double-line span {
display: block;
font-size: 12px;
opacity: 0.3;
}
.clicked span {
background-color: #000;
}
.menu-toggle {
background-color: transparent;
border: 0px;
outline: 0px;
cursor: pointer;
position: relative;
z-index: 10;
}
.menu-toggle span {
display: block;
width: 18px;
height: 2px;
margin: 4px;
background-color: #FFFFFF;
}
<button class="menu-toggle" id="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<nav class="navigation" role="navigation" id="menu">
<ul>
/* Menu contents */
</ul>
</nav>
But with this code when the page loads you can see the menu being swept to the left, I dont want this.
How can I make my toggle button change colour when the menu is open?

Adding the class collapsed to the nav and removing the initial toggle solves your blinking issue! And toggling an active class on the toggle gets you a grey toggle when the $menu is open! The transition CSS property is optional to make the bg transition from transparent to grey look smooth.
Fiddle: https://jsfiddle.net/mbs1kymv/1/
JS:
var $menu = document.getElementById('menu');
var $toggle = document.getElementById('menu-toggle');
$toggle.addEventListener('click', function()
{
$menu.classList.toggle('collapsed');
$toggle.classList.toggle('active');
});
HTML:
<nav class="navigation collapsed" role="navigation" id="menu"> ... </nav>
CSS:
.menu-toggle {
transition: background-color 0.25s;
}
.menu-toggle.active {
background-color: #CCC;
}