I have tried a example given on jsfiddle about a circular progress bar with image within it and its working fine when I am trying on fiddle but its not working when I am doing the same on my system locally.
I am getting this error:
progressbar.js:2050 Uncaught Error: Container does not exist: #bar
at Circle.Shape (progressbar.js:2050)
at new Circle (progressbar.js:1674)
at dummy.html:36
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js" charset="utf-8"></script>
<style media="screen">
svg {
width: 100%;
display: block;
}
.wrapper {
position: relative;
width: 200px;
height: 200px;
}
.wrapper> #bar,
.wrapper> img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper> img {
border-radius: 50%;
}
</style>
<script type="text/javascript">
var circle = new ProgressBar.Circle('#bar', {
strokeWidth: 3,
color: '#000'
});
circle.animate(1);
</script>
</head>
<body>
<div class="wrapper">
<img src="http://static.iltalehti.fi/terveys/kippari_etu2250612PP_tr.jpg" />
<div id="bar"></div>
</div>
</body>
</html>
The issue is because you're trying to instantiate the plugin on the #bar element before it exists in the DOM. You need to move that code block to just before the </body> element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js" charset="utf-8"></script>
<style media="screen">
svg {
width: 100%;
display: block;
}
.wrapper {
position: relative;
width: 200px;
height: 200px;
}
.wrapper > #bar,
.wrapper > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper > img {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="http://static.iltalehti.fi/terveys/kippari_etu2250612PP_tr.jpg" />
<div id="bar"></div>
</div>
<script type="text/javascript">
var circle = new ProgressBar.Circle('#bar', {
strokeWidth: 3,
color: '#000'
});
circle.animate(1);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<!--Live Demo & Tutorial foolishdeveloper.com -->
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/jquery.easypiechart.min.js" charset="utf-8"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Login Form</title>
<link rel="stylesheet" href="css.css">
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
display: flex;
justify-content: center;
height: 100vh;
background: #0d0c2d;
}
.container {
display: grid;
grid-template-columns: repeat(1, 160px);
grid-gap: 80px;
background: #0d0c2d;
box-shadow: -5px -5px 8px rgba(94, 104, 121, 0.288),
4px 4px 6px rgba(94, 104, 121, 0.288);
padding: 60px;
margin: auto 0;
}
#media (min-width: 420px) and (max-width: 659px) {
.container {
grid-template-columns: repeat(2, 160px);
}
}
#media (min-width: 660px) and (max-width: 899px) {
.container {
grid-template-columns: repeat(3, 160px);
}
}
#media (min-width: 900px) {
.container {
grid-template-columns: repeat(3, 160px);
}
}
.container .box {
width: 100%;
}
.container .box h2 {
display: block;
text-align: center;
color: #fff;
}
.container .box .chart {
position: relative;
width: 100%;
height: 100%;
text-align: center;
font-size: 40px;
line-height: 160px;
height: 160px;
color: #fff;
}
.container .box canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="chart" data-percent="90" >90%</div>
<h2>HTML</h2>
</div>
<div class="box">
<div class="chart" data-percent="72" >72%</div>
<h2>CSS</h2>
</div>
<div class="box">
<div class="chart" data-percent="81" >81%</div>
<h2>JAVASCRIPT</h2>
</div>
</div>
<script type="text/javascript">
$(function() {
$('.chart').easyPieChart({
size: 160,
barColor: "#36e617",
scaleLength: 0,
lineWidth: 15,
trackColor: "#525151",
lineCap: "circle",
animate: 2000,
});
});
</script>
</body>
<!--Live Demo & Tutorial foolishdeveloper.com -->
</html>
Related
I saw this example in w3schools where you set svg line attributes like x1, y1, x2, y2 and a line appears on screen. I am using same method to draw svg line between div elements using javascript and it doesn't seem to work.
I have two circle from which I read there x and y values using boundingClientRect in javascript and setting it on svg line using set attribute. I want line connecting those two circles
Here is my code
const circle1 = document.querySelector('.circle--1');
const circle2 = document.querySelector('.circle--2');
const line1 = document.querySelector('#line-1');
line1.setAttribute('x1', circle1.getBoundingClientRect().x);
line1.setAttribute('y1', circle1.getBoundingClientRect().y);
line1.setAttribute('x2', circle2.getBoundingClientRect().x);
line1.setAttribute('y2', circle2.getBoundingClientRect().y);
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
}
.header {
width: 100%;
height: 57rem;
background-image: linear-gradient(to right, #64b5f6, #1976d2);
padding: 0 2rem;
}
.graph {
width: 100%;
max-width: 120rem;
background-color: grey;
height: 100%;
position: relative;
}
.circle {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.circle--1 {
left: 0;
bottom: 5%;
}
.circle--1 {
left: 10%;
bottom: 60%;
}
.circle--2 {
right: 10%;
bottom: 60%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Connect Divs</title>
</head>
<body>
<header class="header">
<div class="graph">
<div class="circle circle--1">1</div>
<div class="circle circle--2">2</div>
<svg>
<line
id="line-1"
style="stroke: rgb(255, 255, 255); stroke-width: 3"
/>
</svg>
</div>
</header>
<script src="./script.js"></script>
</body>
</html>
An svg element has a size, and your line is outside of the that area.
The default setting for an svg is:
svg:not(:root) {
overflow: hidden;
}
so your line won't be visible.
If you add this to your style:
svg {
overflow: visible;
border: 1px solid red;
}
You will see where your svg is located and its dimension, and overflow: visible; makes the line visible:
const circle1 = document.querySelector('.circle--1');
const circle2 = document.querySelector('.circle--2');
const line1 = document.querySelector('#line-1');
line1.setAttribute('x1', circle1.getBoundingClientRect().x);
line1.setAttribute('y1', circle1.getBoundingClientRect().y);
line1.setAttribute('x2', circle2.getBoundingClientRect().x);
line1.setAttribute('y2', circle2.getBoundingClientRect().y);
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
}
.header {
width: 100%;
height: 57rem;
background-image: linear-gradient(to right, #64b5f6, #1976d2);
padding: 0 2rem;
}
.graph {
width: 100%;
max-width: 120rem;
background-color: grey;
height: 100%;
position: relative;
}
.circle {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.circle--1 {
left: 0;
bottom: 5%;
}
.circle--1 {
left: 10%;
bottom: 60%;
}
.circle--2 {
right: 10%;
bottom: 60%;
}
svg {
overflow: visible;
border: 1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Connect Divs</title>
</head>
<body>
<header class="header">
<div class="graph">
<div class="circle circle--1">1</div>
<div class="circle circle--2">2</div>
<svg>
<line
id="line-1"
style="stroke: rgb(255, 255, 255); stroke-width: 3"
/>
</svg>
</div>
</header>
<script src="./script.js"></script>
</body>
</html>
But instead of using overflow: visible; you should change the size and/or positioning of the svg.
I am trying to build a card which when it is not hovered, you can see only the image.
When the image is hovered, it should grow up and a div pops to the right of the image presenting some information.
For some reason, when I hover the image, everything works fine. But when my mouse hovers to the div besides it, everything starts to shake as if the hover is not working well.
I've tried to change the hover effect both to the image and the parent div which contains both divs but nothing fixed it.
What should I do?
$(document).ready(function(){
document.querySelector(`.personCard-0 .imgCard img`).addEventListener("mouseover", () => hoverAnimation(0), false);
document.querySelector(`.personCard-0 .imgCard img`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})
const hoverAnimation = (index) => {
console.log('inside add animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
const disableHoverAnimation = (index) => {
console.log('inside remove animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.cards{
display: flex;
}
.personCard{
display: flex;
margin: 10px;
transition: all 0.4s ease-in-out;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.63);
border-radius: 10px;
overflow: hidden;
}
.personCard.active{
transform: scale(1.5);
}
.imgCard{
height: 200px;
width: 130px;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.imgCard img{
height: 200px;
width: 130px;
}
.personalInfoCard{
background-color: palevioletred;
display: flex;
height: 200px;
width: 0px;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: -1;
font-size: 14px;
transition: all 0.4s ease-in-out;
}
.personalInfoCard.active{
width: 200px;
display: flex;
z-index: 1;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cards">
<div class="personCard-0 personCard" >
<div class="imgCard">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
<div class="personalInfoCard">
<p>Name: Rand name</p>
<p>Age: Rand age</p>
<p>Job: Rand job</p>
<p>Study: Rand proffesion</p>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
Change your target to be the card container so that when it grows, you'll still be hovering over it. As it is now, your target is the image - which when it animates left triggers the mouseout
$(document).ready(function() {
document.querySelector(`.personCard-0`).addEventListener("mouseover", () => hoverAnimation(0), false);
document.querySelector(`.personCard-0`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})
$(document).ready(function() {
document.querySelector(`.personCard-0`).addEventListener("mouseover", () => hoverAnimation(0), false);
document.querySelector(`.personCard-0`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})
const hoverAnimation = (index) => {
console.log('inside add animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
const disableHoverAnimation = (index) => {
console.log('inside remove animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.cards {
display: flex;
}
.personCard {
display: flex;
margin: 10px;
transition: all 0.4s ease-in-out;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.63);
border-radius: 10px;
overflow: hidden;
}
.personCard.active {
transform: scale(1.5);
}
.imgCard {
height: 200px;
width: 130px;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.imgCard img {
height: 200px;
width: 130px;
}
.personalInfoCard {
background-color: palevioletred;
display: flex;
height: 200px;
width: 0px;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: -1;
font-size: 14px;
transition: all 0.4s ease-in-out;
}
.personalInfoCard.active {
width: 200px;
display: flex;
z-index: 1;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cards">
<div class="personCard-0 personCard">
<div class="imgCard">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
<div class="personalInfoCard">
<p>Name: Rand name</p>
<p>Age: Rand age</p>
<p>Job: Rand job</p>
<p>Study: Rand proffesion</p>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
I have the problem, that I want to create a page and there is one image over another and I want to make it go to different places on the second, larger image while you are scrolling.
So if you scroll down, the website should not go down, but on the second picture ( id="maps"
the first picture id="train" should move.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vorstellung meiner Herausforderung</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src = "images/maps.png" alt = "Maps" id="maps">
<img src="images/zug.png" alt= "Zug" id="train">
<h1>Meine Herausforderung</h1>
</body>
</html>
And the css:
* {
margin: 0;
padding: 0;
}
body {
background-color: #f2f2f2
}
h1 {
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
#maps {
width: 100%;
position: absolute;
}
#train {
position: absolute;
margin-left: 55%;
margin-top: 10%;
width: 3%;
}
Thanks for any help and sorry for my english.
Would be very happy to help you, if you provide more insight about the problem.
From the Problem statement I assume, you want to move a small image which is on top of a large image when you mouseover on it, without scrolling the body/window viewport.
Please check this helps you
const $train = $('#train')
document.addEventListener('scroll', function (event) {
$train.css({left: window.pageYOffset*10});
}, true /*Capture event*/);
* {
margin: 0;
padding: 0;
}
body {
background-color: #f2f2f2
overscroll: scroll;
}
h1 {
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
#map-container {
width: 100%;
height: 100vh;
position: relative;
background: url(https://upload.wikimedia.org/wikipedia/commons/9/95/World_map_green.png);
background-attachment: fixed;
background-size: cover;
}
#map, .inner-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow:scroll;
}
.inner-container {
background: transparent;
z-index: 2;
}
#train {
width:50px;
height:50px;
top: 20%;
position: absolute;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vorstellung meiner Herausforderung</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="map-container">
<!-- <img src = "" id="maps"> -->
<div class="inner-container">
<img src="https://png2.cleanpng.com/sh/0f45ce863aeba0805894dc22bf651040/L0KzQYm3UsAzN5Dqj5H0aYP2gLBuTgRzaZpzRdVqcoTyf7A0kvFqdF55itN3c4DygsW0kvVlNaV3edt3LUXkR4WCWcdiQGpmfNcBLkC3RIq6UMg3OWY2T6cEMEmzRoa9U8kveJ9s/kisspng-train-cartoon-rail-transport-red-train-5a74997a89ade6.0449308615175909065639.png" alt= "Zug" id="train">
</div>
</div>
<h1>Meine Herausforderung</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
It has been two days im trying to solve this and i cant.
I made a customized div that displays images in a kind of a bar that auto-adjusts itself and stays centered.
And i made it work here:
https://codepen.io/SCalmStorm/pen/povwaed
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.imgstyle{
display: inline-block;
width: 40px;
height: auto;
background-position: 50px 50px;
background-size: cover;
border-radius: 50%;
margin-right: 10px;
}
#containerItem{
margin: auto;
Position: relative;
top: 65px;
background: green;
min-width: 10px;
max-width: 700px;
height:50px;
border-radius: 50px;
box-shadow: 0 0 10px 2px;
z-index: 21;
padding: 5px 5px;
white-space:nowrap;
overflow-x: auto;
overflow-y: hidden;
}
body {
background-size: cover;
background-color: khaki;
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link href="styles.css" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Quantico&display=swap" rel="stylesheet">
<title>Quiz App</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
</head>
<div class="bg"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<body>
<div id="containerItem">
</div>
</body>
<script>
number = Math.floor(Math.random() * 20) + 1
alert(number)
for (i = 0; i < number; i++) {
var img = document.createElement('img')
document.getElementById('containerItem').appendChild(img);
img.src = "https://i.pinimg.com/originals/54/a2/c6/54a2c62234d05c174e344b235cbb6f49.jpg";
img.className = "imgstyle";
}
var newDiv = document.createElement('img')
newDiv.id = "containerItem"
</script>
</html>
And that is great. But as i worked on my other script i needed it inserted in another div with the class StandardSlide. But it completely breaks apart :(. And the only thing i understand is that it conflicts with the position:fixed. But when i turn it off, or change it to others it messes up my container. How can i solve this without messing it up? Or without changing the fixed? Why is the fix from this new container affecting the other divs :(, i know it has to do with the relative that inherits the parent style :(:
This one, it no longer adjusts the green bar to the images.
https://codepen.io/SCalmStorm/pen/xxbPqVw
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.imgstyle{
display: inline-block;
width: 40px;
height: auto;
background-position: 50px 50px;
background-size: cover;
border-radius: 50%;
margin-right: 10px;
}
.StandardSlide{
Position: fixed;
top: 10%;
background: rgba(75, 39, 73, 0.7);
left: 15%;
right: 15%;
/*width: 80%;*/
bottom: 5%;
/*background-color: white;*/
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
z-index: 20;
}
#containerItem{
margin: auto;
Position: relative;
top: 65px;
background: green;
min-width: 10px;
max-width: 700px;
height:50px;
border-radius: 50px;
box-shadow: 0 0 10px 2px;
z-index: 21;
padding: 5px 5px;
white-space:nowrap;
overflow-x: auto;
overflow-y: hidden;
}
body {
background-size: cover;
background-color: khaki;
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link href="styles.css" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Quantico&display=swap" rel="stylesheet">
<title>Quiz App</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
</head>
<div class="bg"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<body>
<div class="StandardSlide">
<div id="containerItem">
</div>
</div>
</body>
<script>
number = Math.floor(Math.random() * 20) + 1
//alert(number)
for (i = 0; i < number; i++) {
var img = document.createElement('img')
document.getElementById('containerItem').appendChild(img);
img.src = "https://i.pinimg.com/originals/54/a2/c6/54a2c62234d05c174e344b235cbb6f49.jpg";
img.className = "imgstyle";
}
var newDiv = document.createElement('img')
newDiv.id = "containerItem"
</script>
</html>
I created a web page that scrolls horizontally when you scroll vertical. And I want the scrolled value on scrolling. Here is what I have done
* {
padding: 0;
margin: 0;
}
#log {
position: fixed;
width: 500px;
height: 25px;
border: solid black 1px;
z-index: 999;
}
img{
position: fixed;
z-index: 999;
top: 50%;
left: 90vw;
transform: translate(0, -50%);
cursor: pointer;
user-select: none;
}
.outer-wrapper {
height: 100vw;
width: 100vh;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
scrollbar-width: none; /*---Firefox property---*/
-ms-overflow-style: none; /*---i.e. family---*/
}
::-webkit-scrollbar {
display: none; /*---Chrome and Safari*/
}
.wrapper {
display: flex;
flex-direction: row;
height: 100vh;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}
.slide {
height: 100vh;
width: 100vw;
}
.slide1 {
background-color: teal;
}
.slide2 {
background-color: tomato;
}
.slide3 {
background-color: slateblue;
}
.slide4 {
background-color: palevioletred;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Horizonral scroll</title>
</head>
<body>
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png" alt="arrow_right" width="70px" height="70px">
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
I tried using window.addEventListener('scroll') but not getting any scrolled value. I tried debugging Js code in chrome but function is not even invoking on scrolling.
window.addEventListener('scroll', () => {
console.log(Scrolled);
});
You need to set addEventListener on scroll of div.outer-wrapper and get scrollTop
document.getElementsByClassName("outer-wrapper")[0].addEventListener('scroll', function(e) {
var div = document.getElementsByClassName("outer-wrapper")[0].scrollTop;
console.log(div);
});
* {
padding: 0;
margin: 0;
}
#log {
position: fixed;
width: 500px;
height: 25px;
border: solid black 1px;
z-index: 999;
}
img{
position: fixed;
z-index: 999;
top: 50%;
left: 90vw;
transform: translate(0, -50%);
cursor: pointer;
user-select: none;
}
.outer-wrapper {
height: 100vw;
width: 100vh;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
scrollbar-width: none; /*---Firefox property---*/
-ms-overflow-style: none; /*---i.e. family---*/
}
::-webkit-scrollbar {
display: none; /*---Chrome and Safari*/
}
.wrapper {
display: flex;
flex-direction: row;
height: 100vh;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}
.slide {
height: 100vh;
width: 100vw;
}
.slide1 {
background-color: teal;
}
.slide2 {
background-color: tomato;
}
.slide3 {
background-color: slateblue;
}
.slide4 {
background-color: palevioletred;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Horizonral scroll</title>
</head>
<body>
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png" alt="arrow_right" width="70px" height="70px">
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
You can use element.scrollTop and element.scrollLeft to get the vertical and horizontal offset, respectively, that has been scrolled. element can be document.body if you care about the whole page. You can compare it to element.offsetHeight and element.offsetWidth (again, element may be the body) if you need percentages.