Develop Reference

how to know child divs on container div center on scroll event right and left?

trying to do event 'scroll' and when in the callback function the record of position div only record of last position, i want to know if that div in the center target i want
const slide = document.querySelector(".slides")
slide.addEventListener('scroll', function(e) {
const slide2 = document.querySelector("#slide-2")
console.log(slide2.offsetLeft)
})
<div class="slider">
1
2
3
4
5
<div class="slides">
<div id="slide-1">1</div>
<div id="slide-2">2</div>
<div id="slide-3">3</div>
<div id="slide-4">4</div>
<div id="slide-5">5</div>
</div>
</div>
my goal here I want to know if a user on that div to Right and Left for my slider
so i can make active dots , i am trying to just use native javascript here :)
here is my Codepen example
https://codepen.io/lpllplp222/pen/BaRvwKm

I have used jQuery to achieve the same.
position() function from the jQuery provides the current position of an element from its top and left, I am using the left value to calculate the current active element and get its index, thereby providing an active class to the corresponding dot.
const slide = document.querySelector(".slides")
$('#slider-dots a').on('click', function(event) {
event.stopPropagation();
})
slide.addEventListener('scroll', function(e) {
var scrollLeft = $('#slides-wrapper').scrollLeft();
var currIndex = -1;
$('#slider-dots a').removeClass('active');
for(var i = 0; i<$('#slides-wrapper div').length; i++) {
if($($('#slides-wrapper div')[i]).position().left >= 0 && currIndex === -1) {
currIndex = i;
}
}
$($('#slider-dots a')[currIndex]).addClass('active');
})
* {
box-sizing: border-box;
}
.slider {
width: 400px;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
#slider-dots a.active {
color: violet;
background-color: #000;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 300px;
height: 200px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 0 0.5rem 0;
position: relative;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #000;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
html,
body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #74abe2, #5563de);
font-family: "Ropa Sans", sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider" id='slider-dots'>
1
2
3
4
5
<div id='slides-wrapper' class="slides">
<div id="slide-1">
1
</div>
<div id="slide-2">
2
</div>
<div id="slide-3">
3
</div>
<div id="slide-4">
4
</div>
<div id="slide-5">
5
</div>
</div>
</div>

Typing and saving notes on every device

I am working on notes page. I want to be able to write notes and save them. Everything works perfectly except that I only see notes in one browser. For example if I open my website on Safari, I can save my notes and I'll be able to see them forever. But if I open my website on Chrome or my phone, the notes are empty. So I need to rewrite everything and save it. So every time I want to save something, I need to rewrite the same notes on every device which is ridiculous. So what I want to do is to make my notes visible on every device. I hope it makes sense.
What I have now:
<div class="logo">
<h1>
Notes
</h1>
<img src="icon.svg">
</div>
<main contenteditable="" autocorrect="off"></main>
<div class="icon">
<img src="icon-2-01.svg">
</div>
<button>Save</button>
<script src="main.js"></script>
html {
height: 100%;
}
body {
font-size: 14px;
font-family: Times New Roman;
height: 100%;
width: 100%;
overflow: hidden;
padding: 30px;
background-color: #50554f;
color: #FFF;
}
html {
margin: 0;
}
h1 {
top: 30px;
right: -65px;
font-size: 20px;
position: relative;
}
a {
text-transform: none;
color: #FFF;
text-decoration: none;
}
.logo {
top: 10px;
right: 10px;
float: right;
}
.logo img {
width: 220px;
margin-top: -20px;
}
main {
color: #FFF;
display: block;
height: calc(100% - 6.3em);
overflow: scroll;
outline: none;
}
.icon {
position: absolute;
bottom: 30px;
left: 30px;
}
.icon img {
width: 50px;
height: 50px;
}
button {
font-size: 1em;
margin-top: 80px;
font-size: 14px;
font-family: Times New Roman;
color: #FFF;
right: 30px;
float: right;
}
button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
html {
overflow: scroll;
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
background: transparent; /* make scrollbar transparent */
}
#media (max-width:600px) {
body {
position: fixed;
}
.logo {
display: block;
align-items: center;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
margin-bottom: 50px;
}
h1 {
margin-left: -130px;
}
main {
width: 80%;
height: calc(100% - 15em);
}
.icon {
display: none;
}
button {
position: relative;
left: 1px;
float: left;
}
}
var button = document.querySelector('button');
var main = document.querySelector('main');
if (localStorage['note'] === undefined ) {
localStorage['note'] = 'Save your note by typing in here and clicking the Save Button.<br>You can also press CMD + S / CTRL + S'
}
function siteLoad () {
main.innerHTML = localStorage['note'];
}
function buttonSave () {
localStorage['note'] = main.innerHTML;
}
function keySave (e) {
if (e.keyCode === 83 && e.metaKey || e.keyCode === 83 && e.ctrlKey) {
e.preventDefault();
localStorage['note'] = main.innerHTML;
}
}
if (window.addEventListener) {
window.addEventListener('load', siteLoad, false);
button.addEventListener('click', buttonSave, false);
main.addEventListener('keydown', keySave, false);
} else if (window.attachEvent) {
window.attachEvent('onload', siteLoad);
button.attachEvent('onclick', buttonSave);
main.attachEvent('keydown', keySave);
} else {
window.onload = siteLoad;
button.onclick = buttonSave;
main.onkeydown = keySave;
}

Split Landing Page (HTML, CSS, JavaScript)

I watched the tutorial from Traversy Media for a Split Landing Page. (https://www.youtube.com/watch?v=oRmQN244Ir0)
I wanted to tweak the page to have three sections instead of two, but i can't get it done.
It doesn't show the content of the left section. Instead the middle section is overlapping the left, and if i hover over it, the left section transitions into the middle.
Also if i hover over the middle section, no transition at all is being performed.
const left = document.querySelector('.left');
const middle = document.querySelector('.middle');
const right = document.querySelector('.right');
const container = document.querySelector('.container');
left.addEventListener('mouseenter', () => {
container.classList.add('hover-left');
});
left.addEventListener('mouseleave', () => {
container.classList.remove('hover-left');
});
middle.addEventListener('mouseenter', () => {
container.classList.add('hover-middle');
});
middle.addEventListener('mouseleave', () => {
container.classList.remove('hover-middle');
});
right.addEventListener('mouseenter', () => {
container.classList.add('hover-right');
});
right.addEventListener('mouseleave', () => {
container.classList.remove('hover-right');
});
:root {
--container-bg-color: #333;
--left-bg-color: rgba(223, 39, 39, 0.7);
--left-button-hover-color: rgba(161, 11, 11, 0.3);
--middle-bg-color: #ededed;
--middle-button-hover-color: #ffba00;
--right-bg-color: rgba(43, 43, 43, 0.8);
--right-button-hover-color: rgba(92, 92, 92, 0.3);
--hover-width: 66%;
--other-width: 16.5%;
--speed: 1000ms;
}
html,
body {
padding: 0;
margin: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
h1 {
font-size: 4rem;
color: #fff;
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
white-space: nowrap;
}
.button {
display: block;
position: absolute;
left: 50%;
top: 40%;
height: 2.5rem;
padding-top: 1.3rem;
width: 15rem;
text-align: center;
color: #fff;
border: #fff solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
}
.split.left .button:hover {
background-color: var(--left-button-hover-color);
border-color: var(--left-button-hover-color);
}
.split.middle .button:hover {
background-color: var(--middle-button-hover-color);
border-color: var(--middle-button-hover-color);
}
.split.right .button:hover {
background-color: var(--right-button-hover-color);
border-color: var(--right-button-hover-color);
}
.container {
position: relative;
width: 100%;
height: 100%;
background: var(--container-bg-color);
}
.split {
position: absolute;
width: 33%;
height: 100%;
overflow: hidden;
}
.split.left {
left: 0;
background: url(/img/design.jpeg) center center no-repeat;
background-size: cover;
}
.split.left:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--left-bg-color);
}
.split.middle {
left:33.3%;
background: url(/img/pexels.jpeg) center center no-repeat;
background-size: cover;
}
.split.middle:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--middle-bg-color);
}
.split.right {
right: 0;
background: url(/img/code.png) center center no-repeat;
background-size: cover;
}
.split.right:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--right-bg-color);
}
.split.left,
.split.right,
.split.middle,
.split.middle:before,
split.right:before,
split.left:before {
transition: var(--speed) all ease-in-out;
}
.hover-left .left {
width: var(--hover-width);
}
.hover-left .right {
width: var(--other-width);
}
.hover-left .middle {
width: var(--other-width)
}
.hover-left .right:before {
z-index: 1;
}
.hover-left .middle:before {
z-index: 2;
}
.hover-middle .middle {
width: var(--hover-width);
}
.hover-middle .left {
width: var(--other-width);
}
.hover-middle .right {
width: var(--other-width);
}
.hover-middle .right:before {
z-index: 1;
}
.hover-middle .left:before {
z-index: 2;
}
.hover-right .right {
width: var(--hover-width);
}
.hover-right .middle {
width: var(--other-width);
}
.hover-right .left {
width: var(--other-width);
}
.hover-right .left:before {
z-index: 1;
}
.hover-right .middle:before {
z-index: 2;
}
#media(max-width:800px) {
h1 {
font-size: 2rem;
}
.button {
width: 12rem;
}
}
#media(max-height:700px) {
.button {
top: 70%;
}
}
<div class="container">
<div class="split left">
<h1>The Designer</h1>
Read More
</div>
<div class="split middle">
<h1>The Noob</h1>
Read More
</div>
<div class="split right">
<h1>The Programmer</h1>
Read More
</div>
</div>

Couple of things.
First you'll want to move the middle div when hovering on the three divs and move it back when exiting:
left.addEventListener('mouseenter', () => {
container.classList.add('hover-left');
middle.style.left = "66.6666666%";
});
left.addEventListener('mouseleave', () => {
container.classList.remove('hover-left');
middle.style.left = "33.333333%";
});
middle.addEventListener('mouseenter', () => {
container.classList.add('hover-middle');
middle.style.left = "16.65%";
});
middle.addEventListener('mouseleave', () => {
container.classList.remove('hover-middle');
middle.style.left = "33.333333%";
});
right.addEventListener('mouseenter', () => {
container.classList.add('hover-right');
middle.style.left = "16.65%";
});
right.addEventListener('mouseleave', () => {
container.classList.remove('hover-right');
middle.style.left = "33.333333%";
});
Also, you'll want to change the --hover-width to be 66.6%.
:root {
--container-bg-color: #333;
--left-bg-color: rgba(223, 39, 39, 0.7);
--left-button-hover-color: rgba(161, 11, 11, 0.3);
--middle-bg-color: #ededed;
--middle-button-hover-color: #ffba00;
--right-bg-color: rgba(43, 43, 43, 0.8);
--right-button-hover-color: rgba(92, 92, 92, 0.3);
--hover-width: 66.6666666%;
--other-width: 16.65%;
--speed: 1000ms;
}
The problem with the space between the middle div and the right div is that 33.3 + 33.3 + 33.3 = 99.9. So, you'll have to make up the .1% somewhere. So, lets close the gap. Use 33.333333 instead.
View this codepen: https://codepen.io/bpuhnk/pen/wxWKjj

Scrolling bug in Firefox

I've been working on an overlay menu recently. It'll contain a long list of names (can't be avoided). It behaves perfectly on Chrome, but the list refuses to scroll on Firefox. I've no idea what's causing this but have created a JSFiddle to show what's happening.
Link here
A bit of the HTML:
<div class="full-menu">
<div class="full-menu--middle">
<button class="menu-toggle menu-toggle--close"></button>
<div class="section group menu_items">
<ul>
<li>a bunch of options vvv</li>
</ul>
</div>
</div>
</div>
A bit of the CSS:
html,
body {
height: 100%;
width: 100%;
}
.main_menu {
display: none;
}
.full-menu {
visibility: hidden;
display: table;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
}
.full-menu--open {
visibility: visible;
opacity: 1;
}
.full-menu--middle {
display: table-cell;
vertical-align: middle;
}
.menu-toggle {
background-color: transparent;
border: 0;
color: #fff;
position: fixed;
left: 20px;
top: 20px;
}
.menu-toggle:before {
content: '\f0c9';
font-family: 'FontAwesome';
margin: 0 20px 0 0;
}
.menu-toggle--close {
position: fixed;
top: 20px;
left: 20px;
}
.menu-toggle_black {
background-color: transparent;
border: 0;
color: #000;
position: fixed;
left: 20px;
top: 20px;
}
.menu-toggle_black:before {
content: '\f0c9';
font-family: 'FontAwesome';
margin: 0 20px 0 0;
}
.menu_items{
overflow: scroll;
height: 100%;
}
.page_inner_ {
display: table-cell;
vertical-align: middle;
}
.page_container {
display: table;
height: 100%;
width: 100%;
position: relative;
color: #ffffff;
}
Any help would be very much appreciated!
Thanks

Maybe you should give position: absolute; to .full-menu, instead of fixed.

Take display:table; off of .full-menu and take display:table-cell; off of .full-menu--middle then add overflow:scroll; to .full-menu.

How to Fix Overflow Issues in CSS Flex Layouts:
"... add min-height: 0; to the flex child that has our overflow container ..."
https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/

Responsive lightbox not working in iPhones

We're trying to make a lightbox responsive
Here's the original CSS:
#mageworxLightbox{ position: absolute; left: 0; width: 100%; z-index: 60002; text-align: center; line-height: 0; }
#mageworxLightbox img{ width: auto; height: auto;}
#mageworxLightbox a img{ border: none; }
#mageworxOuterImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#mageworxImageContainer{ padding: 10px; }
Which has been edited into:
#mageworxLightbox{ position: absolute; left: 0; width: 100%; height: auto !important; z-index: 60002; text-align: center; line-height: 0; }
#mageworxLightbox img{ width: auto; height: auto;}
#mageworxLightbox a img{ border: none; }
#mageworxOuterImageContainer{ width:80% !important; height: auto !important; position: relative; max-width: 600px; background-color: #fff; margin: 0 auto; }
#mageworxImageDataContainer{ width: 80% !important; height: auto !important; max-width: 600px; line-height: 2em; }
#mageworxImageContainer{ padding: 10px; height: auto !important; }
but the close button isn't working anymore on devices such as iPhones and I can't understand why; also in landscape mode the image is not resizing correctly.
This is our page:
http://www.arredodesignonline.com/it/letto-design-imbottito-heart.html
(to see the lightbox choose "modello letto" on dropdown and any image clicked in there will work)

Add this css to your stylesheet. Some elements have clashing layers, which causes the button to be "under" a layer so you are not clicking on a button but on some invisible layer.
#mageworxImageDataContainer{
...
position: relative;
}

device.iphone = function () {
return !device.windows() && find('iphone');
};
if (device.ios()) {
if (device.ipad()) {
addClass("ios ipad tablet");
} else if (device.iphone()) {
addClass("ios iphone mobile");
} else if (device.ipod()) {
addClass("ios ipod mobile");
}
}