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>

'classList' property returning null when element is present?

I'm fairly new to JS so I'm sorry if this has been answered.
I've siphoned through most answers and they didn't specifically fall in line with mine.
I'm not understanding why the element cant is called upon when it's there.
I don't think it seems to be anything with the CSS but I'm not completely sure.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('nav-links');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
navSlide();
display: flex;
justify-content:space-around;
align-items: center;
min-height: 8vh;
background-color: var(--mainBg);
}
.nav-links li{
list-style: none;
}
.nav-links{
display: flex;
justify-content: space-evenly;
width: 20%;
font-size: 20px;
}
.nav-links a{
letter-spacing: 2px;
color:var(--mainText);
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 4px;
background-color: var(--mainText);
margin:3px;
padding: 0;
}
.showacase-hero{
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("img/D1.jpg");
height: 600px;
background-position:center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-container{
text-align: center;
position: absolute;
top: 50%;
left: 28%;
color: var(--mainBanner);
font-size: 20px;
}
/* Media Queries*/
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:728px){
body{
overflow-x: hidden;
}
.nav-links{
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color:var(--mainBg);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
margin-left: 28em;
}
.nav-active{
transform: translateX(0%);
}
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
#media screen and(max-width:566px){
}
<body>
<nav>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="showacase-hero">
<div class="hero-container">
<h1>Yade's Pet</h1>
<span class="banner"><p>Petcare Specialist/Dog Walker</p></span>
<form action="https://www.w3docs.com/">
<button class="btn" type="submit">Let's Take a Stroll</button>
</form>
</div>
</div>
<script type="text/javascript" src="app2.js"></script>
</body>
</html>

nav-links is a class, not a tag, so add a dot before the class name:
document.querySelector( '.nav-links' );
PS: It's a bad practice to use variables const navSlide = () => { instead of a clear function declarations:
function navSlide () {
...
}

hover event listener and any event listener is not working

I have a simple portfolio item and I want to add a hover effect to this for showing information but hover event is not working.
I also tried jquery but any event listener is not working
let portfolioImage = document.getElementsByClassName('single-portfolio')[0];
let portfolioInfo = portfolioImage.getElementsByClassName('single-portfolio-details')[0];
portfolioImage.addEventListener('mouseover', () => {
portfolioInfo.style.transform = 'translatex(0px)';
portfolioInfo.style.opacity = '1';
});
portfolioImage.addEventListener('mouseout', () => {
portfolioInfo.style.transform = 'translatex(36px)';
portfolioInfo.style.opacity = '0';
});
.single-portfolio {
width: 200px;
position: relative;
}
.single-portfolio-details {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(200px);
transition: all 0.5s ease-in-out;
}
<div class="single-portfolio" onclick="function f(){console.log('.....')}">
<img src="img/آنلاین شو.jpg" alt="لوگوی آنلاین شو">
<div class="single-portfolio-details">
<h1>اسم کار</h1>
<p>بیشتر بدانید</p>
</div>
</div>

Instead of using javascript, you can use the css hover event for the class and set the styles of inside, in your situation:
.single-portfolio:hover > .single-portfolio-details {
transform: translatex(0px);
opacity: 1;
}
and add to your original css
.single-portfolio-details {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
opacity: 0;
transform: translatex(36px); /*This line, so when not hovering, it uses this value*/
transform: translateY(200px);
transition: all 0.5s ease-in-out;
}
.single-portfolio {
width: 200px;
position: relative;
}
.single-portfolio:hover > .single-portfolio-details {
transform: translatex(0px);
opacity: 1;
}
.single-portfolio-details {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
opacity: 0;
transform: translatex(36px);
transform: translateY(200px);
transition: all 0.5s ease-in-out;
}
<div class="single-portfolio" onclick="function f(){console.log('.....')}">
<img src="img/آنلاین شو.jpg" alt="لوگوی آنلاین شو">
<div class="single-portfolio-details">
<h1>اسم کار</h1>
<p>بیشتر بدانید</p>
</div>
</div>

align items on stretch to the center of the parent div

I tried to create a menu that stretches to full height on mobile screens. For the parent container I use a flexbox with flex-direction column and stretch the items on full screen height.
$(document).ready(() => {
$("#btnMenu").click(() => {
toggleMenu();
});
$(".navbarLink").click(() => {
if ($("#navbarItems").hasClass("activeNavbar")) {
toggleMenu();
}
});
});
function toggleMenu() {
$("#navbarItems").toggleClass("activeNavbar");
toggleMenuBtn();
}
function toggleMenuBtn() {
$("#btnMenu").toggleClass("activeMenuBtn");
}
body {
margin: 0;
}
.link {
text-decoration: none;
}
#navbar {
height: 60px;
top: 0;
padding-left: 200px;
padding-right: 200px;
position: sticky;
background: #1e222a;
}
#navbarItems {
height: 100%;
display: flex;
align-items: center;
}
#logoLink {
display: flex;
align-items: center;
}
#navbarItems .navbarItem:not(:first-child) {
margin-left: 30px;
}
.navbarItem {
background: #1e222a;
}
.navbarLink {
color: #ffffff;
}
.navbarLink:hover {
color: #3abcf3;
}
#btnMenuContainer {
height: 100%;
display: none;
}
#btnMenu {
cursor: pointer;
}
.menuBtnBar {
width: 35px;
height: 5px;
margin: 6px 0;
background-color: #ffffff;
transition: 0.4s;
}
.activeMenuBtn #barTop {
transform: rotate(-45deg) translate(-9px, 6px);
}
.activeMenuBtn #barCenter {
opacity: 0;
}
.activeMenuBtn #barBottom {
transform: rotate(45deg) translate(-8px, -8px);
}
#media(max-width: 1200px) {
#navbar {
padding-left: 150px;
padding-right: 150px;
}
}
#media(max-width: 1100px) {
#navbar {
padding-left: 0;
padding-right: 0;
}
#btnMenuContainer {
display: flex;
align-items: center;
}
#btnMenu {
margin-left: 20px;
}
#navbarItems {
margin-left: 0;
display: none;
}
#navbarItems.activeNavbar {
display: flex;
flex-direction: column;
align-items: stretch;
height: 100vh;
}
#logoLink {
display: inline-block;
}
.navbarItem {
flex: 1 1 100%;
align-items: center;
justify-content: center;
text-align: center;
}
#navbarItems .navbarItem:not(:first-child) {
margin-left: 0;
}
#navbarItems .navbarItem:not(:last-child) {
border-bottom: 1px solid #676767;
}
.navbarLink {
width: 100%;
height: 100%;
display: inline-block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<div id="btnMenuContainer">
<div id="btnMenu">
<div id="barTop" class="menuBtnBar"></div>
<div id="barCenter" class="menuBtnBar"></div>
<div id="barBottom" class="menuBtnBar"></div>
</div>
</div>
<div id="navbarItems">
<div class="navbarItem">
<a id="logoLink" class="link navbarLink" href="#">
<img class="img" src="https://cdn4.iconfinder.com/data/icons/32x32-free-design-icons/32/Ok.png">
</a>
</div>
<div class="navbarItem">
<a class="link navbarLink" href="#">
Link 2
</a>
</div>
<div class="navbarItem">
<a class="link navbarLink" href="#">
Link 3
</a>
</div>
</div>
</div>
When using align-items: stretch; how can I place the links (and the logo) back to center?
My second question is what can I use for height: 100vh; instead? I would like to keep it dynamic so maybe there is a better way than using a constant number?

It works fine. Check the code snippets and fiddle for further clarification.
Noe all links are center aligned and menu height takes the full height of the space available and there is no scroll any more.
My suggestion is to use 100vh for the height because it better than applying static value since 100vh is dynamic value.
https://jsfiddle.net/Sampath_Madhuranga/4uLb6rsw/7/
$(document).ready(() => {
$("#btnMenu").click(() => {
toggleMenu();
});
$(".navbarLink").click(() => {
if ($("#navbarItems").hasClass("activeNavbar")) {
toggleMenu();
}
});
});
function toggleMenu() {
$("#navbarItems").toggleClass("activeNavbar");
toggleMenuBtn();
}
function toggleMenuBtn() {
$("#btnMenu").toggleClass("activeMenuBtn");
}
body {
margin: 0;
}
.link {
text-decoration: none;
}
#navbar {
height: 60px;
top: 0;
padding-left: 200px;
padding-right: 200px;
position: sticky;
background: #1e222a;
}
#navbarItems {
height: 100%;
display: flex;
align-items: center;
}
#logoLink {
display: flex;
align-items: center;
}
#navbarItems .navbarItem:not(:first-child) {
margin-left: 30px;
}
.navbarItem {
background: #1e222a;
}
.navbarLink {
color: #ffffff;
}
.navbarLink:hover {
color: #3abcf3;
}
#btnMenuContainer {
height: 100%;
display: none;
}
#btnMenu {
cursor: pointer;
}
.menuBtnBar {
width: 35px;
height: 5px;
margin: 6px 0;
background-color: #ffffff;
transition: 0.4s;
}
.activeMenuBtn #barTop {
transform: rotate(-45deg) translate(-9px, 6px);
}
.activeMenuBtn #barCenter {
opacity: 0;
}
.activeMenuBtn #barBottom {
transform: rotate(45deg) translate(-8px, -8px);
}
#media(max-width: 1200px) {
#navbar {
padding-left: 150px;
padding-right: 150px;
}
}
#media(max-width: 1100px) {
#navbar {
padding-left: 0;
padding-right: 0;
}
#btnMenuContainer {
display: flex;
align-items: center;
}
#btnMenu {
margin-left: 20px;
}
#navbarItems {
margin-left: 0;
display: none;
}
#navbarItems.activeNavbar {
display: flex;
flex-direction: column;
align-items: stretch;
height: calc( 100vh - 60px);
}
#logoLink {
display: flex;
justify-content: center;
}
.navbarItem {
flex: 1 1 100%;
align-items: center;
justify-content: center;
text-align: center;
}
#navbarItems .navbarItem:not(:first-child) {
margin-left: 0;
}
#navbarItems .navbarItem:not(:last-child) {
border-bottom: 1px solid #676767;
}
.navbarLink {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<div id="btnMenuContainer">
<div id="btnMenu">
<div id="barTop" class="menuBtnBar"></div>
<div id="barCenter" class="menuBtnBar"></div>
<div id="barBottom" class="menuBtnBar"></div>
</div>
</div>
<div id="navbarItems">
<div class="navbarItem">
<a id="logoLink" class="link navbarLink" href="#">
<img class="img" src="https://cdn4.iconfinder.com/data/icons/32x32-free-design-icons/32/Ok.png">
</a>
</div>
<div class="navbarItem">
<a class="link navbarLink" href="#">
Link 2
</a>
</div>
<div class="navbarItem">
<a class="link navbarLink" href="#">
Link 3
</a>
</div>
</div>
</div>
Thanks.

Let .navbarLink also have a flex layout.
.navbarItem {
flex: 1 1 100%;
}
.navbarLink {
height: 100%;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
text-align: center;
}
By the way, here is a great resource that really helped me when I learned to use flexbox layouts. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Follow this link https://flexboxfroggy.com/ there is a really nice game which will teach you flexbox while playing in no time. After that you will be able to fix your navigation.

How to set div scrollable when content more than size of the page?

I have the next page:
<div id = "menu">
Menu on the left side
</div>
<div id = "header">
Header content of the page
</div>
<div id = "body">
Data Data Data Data Data Data Data
</div>
<div id = "footer">
Additional Information
</div>
Whith Next layout: Menu should be on the left side:
#menu{
background: #244a7c;
padding: 7px 23px 0 7px;
width: 299px;
height: 1000px;
overflow: inherit;
margin-left: 0px;
display: block;
float: left;
}
#header{
display: inline-block;
width: 400px;
border-bottom: 1px solid rgb(238, 238, 238);
}
Body can have different data inside. My problem is:
When content of the body more than user page I want to fix all div except body. Menu should be on the left side, Header should be on the top of the page and footer on the bottom and ONLY body should be scrollable.
Any help, please.
Thanks!

Here's 2 Pure CSS solution
Without fixing any height (header/footer) or width (left column).
I actually prefer the second solution. (even tho he has less browser support)
1 - using CSS tricks
this is a totally responsive design and work well with all browsers (IE10, FF, Chrome, Safari, Opera, mobile browsers)
Working Fiddle
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="LeftMenu">
</div>
<div class="Content">
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.LeftMenu
{
height: 100%;
float: left;
}
.Content
{
overflow: auto;
height: 100%;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
body > .Container
{
text-align: center;
}
.Header
{
background-color: #bf5b5b;
}
.LeftMenu
{
background-color: #bdbe4c;
}
.Content
{
background-color: #90adc1;
}
.Footer
{
background-color: #b5a8b7;
}
2 - using Flex
This layout can also be achieved using flex, but the current browser support is pure.
Here's a Working Fiddle only FF,Chrome,IE10.
HTML: (simpler)
<header>
</header>
<section class="Middle">
<div class="LeftMenu">
</div>
<div class="Content">
</div>
</section>
<footer>
</footer>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
text-align: center;
}
body
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.Middle
{
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.Content
{
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 0 0;
overflow: auto;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
header
{
background-color: #bf5b5b;
}
.LeftMenu
{
background-color: #bdbe4c;
}
.Content
{
background-color: #90adc1;
}
footer
{
background-color: #b5a8b7;
}

If you set the header, footer & menu position as fixed & leave the body as it is, it should work. Only the body will be scrollable.
#header {
position: fixed;
top: 0;
display: inline-block;
width: 400px;
border-bottom: 1px solid rgb(238, 238, 238);
}
#footer {
position: fixed;
bottom: 0;
}
#menu {
position: fixed;
left: 0;
background: #244a7c;
padding: 7px 23px 0 7px;
width: 299px;
height: 1000px;
}
#body {
margin-left: 300px;
margin-top: <header-height>;
margin-bottom: <footer-height>;
}