We Keep Coding

Mouse stuck on Input?

I have no idea how to ask this question, but here's problem:
I have this kind of search bar ^ and when you double click on it it shrinks and input is disappearing (display: none). But when it disappears
And I-beam cursor shows. So I can't click or double click on it anymore (for some reason)
I tried input.blur(); but because it's not focused it didn't work. I have no clue what to google to fixed. I tried some but there weren't any related answers.
HTML:
<div class="search-field">
<input placeholder="Search" type="text">
<img src="search.svg" title="Double Click to toggle">
<img src="grip-lines.svg" alt="||" id="drag">
</div>
I use keyframes so I will how CSS too: (Edit: I will put more about css)
.search-field {
position: absolute;
width: 385px;
width: 20%;
background-color: #FFFFFF;
top: 15px;
left: 8%;
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 5px;
border-radius: 10px;
border: 1px black solid;
}
input {
height: 80%;
width: 300px;
outline: none;
transition: .3s;
border-radius: 10px;
border: 1px black solid;
padding: 3px 5px;
background-color: #E4E9F7;
}
#keyframes openSearch {
0% {
width: 77px;
}
100% {
width: 385px;
}
}
#keyframes closeSearch {
0% {
width: 385px;
}
100% {
width: 77px;
}
}
.openedSearch {
animation: openSearch 0.5s both;
}
.closedSearch {
animation: closeSearch 0.5s both;
}
JS:
let searchState = true
let toggleSearchState = () => {
searchState = !searchState
if (searchState == true) {
searchField.className = 'search-field openedSearch'
input.style.display = 'block'
} else {
searchField.className = 'search-field closedSearch'
input.style.display = 'none'
}
}
searchBtn.addEventListener('dblclick', toggleSearchState)

Since everything seems to be working fine on this fiddle. The only thing left (that I couldn't test) is the SVG images and any code you attached to them.
As the id of the pipe image is drag, I am assuming you have attached a drag event on it. Also, if the size of the image is not set you may be overlapping, covering the entire search-field when the width is set too 77px.
An easy solution would be to set the height and width of the img tag with the draggable event, so you can be sure it is not overlapping.

How can I zoom in on a div element on scroll using javascript?

What I'm trying to achieve here is that when I scroll on a particular div here .ball, it should scale up to 1.5.
but when I'm not scrolling on that ball div it should shrink down to it's original height and width.
Here I'm using window method to do this trick and as soon as I scroll ball scale up which isn't what I'm trying to do. What can I use instead of window method and is there any other approach to do achieve this?
const ball = document.querySelector('.ball');
window.addEventListener('scroll', ()=> {
if (scroll) {
ball.classList.add('active');
} else {
ball.classList.remove('active');
}
});
.ball {
height: 200px;
width: 200px;
border-radius: 100%;
background-color: orange;
}
.ball.active {
transform: scale(1.5);
position: fixed;
}
body {
height: 150vh;
}
<div class="ball"></div>

I would use a setTimeout function to remove the class after a short period after the scroll. Do not forget to clear the timeout otherwise it will lead to weird behaviour. (as suggested by Lakshya when I was answering to the question).
To make the ball smoothly transition, I would add a css transition as shown bellow.
const ball = document.querySelector('.ball');
const container = document.querySelector('.container')
let scrollTimeout;
container.addEventListener('scroll', ()=> {
ball.classList.add('active');
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(()=> ball.classList.remove('active'), 100);
});
.ball {
height: 200px;
width: 200px;
border-radius: 100%;
background-color: orange;
transition: transform 0.3s ease;
position: fixed;
top: 50px;
left: 50px;
}
.ball.active {
transform: scale(1.5);
}
.container{
width: 100%;
background: red;
overflow: scroll;
height: 500px;
}
.inside_container{
position: relative;
width: 100%;
height: 2000px;
}
<div class="container">
<div class="inside_container">
<div class="ball"></div>
</div>
</div>

One of the approaches could be delaying the removal of .active class on ball by 200ms such that each time you try to scroll again, the timer is cleared and a new one starts to do the same. A debounce approach in a nutshell.
const ball = document.querySelector('.ball');
let scrollTimeout;
window.addEventListener('scroll', ()=> {
ball.classList.add('active');
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(()=> ball.classList.remove('active'),200);
});
.ball {
height: 200px;
width: 200px;
border-radius: 100%;
background-color: orange;
}
.ball.active {
transform: scale(1.5);
position: fixed;
}
body {
height: 150vh;
}
<div class="ball"></div>

Fade images after delay

I'm trying to switch images in a div every few seconds
the current code works, but there are 2 things that I want to change and I need your help for that:
The div resizes to the current image displaying in it, I want it to always use the size of the bigger image
I want to fade between the images instead of just switching
Thanks for reading, I hope you can help me.
This is what I got so far:
var imgIndex = 0;
setInterval(function() {
images[imgIndex].style.display = "none";
imgIndex++;
if (imgIndex >= images.length) {
imgIndex = 0;
}
images[imgIndex].style.display = "block";
}, 5000);
.imageDisplay {
display: inline-block;
width: 100%;
background-Color: white;
color: black;
border-radius: 5%;
margin: 2px;
padding: 1px;
opacity: 0.5;
transition-duration: 0.5s;
}
.imageDisplay:hover {
opacity: 1;
}
.Image {
width: 99%;
height: auto;
margin: 1px;
padding: 1px;
border-radius: 5%;
cursor: pointer;
display: none;
}
<div class="imageDisplay">
<p>Description</p>
<img class="Image"></img>
<img class="Image"></img>
</div>

Firstly you could set the div to be equal to the size of the large image and then use:
object-fit: cover;
object-position:center;
As for switching you could use:
transition: opacity .3s linear;
Read here on how to exactly implement the transitions. My suggestion would be stacking them all up and fading them in one by one every few seconds.
https://www.w3schools.com/css/css3_transitions.asp
http://css3.bradshawenterprises.com/cfimg/

Progress bar according to countdown

I want to display a progress bar based on a countdown of 7 minutes that is displayed in a div: <div id = "quiz-time-left"> 0:06:24 </ div>
I need if the page is reloaded don´t reset the progress bar. Would it be possible with CSS and a script that the bar represents what the timer displays?
I use this css progress bar:
#quiz-time-left {
width: 0;
height: 100%;
-webkit-animation: progreso 420s linear;
animation: progreso 420s linear;
color: #eb7260;
background: #eb7260;
}
#page-mod-quiz-summary #quiz-timer {
text-align: center;
display: none;
position: absolute;
left: -50px;
top: -50px;
}
#quiz-timer {
border: 2px solid #eb7260;
text-indent: -9999px;
display:block;
font-size: 0px;
height: 35px;
}
#-webkit-keyframes progreso {
0% {
width: 100%;;
}
100% {
width: 0;
}
}
#keyframes progreso {
0% {
width: 100%;
}
100% {
width: 0;
}
}
html
<div id="quiz-timer" role="timer" aria-atomic="true" aria-relevant="text" style="display: block;">Time left: <div id="quiz-time-left">0:06:41</div></div>
Thank you. Best regards.

What you can do is using localStorage to store the current state of the timer and each second decrease this number.
So when the page has finished loading, test if localStorage is undefined, if it is then set it to 420. If localStorage != undefined then resume the animation from the time stored in localStorage.

You could implement something like this:
Make sure you save time left in localStorage
window.onbeforeunload = function(timeLeft) {
localStorage.setItem('countDown', timeLeft);
}
When loading the page check if there is an item called countDown and resume countDown with the value:
if(localStorage['countDown'] {
resumeCountdown(localStorage.getItem('countDown');
}

What's causing the paint event in this CSS animation?

I'm building an animated menu based off of Smooth as Butter: Achieving 60 FPS Animations with CSS3.
The canonical demo which I'm comparing my code against is: http://codepen.io/Onyros/pen/jAJxkW
This is my demo code:
var navLayer = document.querySelector('.nav-layer'),
open = document.querySelector('.open'),
close = document.querySelector('.close');
function toggleNav() {
navLayer.classList.add('nav-layer__animating');
if (navLayer.classList.contains('nav-layer__visible')) {
navLayer.classList.remove('nav-layer__visible');
} else {
navLayer.classList.add('nav-layer__visible');
}
}
open.addEventListener('click', toggleNav, false);
close.addEventListener('click', toggleNav, false);
navLayer.addEventListener('transitionend', function() {
navLayer.classList.remove('nav-layer__animating');
}, false);
.nav-layer {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: 2;
pointer-events: none;
}
.nav-layer__visible {
pointer-events: auto;
}
.header {
position: fixed;
top: 0;
left: 0;
background-color: beige;
height: 10vh;
width: 100vw;
z-index: 1;
}
.nav {
position: relative;
height: 100vh;
width: 90vw;
background-color: aquamarine;
z-index: 3;
transform: translateX(-91vw);
will-change: transform;
}
.nav-layer__animating .nav {
transition: all 300ms ease-in;
}
.nav-layer__visible.nav-layer__animating .nav {
transition: all 300ms ease-out;
}
.nav-layer__visible .nav {
transform: none;
}
<div class="nav-layer">
<nav class="nav">
<button class="close">Close</button>
</nav>
</div>
<header class="header"><button class="open">Menu</button></header>
<article>
<p>O hai</p>
</article>
When I run the canonical demo with paint flashing enabled in Chrome DevTools, I don't see any paint events.
When I run my demo, I see a flash of paint when I close the menu.
The event log in DevTools shows that there was a paint on #document and another on nav.nav.
The answer I'm looking for here is: find the CSS property in the canonical demo which is preventing this flash of paint. Or, maybe the difference is in how I've structured my HTML. I think the JS is equivalent, so it's unlikely to be there.
Please provide your methodology, too!