Develop Reference

How can I create scroll effect like Waven Website?

I want to create a scroll effect like Waven Website, using vanilla html, css and javascript, that when you scroll, the whole page goes down, but i don't want to use just CSS like:
section{
scroll-snap-align: start;
}
.container{
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
Because when I use this method, the page scroll a little and after a second scroll the whole section, I want some method when you scroll, the page goes instantly down.
Thank you :)

I think this is what you are looking for, please see snippet below or working codepen .
// original example (without scroll with mouse) :
// https://codepen.io/VeronQ/pen/MVzNOg
function scroll(event) {
event.preventDefault();
// iterate through all inputs
const inputs = document.querySelectorAll('input[name="item"]')
for(var i = 0;i < inputs.length;i++){
if(inputs[i].checked){
//check which input is checked and check next one or previous one according to the event.deltaY (scroll up or down)
if(event.deltaY>0 && i!=inputs.length-1)
inputs[i+1].checked = true
else if(event.deltaY<0 && i!=0)
inputs[i-1].checked = true
break;
}
}
}
// attach scroll function to onwheel event
document.onwheel = scroll;
#import url(https://fonts.googleapis.com/css?family=Carter+One);
input[type=radio] {
display: none;
}
input[type=radio]#section1:checked ~ nav label[for=section1] {
background-color: white;
}
input[type=radio]#section1:checked ~ section:nth-of-type(1) {
z-index: 1;
top: 0;
transition: top 0.5s ease-in-out;
transition-delay: 0s;
}
input[type=radio]#section1:checked ~ .cover {
background-color: #f8b195;
}
input[type=radio]#section2:checked ~ nav label[for=section2] {
background-color: white;
}
input[type=radio]#section2:checked ~ section:nth-of-type(2) {
z-index: 1;
top: 0;
transition: top 0.5s ease-in-out;
transition-delay: 0s;
}
input[type=radio]#section2:checked ~ .cover {
background-color: #c06c85;
}
input[type=radio]#section3:checked ~ nav label[for=section3] {
background-color: white;
}
input[type=radio]#section3:checked ~ section:nth-of-type(3) {
z-index: 1;
top: 0;
transition: top 0.5s ease-in-out;
transition-delay: 0s;
}
input[type=radio]#section3:checked ~ .cover {
background-color: #6c5c7c;
}
input[type=radio]#section4:checked ~ nav label[for=section4] {
background-color: white;
}
input[type=radio]#section4:checked ~ section:nth-of-type(4) {
z-index: 1;
top: 0;
transition: top 0.5s ease-in-out;
transition-delay: 0s;
}
input[type=radio]#section4:checked ~ .cover {
background-color: #345d7e;
}
.nav {
position: fixed;
z-index: 2;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
.nav__item {
width: 12px;
height: 12px;
display: block;
margin: 12px auto;
border: solid 2px white;
border-radius: 50%;
cursor: pointer;
}
.nav__item:hover {
background-color: white;
}
section {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 100%;
right: 0;
left: 0;
transition-delay: 0.5s;
}
section:nth-of-type(1) {
background: #f8b195;
}
section:nth-of-type(2) {
background: #c06c85;
}
section:nth-of-type(3) {
background: #6c5c7c;
}
section:nth-of-type(4) {
background: #345d7e;
}
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
html,
body {
height: 100%;
}
body {
overflow: hidden;
color: white;
font: 100% "Carter One", cursive;
}
h1 {
font-size: 6em;
text-align: center;
}
<!-- Inputs-->
<input type="radio" name="item" checked="checked" id="section1"/>
<input type="radio" name="item" id="section2"/>
<input type="radio" name="item" id="section3"/>
<input type="radio" name="item" id="section4"/>
<!-- Navigation-->
<nav class="nav">
<label class="nav__item" for="section1"></label>
<label class="nav__item" for="section2"></label>
<label class="nav__item" for="section3"></label>
<label class="nav__item" for="section4"></label>
</nav>
<!-- Sections-->
<section>
<h1>One Page</h1>
</section>
<section>
<h1>Pure CSS</h1>
</section>
<section>
<h1>Full Screen</h1>
</section>
<section>
<h1>#Ver_Qn</h1>
</section>
<!-- Fix the white space when scrolling two sections at the time-->
<div class="cover"></div>

How to cut exceeded content of div inside another div?

I'm trying to create a "bubble" which gets bigger in order to change its parent color with a nice animation. I like my approach, but I only need to put it inside the parent div.
This is what I have:
HTML
<html>
<body>
<div class="nav-menu" style="top: -64px;">
<div class="test"></div>
<div class="brand" onclick="test();">
<h1>App</h1>
</div>
<ul class="menu-list">
<li class="menu-item">Item</li>
</ul>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
* {
margin: 0;
padding: 0;
}
.nav-menu {
z-index: 1000;
padding: 0 16px;
display: flex;
justify-content: space-between;
background-color: #B67171;
color: white;
position: fixed;
width: 100%;
transition: background-color .5s, top .2s;
}
.test {
background-color: blue;
position: absolute;
border-radius: 50%;
z-index: -1;
width: 32px;
height: 32px;
left: 50%;
top: 50%;
transform: scale(0) translate(-50%, -50%);
transform-origin: top left;
transition: transform .25s;
}
.nav-menu .brand h1 {
margin: 0;
padding: 0;
line-height: 64px;
font-family: 'Satisfy', cursive;
}
.nav-menu .menu-list {
list-style: none;
margin: 0;
}
.nav-menu .menu-list a {
display: inline-block;
margin: 0;
padding: 0 16px;
line-height: 64px;
font-size: 21px;
vertical-align: middle;
transition: background-color .2s;
color: white;
text-decoration: none;
}
.nav-menu .menu-list a:hover {
background-color: #D8C292;
}
(And a .js just for testing)
let navMenu = document.getElementsByClassName("nav-menu")[0];
window.addEventListener('load', function (e) { navMenu.style.top = "0"; });
var showing = false;
function test () {
document.getElementsByClassName("test")[0].style = "transform: scale(" + (showing ? 0 : 4) + ") translate(-50%, -50%);";
showing = !showing;
}
Here you have a demo in which you can press the "App" text and it would scale the "bubble" just a little bit. I want to remove the following stuff:
Can anybody give me a hint? However if you know any better solution for this "feature", I will appreciate it.
Thank you in advance!

Adding overflow:hidden property to your navigation div would work. Try this code.
.nav-menu {
z-index: 1000;
padding: 0 16px;
display: flex;
justify-content: space-between;
background-color: #B67171;
color: white;
position: fixed;
width: 100%;
transition: background-color .5s, top .2s;
overflow: hidden;
}

Add to .navmenu property overflow
DOC: overflow
nav-menu {
...
overflow: hidden;
}

Simply add overflow: hidden; to your div with class nav-menu.
Here is your edited example: https://jsfiddle.net/4r1n2cux/2/

use overflow: hidden; in style of first <div>

How can i close my overlay modal box here,it doesnt work

I cant close my overlay modal Box.I try when the x is clicked than remove the class list,than the modal-box should be closed,but it is not recognized by js and css.First i have one ovarlay where should be showed the name and the position of the coas,after that when the user clicks on the arrow the modal box pop up in full width and height and that'sworks correct and after that i have one X span #times where when i click on the X i want the mdoal box to be disapered.I tried with addevent listener and everything itdoesnt work.
JS CODE
const makingTheInstructorSection = (arrInst) => {
for(let coach of arrInst) {
$('.instructorBoxes').append
(`
<div class="infoPerInstructor">
<img src="ImageGalleryPictures/instructor.jpg"/>
<div class="firstOverlay">
<p class="arrowPointerInstructor">→</p>
<div class="text">
<p class="arrowPointerInstructor">→</p>
<h3>${coach.name}</h3>
<p>${coach.position}</p>
</div>
</div>
<div class="secondOverlayOnClick">
<span class="closeTheInstructorBox">×</span>
<h5>Why you coach:</h5>
<p>${coach.WhyYouCoach}</p>
<h5>Favorite Movement:</h5>
<p>${coach.favoriteMovement}</p>
<h5>Favorite Quote:</h5>
<p>${coach.favoriteQuote}</p>
</div>
</div>
`)
}
}
// the code that i am trygin first,i am nto removing here
// because even here i dont get the span "x" in the console
// when i click that x in the browser
for(let item of closing) {
item.addEventListener("click" , (e) => {
console.log(e.target);
})
}
THE CSS CODE
.instructorBoxes {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
grid-gap: 8px;
}
.instructorBoxes > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.instructorBoxes div {
width: 100%;
height: 100%;
}
.infoPerInstructor {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.firstOverlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
/* background-color: #008CBA; */
background-color: #570194;
overflow: hidden;
width: 100%;
height: 100%;
transform: scale(0);
transition: .3s ease;
cursor: pointer;
z-index:1;
}
.infoPerInstructor:hover .firstOverlay {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.arrowPointerInstructor {
float: right;
font-size: 50px;
color: white;
}
.secondOverlayOnClick {
display: none;
}
.activeteTheSecondOverlayOnClick {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
display: block;
}
/* .DEactiveteTheSecondOverlayOnClick {
display: none;
} */
.activeteTheSecondOverlayOnClick p , h1 {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.closeTheInstructorBox {
font-size: 30px;
color: red;
cursor: pointer;
float: right;
right: 0;
z-index: 100;
}

I found an answer.Because it is overlay it does not work,the best way to do is to make add event listener on body,and then check
if some event target contains that specific class list,then it will be found,and throught that event can you search the "modal box" depending on the structure on your html and remove some class list etc...
body.addEventListener("click" , (e) => {
if(e.target.classList.contains("closeTheInstructorBox")) {
console.log("x e ");
console.log(e.target.parentElement)
e.target.parentElement.remove("activeteTheSecondOverlayOnClick")
}

Toggle Switch to disable and enable Links

In the code below, I have coded a switch that disables and enables my links using CSS.
The problem is that my switch is not changing its appearance. It's doing its job (the JavaScript functionality is working), but the appearance isn't. I don't have much experience with
HTML Button:
<label class="switch" isValue="0">
<div class="slider round">
</div>
</label>
CSS:
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input[type="checkbox"]:checked + input[type="hidden"] + .slider,
input[type="checkbox"]:checked + .slider {
background-color: #2196F3;
}
input[type="checkbox"]:focus + input[type="hidden"] + .slider,
input[type="checkbox"]:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input[type="checkbox"]:checked + input[type="hidden"] + .slider:before,
input[type="checkbox"]:checked + .slider:before {
transform: translateX(26px);
}
Rounded sliders
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.dim.disabled {
pointer-events: none;
background-color: grey;
}
JavaScript:
$(document).on('click', '.switch', function () {
var v = $(".switch").attr("isValue");
if (v == 1) {
$(".switch").attr("isValue", "0");
$(".dim").removeClass("disabled");
}
else {
$(".switch").attr("isValue", "1");
$(".dim").addClass("disabled");
}
});
I know there is something wrong with this because it is of the input type checkbox.
Thank you for any help you can provide.

Okay, ignoring the proposed code that is too vague, here's how a jQuery class toggle works:
$(".switch").on('click', function () {
$(this)
.toggleClass('disabled')
.data('status', ($(this).hasClass("disabled")? '0':'1'));
console.clear();
console.log('data-status value is :', $(this).data('status') );
});
.switch > span {
display: block;
width: 68px;
height: 68px;
background-color: green;
border-radius: 34px;
}
.switch.disabled > span {
background-color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="switch" data-status="1"><span></span></div>

Using just CSS, incase you wanted to go that route. Figured it might be useful since you are saying the Javascript works but the appearance will not change.
Basic switch
/** Format Example Body **/
body {
margin: 0;
padding: 0;
background: #f0f0f0;
}
* {
box-sizing: border-box;
}
.container {
max-width: 500px;
margin: 0 auto;
background: #fff;
}
.components {
padding: 20px;
}
.components .content {
margin-bottom: 20px;
}
.default {
margin: 0 5px;
}
.switch {
display: inline-block;
}
.switch input {
display: none;
}
.switch small {
display: inline-block;
width: 100px;
height: 18px;
background: #3a3a3a;
border-radius: 5px;
position: relative;
cursor: pointer;
}
.switch small:after {
content: "No";
position: absolute;
color: #fff;
font-size: 11px;
font-weight: 600;
width: 100%;
text-align: right;
padding: 0 6px;
box-sizing: border-box;
line-height: 18px;
}
.switch small:before {
content: "";
position: absolute;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
top: 3px;
left: 3px;
transition: .3s;
box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1);
}
.switch input:checked~small {
background: #3fc55c;
transition: .3s;
}
.switch input:checked~small:before {
transform: translate(25px, 0px);
transition: .3s;
}
.switch input:checked~small:after {
content: "Yes";
text-align: left;
}
<div class="container">
<div class="components">
<div class="content">
<label class="switch default">
<input type="checkbox">
<small></small>
</label>
</div>
</div>
</div>

I think you just need to have a specific name of a class for an enabled link or disabled link
style
.link_enabled {
/* style for enabled link */
}
.link_disabled {
/* style for disabled link */
}
script
$(document).on('click', '.switch', function () {
var v = $(".switch").attr("isValue");
if (v == 1) {
$(".switch").attr("isValue", "0");
$(".switch").removeClass("link_enabled").addClass("link_disabled");
$(".dim").removeClass("disabled");
}
else {
$(".switch").attr("isValue", "1");
$(".switch").removeClass("link_disabled").addClass("link_enabled");
$(".dim").addClass("disabled ");
}
});

For the record, please note that it is simpler in JS (es6).
And because the subject only mentions javascript (not jQuery) on tag list.
document.querySelector('.switch').onclick = function(e) {
this.dataset.status = this.classList.toggle('disabled')?'0':'1';
console.clear();
console.log('data-status value is :', this.dataset.status );
}
.switch>span {
display: block;
width: 68px;
height: 68px;
background-color: green;
border-radius: 34px;
}
.switch.disabled>span {
background-color: grey;
}
<div class="switch" data-status="1" ><span></span></div>

How to create change image option on mousehover like in gmail account?

I am trying to create change image functionality like we can do in GMail account for changing our image.
On mousehover event it shows change image option.
Maybe it is some kind of new concept that I don't know. I am not very good in CSS and JavaScript but I guess that it is a div with changed z-index showing change image option.
Could you please explain how to achieve that kind of effect?

Here is a version using the css pseudo-element :after:
demo
HTML:
<a href="#" class="image">
<img src="http://www.gravatar.com/avatar/c0b4455b645967c1431d73beea9d9c54?s=128&d=identicon&r=PG">
</a>
CSS:
.image img{
width: 100px;
text-decoration: none;
}
.image:after{
content: "Change Image";
display: block;
position: relative;
top: -25px;
width: 100px;
background-color: rgba(77, 144, 254, 0.7);
color: white;
font-weight: bold;
text-decoration: none;
opacity: 0;
transition: opacity 300ms;
}
.image:hover:after{
opacity: 1;
}

If you want a pure CSS solution than you can try it like this
Demo
div.wrap {
position: relative;
display: inline-block;
}
div.wrap img {
position: absolute;
}
div.wrap img:nth-of-type(1) {
opacity: 0;
transition: opacity 3s;
}
div.wrap:hover img:nth-of-type(1) {
z-index: 2;
opacity: 1;
}
div.wrap img:nth-of-type(2) {
opacity: 1;
transition: opacity 3s;
}
div.wrap:hover img:nth-of-type(2) {
opacity: 0;
}

is this what you mean?
CSS
.image {
width: 100px;
height: auto;
}
.popup {
top: -25px;
left: 25px;
width: 150px;
height: 75px;
position: relative;
display: none;
background-color: grey;
border-style: solid;
border-width: 1px;
border-radius: 3px;
}
.image:hover + .popup {
display: block;
}
.popup:hover {
    display: block;
}
HTML
<img class="image" src="http://img83.imageshack.us/img83/1905/dsc005142kc.jpg" />
<div class="popup">Change Image</div>
On jsfiddle

I'm not sure I understand what you want but I'd say something like that :
HTML :
<img src="yourimage" />
change
CSS :
a.appearOnHover {
display: none;
}
a.appearOnHover {
display: block;
background-color: #777777;
}