We Keep Coding

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

Elements not visible on page

I moved a page from my old site to my new one, and cannot for the life of me figure out why the CSS isn't working.
https://ericaheinz.com/art/turrell/
It should have 5 concentric white ovals in the middle. I've inspected everything, the divs and CSS are there but they won't show up.
Here's the JS/CSS/HTML
// color looping
// http://forrst.com/posts/Endlessly_Looping_Background_Color_jQuery_Functi-ey7
var colors = new Array('#077bf4', '#9554d6', '#e62e5c', '#ff9466', '#CCCCCC', '#ffbe0a', '#46b3f2', '#70dab3', '#af93af', '#e51717', '#ffd1d9');
var color_index = 0;
var interval = 3000;
function bg_color_tween() {
$('body').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
if(color_index === colors.length) { color_index = 0; }
else { color_index++; }
bg_color_tween();
});
}
// rotation
$(document).ready(function() {
bg_color_tween();
$('.turrell').each(function(){
var r=Math.floor(Math.random()*90);
$('.carton').css({
'-moz-transform':'rotate('+r+'deg)',
'-webkit-transform':'rotate('+r+'deg)',
'transform':'rotate('+r+'deg)'
});
var t=Math.floor(Math.random()*10)+2;
var l=Math.floor(Math.random()*7)+3;
$('.egg').css({
'top':t+'%',
'left':l+'%'
});
});
});
.carton {
height: 95%;
width: 90%;
margin-left: 10%;
text-align: center;
position: relative;
z-index: -10;
}
.egg {
height: 76%;
width: 80%;
position: relative;
top: 12%;
left: 10%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
-moz-box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
-webkit-box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
color: #FFF;
}
.art-caption {
position: absolute;
bottom: 20px;
left: 3.5%;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
line-height: 13px;
margin: 0;
padding: 0;
}
.art-caption a {
color: #FFF;
opacity: .3;
transition: all 0.25s ease-in-out;
}
.art-caption a:hover {
opacity: .8;
}
<body class="turrell">
<div class="container">
<div class="carton">
<div class="egg">
<div class="egg">
<div class="egg">
<div class="egg">
<div class="egg">
<!-- THE LIGHT -->
</div>
</div>
</div>
</div>
</div>
</div>
<h6 class="art-caption">Homage to <em>Aten Reign</em> by James Turrell</h6>
</div>
</body>

You're missing "height" attributes in html, body and .container div. If you inspect, they had height 0 which simply do not display them.
If i added height: 100% to all of them, this is what i saw:

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>

How to achieve unblur piece of image effect by mouse hover?

I need rounded unblur image effect by mouse hover on Image.
Like:
enter link description here (background)
Angular solution would be perfect, but jQuery or native JS is ok too. Any ideas ?
I've found solution below, but it is not work in some browsers (( In IE 11 image is not blurred.
$("body").on("mousemove", function(event) {
$("#blurarea").css({
top: event.clientY - 75,
left: event.clientX - 75
});
});
html, body { height: 100%; }
body { -webkit-transform: translate3D(0,0, 1px); }
.softarea {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://blog.360cities.net/wp-content/uploads/2013/01/Omid.jpg) no-repeat;
-webkit-filter: blur(8px);
filter: grayscale(0.5) blur(10px);
/*firefox only*/
filter:url(#example);
}
.blurarea {
width: 150px;
height: 150px;
border: 1px solid #fff;
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
background: url(http://blog.360cities.net/wp-content/uploads/2013/01/Omid.jpg) no-repeat;
background-attachment: fixed;
border-radius: 50%;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<body>
<div id="softarea" class="softarea"></div>
<div id="blurarea" class="blurarea"></div>
<svg:svg>
<svg:filter id="example">
<svg:feGaussianBlur stdDeviation="2"/>
</svg:filter>
</svg:svg>
</body>
</html>