We Keep Coding

Unable to add transition when width of navbar is changed with Javascript

I have a navbar in with I am changing the width when the checkbox is clicked. When the checkbox is clicked, I want the navbar to smoothly transit to the larger width. It seems to be working only the first time on the snippet.
Here is the code I have:
function change() {
var nav = document.getElementById("navbar");
var checkBox = document.getElementById("checkbox");
if (checkBox.checked == true) {
nav.style.width = "300px";
} else {
nav.style.width = "fit-content";
}
}
nav {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100px;
height: 100%;
transition: 0.3s;
box-shadow: rgba(136, 165, 191, 0.26) 4px 2px 10px 0px, rgba(255, 255, 255, 0.8) -4px -2px 16px 0px;
}
nav input {
margin: 10px;
position: absolute;
width: 50px;
height: 50px;
opacity: 0;
cursor: pointer;
}
<nav id="navbar">
<input onclick="change()" type="checkbox" name="" id="checkbox">
<p>Home</p>
</nav>

Instead of using checkbox with JavaScript you can use onClick event listener on navbar. And then create a class for example .expanded and toggle class accordingly.
const navbar = document.querySelector('.navbar');
navbar.addEventListener('click', (e) => {
navbar.classList.toggle('expanded');
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.navbar {
width: 100px;
padding: 1rem;
background-color: white;
transition: width 250ms ease;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}
.navbar.expanded {
width: 300px;
}
<nav class="navbar">
<p>Navbar</p>
</nav>
Hope it will work 🚀

A transition only works on numeric values, so you need to change the width in the else-case accordingly, for example to 50px.
function change(){
var nav = document.getElementById("navbar");
var checkBox = document.getElementById("checkbox");
if(checkBox.checked == true){
nav.style.width = "300px";
} else{
nav.style.width = "50px";
}
}
nav{
display: flex;
flex-direction: column;
justify-content: space-between;
width:100px;
height: 100%;
transition: 0.3s;
box-shadow: rgba(136, 165, 191, 0.26) 4px 2px 10px 0px, rgba(255, 255, 255, 0.8) -4px -2px 16px 0px;
}
nav input{
margin: 10px;
position: absolute;
width: 50px;
height: 50px;
opacity: 0;
cursor: pointer;
}
<nav id="navbar">
<input onclick="change()" type="checkbox" name="" id="checkbox">
<p>Home</p>
</nav>

CSS clip path issue with background

I'm currently implementing a switch. The problem is that the background which should be hidden by the switch shows one thin line at the left end. I've absolutely no idea why. The strange thing is that here on SO everything looks really good. The switch is located in a scrollable main wrapper with all the other content. I thought this could be the problem but after removing the scrolling, the error was still there:
When I run the inspector and hover the element, the background seems to go out:
This is my code. I've tried a low but can't find the problem:
let toggle = document.getElementById('container');
let toggleContainer = jQuery('#toggle-container');
let toggleNumber;
jQuery('#container').click( function() {
toggleNumber = !toggleNumber;
if (toggleNumber) {
toggleContainer.css( "clip-path", "inset(0 0 0 50%)" );
} else {
toggleContainer.css( "clip-path", "inset(0 50% 0 0)" );
}
});
#container {
width: 100%;
height: 56px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
user-select: none;
cursor: pointer;
border-radius: 3px;
-webkit-box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, .2);
box-shadow: 0 0.12rem 0.4rem 0 rgba(0, 0, 0, .2);
}
.inner-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-transform: uppercase;
}
.inner-container:first-child {
background: gray;
color: #ffffff;
}
.inner-container:nth-child(2) {
background: chartreuse;
color: #ffffff;
clip-path: inset(0 50% 0 0);
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.toggle {
width: 50%;
position: absolute;
height: inherit;
display: flex;
font-weight: 600;
}
.toggle p {
margin: auto;
}
.toggle:nth-child(1) {
right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="inner-container">
<div class="toggle">
<p>Private</p>
</div>
<div class="toggle">
<p>Public</p>
</div>
</div>
<div class="inner-container" id='toggle-container'>
<div class="toggle">
<p>Private</p>
</div>
<div class="toggle">
<p>Public</p>
</div>
</div>
</div>

I would suggest an optimized version with less of code and without the use of clip-path:
let toggle = document.getElementById('container');
let toggleContainer = jQuery('.inner-container');
jQuery('#container').click(function() {
toggleContainer.toggleClass('second');
});
#container {
margin-bottom: 20px;
user-select: none;
cursor: pointer;
border-radius: 3px;
box-shadow: 0 0.12rem 0.4rem 0 rgba(0, 0, 0, .2);
}
.inner-container {
height: 56px;
text-transform: uppercase;
display: flex;
background:
linear-gradient(chartreuse,chartreuse) left/50% 100% no-repeat,
gray;
color: #ffffff;
transition: 0.2s;
}
.inner-container.second {
background-position:right;
}
.toggle {
width: 50%;
display: flex;
font-weight: 600;
}
.toggle p {
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="inner-container">
<div class="toggle">
<p>Private</p>
</div>
<div class="toggle">
<p>Public</p>
</div>
</div>
</div>

This seems to be what you are seeing:
Which was done by making the CSS: clip-path: inset(0 50% 0 1px);
Maybe just try adding some negative space to the left side:
toggleContainer.css( "clip-path", "inset(0 50% 0 -10px)" );

Change color when scrolling

I've been looking a solution for this but I couldn't get it to work.
I would like my page header to change from a transparent background to a red background as the user begins scrolling the page.
$(window).on("scroll", function() {
if($(window).scrollTop() > 800) {
$(".header").addClass("active");
} else {
$(".header").removeClass("active");
}
});
* {margin:0;padding:0}
html {
background: lightgray;
height: 5000px;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0;
z-index: 10000;
transition: all 1s ease-in-out;
height: auto;
background-color: rgba(17, 42, 107, 0.7);
text-align: center;
line-height: 40px;
}
.header.active {
background: red;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">the header</div>

$(window).scroll(function () {
var scroll = $(window).scrollTop();
console.log(scroll);
if (scroll >= 10) {
$(".header").addClass("active");
} else {
$(".header").removeClass("active");
}
});

Temporarily delay page scrolling with jQuery

I have so far create a page that when scrolling down and a container div is reached, a number of divs within it begin to scroll horizontally along the page. My problem is that I want the page to stop scrolling vertically until all the divs have scrolled all the way along to the left then for the page to begin scrolling vertically again. Essentially, the user scrolls down to the container, horizontal scrolling of the divs are triggered, once across the page, begin scrolling down again. This is what I have so far:
Code:
$(document).ready(function() {
var windowWidth = $(window).width();
$("#service1, #service2, #service3").css({
"left": windowWidth
});
$(window).scroll(function() {
$("#service1, #service2, #service3").css({
"left": windowWidth - $(window).scrollTop()
});
});
});
#hero {
background-color: rgba(0, 0, 0, 0.5);
height: 900px;
position: relative;
top: 0;
left: 0;
width: 100%;
}
#about {
background-color: rgba(0, 0, 0, 0);
height: 900px;
width: 100%;
}
#services {
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
height: 900px;
margin-bottom: 900px;
width: 100%;
}
#service1 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
position: absolute;
width: 1200px;
}
#service2 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
margin-left: 1300px;
position: absolute;
width: 1200px;
}
#service3 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
margin-left: 2600px;
position: absolute;
width: 1200px;
}
<div id="hero"></div>
<div id="about"></div>
<div id="services">
<div id="service1"></div>
<div id="service2"></div>
<div id="service3"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I hope I have been clear.

You can use DOMMouseScroll event for check the scroll and block this with detect and replace event. Please try below. I have block vertical scroll when scroll arrive in third section and reactive when is arrive a size defined left. You can modify with what you want.
$(document).ready(function() {
var windowWidth = $(window).width();
$("#service1, #service2, #service3").css({
"left": windowWidth
});
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
$(document).scrollLeft($(document).scrollLeft()-(delta*40));
$("body").scrollLeft($(document).scrollLeft()-(delta*40));
e.preventDefault();
}
$('html').on ('DOMMouseScroll', function (e) {
var sens = e.originalEvent.detail;
var lastDivTop = ($(window).scrollTop() - $("#services").offset().top)
var lastDivLeft = ($(window).scrollLeft() - $("#services").offset().left)
if (sens < 0) { //scroll Up
if(lastDivLeft > 0 && lastDivTop < 100 ){
scrollHorizontally(e)
$(window).scrollTop($("#services").offset().top)
}
} else if (sens > 0) { //scroll down
if(lastDivTop > 0 && lastDivLeft < 1500){
scrollHorizontally(e)
$(window).scrollTop($("#services").offset().top)
}
}
});
});
#hero {
background-color: rgba(0, 0, 0, 0.5);
height: 900px;
position: relative;
top: 0;
left: 0;
width: 100%;
}
#about {
background-color: rgba(0, 0, 0, 0);
height: 900px;
width: 100%;
}
#services {
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
height: 900px;
margin-bottom: 900px;
width: 100%;
}
#service1 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
position: absolute;
width: 1200px;
}
#service2 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
margin-left: 1300px;
position: absolute;
width: 1200px;
}
#service3 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
margin-left: 2600px;
position: absolute;
width: 1200px;
}
<div id="hero"></div>
<div id="about"></div>
<div id="services">
<div id="service1"></div>
<div id="service2"></div>
<div id="service3"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

JavaScript. How to control background image slide show to synchronize with bubbles

I am trying to create backgroundImage slide show with bubbles. i was working very fine untill i added eventListeners for mouseover and mouseout.
mouseover enent clears the setInterval while the mouseout calls back the setInterval().
The execution is triggered with the setInterval in the window load event.
i dont know if my explained my problem very well
var bubble_Array;
var bubble_i = 0;
var intrval;
var ba;
var bi =0;
var intr;
var man = ['url(imags/ParLour.jpg', 'url(imags/767.jpg', 'url(imags/7series.jpg', 'url(imags/02.jpg', 'url(imags/BedRoom.jpg', 'url(imags/30.jpg', 'url(imags/volks.jpg', 'url(imags/sports.jpg', 'url(imags/real.jpg', 'url(imags/portable.jpg', 'url(imags/perspective.jpg', 'url(imags/green.jpg', 'url(imags/fantom.jpg', 'url(imags/fantom2.jpg', 'url(imags/elegance.jpg', 'url(imags/bridge.jpg', 'url(imags/BMW.jpg', 'url(imags/interior.jpg','url(imags/3Dcar007.jpg'];
function _(x){
return document.getElementById(x);
}
function bubbleMain(bi){
bubble_i++;
if(bubble_i == man.length){
bubble_i = 0;
}
_('bubblebox').style.opacity = 0;
for (var i =0; i < ba.length; i ++){
ba[i].style.background = "rgba(0,0,0,.1)";
}
setTimeout(function(){
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.background = "red";
_("bubblebox").style.opacity = 1;
}, 500);
}
function bubbleSlide(){
ba = _('bubbles').children;
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.backgroundColor = 'red';
bi++;
if (bi == ba.length){
bi =0;
}
bubbleMain(bi);
}
window.addEventListener("load", function(){
ba = _('bubbles').children;
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.backgroundColor = 'red';
intrval = setInterval(bubbleSlide, 2000);
})
window.addEventListener("mouseover", function(){
clearInterval(intrval);
})
window.addEventListener("mouseout", function(){
intrval = setInterval(bubbleSlide, 2000);
})
#bubblebox{
height: 550px;
width: 1200px;
border:2px solid black;
margin: 50px auto;
background-repeat: no-repeat;
z-index: -5;
background-size: cover;
transition:background-image 0.2s;
transition: opacity 0.3s linear 0s;
}
#bubbles{
height: 0px;
width: auto;
text-align: center;
z-index: 100;
position: absolute;
}
#bubbles div{
height: 20px;
width: 20px;
background: rgba(0,0,0,.1);
border: 2px solid green;
border-radius: 100%;
display: inline-block;
position: relative;
margin: 0px auto;
top: 10px;
z-index: 1000;
left: 310px;
color:#fff;
cursor: pointer;
}
#heading{
height: 20px;
width: 200px;
background-color: red;
position: relative;
top: 100px;
left: 500px;
color: #fff;
text-align: center;
}
#arrow_right, #arrow_left, #arrow_middle{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -4px 4px 0 rgb(255, 255, 255);
cursor: pointer;
left: 1100px;
position: relative;
margin: 0 -10px 0 0px;
top: 200px;
border-bottom: 3px solid black;
border-left: 3px solid black;
transform: rotate(225deg);
}
#arrow_right2, #arrow_left2, #arrow_middle2{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -4px 4px 0 rgb(255, 255, 255);
cursor: pointer;
left: 10px;
position: relative;
margin: 0 -10px 0 0px;
top: 200px;
border-bottom: 3px solid black;
border-left: 3px solid black;
transform: rotate(45deg);
tex
}
#arrow_right2:hover, #arrow_left2:hover, #arrow_middle2:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
#arrow_right:hover, #arrow_left:hover, #arrow_middle:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
<div id="bubblebox">
<div id="bubbles">
<div onclick="bubbleMain(0)">1</div>
<div onclick="bubbleMain(1)">2</div>
<div onclick="bubbleMain(2)">3</div>
<div onclick="bubbleMain(3)">4</div>
<div onclick="bubbleMain(4)">5</div>
<div onclick="bubbleMain(5)">6</div>
<div onclick="bubbleMain(6)">7</div>
<div onclick="bubbleMain(7)">8</div>
<div onclick="bubbleMain(8)">9</div>
<div onclick="bubbleMain(9)">10</div>
<div onclick="bubbleMain(10)">11</div>
<div onclick="bubbleMain(11)">12</div>
<div onclick="bubbleMain(12)">13</div>
<div onclick="bubbleMain(13)">14</div>
<div onclick="bubbleMain(14)">15</div>
<div onclick="bubbleMain(15)">16</div>
<div onclick="bubbleMain(16)">17</div>
<div onclick="bubbleMain(17)">18</div>
<div onclick="bubbleMain(18)">19</div>
<div onclick="bubbleMain(19)">20</div>
</div>
<div id="heading">Caption</div>
<div id="arrow_right"></div>
<div id="arrow_middle"></div>
<div id="arrow_left"></div>
<div id="arrow_right2"></div>
<div id="arrow_middle2"></div>
<div id="arrow_left2"></div>
<div id="bubblecontent"></div>
</div>