Javascript dynamically adding divs from the left side

Javascript dynamically adding divs from the left side - javascript

At the moment it is starting from the left side and adding div's to the right but how can I make it add div's from the left. So that the first card would appear in the middle and add them behind it (to the left side).
I have tried setting float: right, but it does not give the wanted results.
var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var width;
var id;
var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var lastCard;
var width;
var id;
function sortCards() {
var cards = document.getElementsByClassName("card"),
cw = parentEl.clientWidth,
sw = parentEl.scrollWidth,
diff = sw - cw,
offset = diff / (cards.length - 1 );
for (var i = 0; i < cards.length; i++) {
i != 0 && (cards[i].style.transform = "translateX(-" + offset * i + "px)");
}
}
//Move card
document.getElementById("moveCard").addEventListener("click", function () {
myMove();
});
//Start the game
document.getElementById("play").addEventListener("click", function() {
move();
});
//Stop the game
document.getElementById("stop").addEventListener("click", function() {
stop();
});
function move() {
width = 1;
id = setInterval(frame, 5);
function frame() {
if (width >= 100) {
elem.style.width = 1 + '%';
clearInterval(id);
addCard();
move();
} else {
width++;
elem.style.width = width + '%';
}
}
}
function myMove() {
var elem = lastCard;
lastCard = lastCard.previousSibling;
var pos = 0;
var id = setInterval(movie, 5);
function movie() {
if (pos == 350) {
clearInterval(id);
elem.remove();
} else {
pos = pos + 5;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
function addCard(){
var div = document.createElement("div");
div.style.position = "relative";
div.style.color = "green";
div.style.left = "auto";
div.classList.add("card");
parentEl.appendChild(div);
lastCard = div;
sortCards();
}
function stop() {
elem.style.width = 1 + '%';
clearInterval(id);
}
sortCards();
.cards {
display: flex;
max-width: 300px;
}
.card {
height: 90px;
border: 1px solid black;
border-radius: 3px;
background-color: rgba(255, 0, 0, 0.4);
flex: 0 0 50px;
background: red;
transition: transform .25s;
}
.cardGreen {
height: 90px;
border: 1px solid black;
border-radius: 3px;
background-color: rgba(255, 0, 0, 0.4);
flex: 0 0 50px;
background: green;
transition: transform .25s;
}
#myProgress {
position: relative;
width: 100%;
height: 10px;
background-color: grey;
}
#myBar {
position: absolute;
width: 1%;
height: 100%;
background-color: green;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
/*padding: 10px;*/
height: 300px; /* Should be removed. Only for demonstration */
}
.left, .right {
width: 20%;
}
.middle {
width: 60%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header>
<h1>Simple game</h1>
</header>
<div class="row">
<div class="column left" style="background-color:#aaa;">
<div><button class="btn btn-default btn-block" id="play">Start Game</button></div>
<div><button class="btn btn-default btn-block" id="stop">Pause</button></div>
<div><button class="btn btn-default btn-block" id="moveCard">Move Card</button></div>
</div>
<div class="column middle" style="background-color:#bbb;">
<div class='cards middle' id="cards">
<!--<div class='cardGreen'></div>-->
</div>
<div id="myProgress">
<div id="myBar"></div>
</div>
</div>
<div class="column right" style="background-color:#ccc;">
<h2>Tutorial</h2>
<p>Will be here soon :)</p>
</div>
</div>
<script src="gamelogic.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Any hints or suggestions will come really in handy.

to add en element in the begining of the parent and not at the end, use prependinstead of append
parentEl.prepend(div);
The ParentNode.prepend method inserts a set of Node objects or DOMString objects >before the first child of the ParentNode.
this won't make the first card appear in the middle though, you're gonna have to rewok your positioning of the cards.
var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var width;
var id;
var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var lastCard;
var width;
var id;
function sortCards() {
var cards = document.getElementsByClassName("card"),
cw = parentEl.clientWidth,
sw = parentEl.scrollWidth,
diff = sw - cw,
offset = diff / (cards.length - 1);
for (var i = 0; i < cards.length; i++) {
i != 0 && (cards[i].style.transform = "translateX(-" + offset * i + "px)");
}
}
//Move card
document.getElementById("moveCard").addEventListener("click", function() {
myMove();
});
//Start the game
document.getElementById("play").addEventListener("click", function() {
move();
});
//Stop the game
document.getElementById("stop").addEventListener("click", function() {
stop();
});
function move() {
width = 1;
id = setInterval(frame, 5);
function frame() {
if (width >= 100) {
elem.style.width = 1 + '%';
clearInterval(id);
addCard();
move();
} else {
width++;
elem.style.width = width + '%';
}
}
}
function myMove() {
var elem = lastCard;
lastCard = lastCard.previousSibling;
var pos = 0;
var id = setInterval(movie, 5);
function movie() {
if (pos == 350) {
clearInterval(id);
elem.remove();
} else {
pos = pos + 5;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
var i = 1;
function addCard() {
var div = document.createElement("div");
div.style.left = "auto";
div.innerHTML = i++;
div.style.position = "relative";
div.style.color = "green";
div.classList.add("card");
parentEl.prepend(div);
lastCard = div;
sortCards();
}
function stop() {
elem.style.width = 1 + '%';
clearInterval(id);
}
sortCards();
.cards {
display: flex;
max-width: 300px;
}
.card {
height: 90px;
border: 1px solid black;
border-radius: 3px;
background-color: rgba(255, 0, 0, 0.4);
flex: 0 0 50px;
background: red;
transition: transform .25s;
}
.cardGreen {
height: 90px;
border: 1px solid black;
border-radius: 3px;
background-color: rgba(255, 0, 0, 0.4);
flex: 0 0 50px;
background: green;
transition: transform .25s;
}
#myProgress {
position: relative;
width: 100%;
height: 10px;
background-color: grey;
}
#myBar {
position: absolute;
width: 1%;
height: 100%;
background-color: green;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
/*padding: 10px;*/
height: 300px;
/* Should be removed. Only for demonstration */
}
.left,
.right {
width: 20%;
}
.middle {
width: 60%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<h1>Simple game</h1>
</header>
<div class="row">
<div class="column left" style="background-color:#aaa;">
<div><button class="btn btn-default btn-block" id="play">Start Game</button></div>
<div><button class="btn btn-default btn-block" id="stop">Pause</button></div>
<div><button class="btn btn-default btn-block" id="moveCard">Move Card</button></div>
</div>
<div class="column middle" style="background-color:#bbb;">
<div class='cards middle' id="cards">
<!--<div class='cardGreen'></div>-->
</div>
<div id="myProgress">
<div id="myBar"></div>
</div>
</div>
<div class="column right" style="background-color:#ccc;">
<h2>Tutorial</h2>
<p>Will be here soon :)</p>
</div>
</div>
EDIT :
to make the first car appear in the middle , make the parent's width 0% and make it grow every time you add a card until you reach 100%, and add margin:auto
var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var width;
var id;
var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var lastCard;
var width;
var id;
function sortCards() {
var cards = document.getElementsByClassName("card"),
cw = parentEl.clientWidth,
sw = parentEl.scrollWidth,
diff = sw - cw,
offset = diff / (cards.length - 1);
for (var i = 0; i < cards.length; i++) {
i != 0 && (cards[i].style.transform = "translateX(-" + offset * i + "px)");
}
}
//Move card
document.getElementById("moveCard").addEventListener("click", function() {
myMove();
});
//Start the game
document.getElementById("play").addEventListener("click", function() {
move();
});
//Stop the game
document.getElementById("stop").addEventListener("click", function() {
stop();
});
function move() {
width = 1;
id = setInterval(frame, 5);
function frame() {
if (width >= 100) {
elem.style.width = 1 + '%';
clearInterval(id);
addCard();
move();
} else {
width++;
elem.style.width = width + '%';
}
}
}
function myMove() {
var elem = lastCard;
lastCard = lastCard.previousSibling;
var pos = 0;
var id = setInterval(movie, 5);
function movie() {
if (pos == 350) {
clearInterval(id);
elem.remove();
} else {
pos = pos + 5;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
var i = 1;
function addCard() {
var div = document.createElement("div");
div.style.left = "auto";
div.innerHTML = i++;
div.style.position = "relative";
div.style.color = "green";
div.classList.add("card");
if (parseInt(parentEl.style.width) < 100)
parentEl.style.width = (parseInt(parentEl.style.width) + 10) + '%';
parentEl.prepend(div);
lastCard = div;
sortCards();
}
function stop() {
elem.style.width = 1 + '%';
clearInterval(id);
}
sortCards();
.cards {
display: flex;
max-width: 300px;
}
.card {
height: 90px;
border: 1px solid black;
border-radius: 3px;
background-color: rgba(255, 0, 0, 0.4);
flex: 0 0 50px;
background: red;
transition: transform .25s;
}
.cardGreen {
height: 90px;
border: 1px solid black;
border-radius: 3px;
background-color: rgba(255, 0, 0, 0.4);
flex: 0 0 50px;
background: green;
transition: transform .25s;
}
#myProgress {
position: relative;
width: 100%;
height: 10px;
background-color: grey;
}
#myBar {
position: absolute;
width: 1%;
height: 100%;
background-color: green;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
/*padding: 10px;*/
height: 300px;
/* Should be removed. Only for demonstration */
}
.left,
.right {
width: 20%;
}
#cards {
width: 15%;
margin: auto;
}
.middle {
width: 60%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<header>
<h1>Simple game</h1>
</header>
<div class="row">
<div class="column left" style="background-color:#aaa;">
<div><button class="btn btn-default btn-block" id="play">Start Game</button></div>
<div><button class="btn btn-default btn-block" id="stop">Pause</button></div>
<div><button class="btn btn-default btn-block" id="moveCard">Move Card</button></div>
</div>
<div class="column middle" style="background-color:#bbb;">
<div class='cards middle' id="cards" style="width:0%">
<!--<div class='cardGreen'></div>-->
</div>
<div id="myProgress">
<div id="myBar"></div>
</div>
</div>
<div class="column right" style="background-color:#ccc;">
<h2>Tutorial</h2>
<p>Will be here soon :)</p>
</div>
</div>

Related

flip scroll when scrolling

We need advice on how to do what would happen with normal scrolling of the page (with a wheel, or in a mob with a finger) after the block has been screwed up to the top of the screen, it began to scroll horizontally and after the edge of the block is reached, the standard scroll continues, respectively, if the scroll goes up, then that's it in reverse order. (There may be several such blocks on a page)
* {
box-sizing: border-box;
margin: 0;
}
body {
overflow-x: hidden;
}
.simple {
height: 100vh;
background: #1f69c0;
border-bottom: 2px solid #777;
}
.simple2 {
height: 400px;
background: #EEAA07;
border-bottom: 2px solid #777;
}
.simple3 {
height: 400px;
background: #07eed9;
border-bottom: 2px solid #777;
}
.outer {
height: 150px;
background: #7b8e39;
overflow-y: hidden;
overflow-x: scroll;
}
.inner {
height: 100%;
margin: 0 100px;
display: flex;
}
.cube {
min-width: 200px;
height: 100px;
background: #f6f6f6;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="simple"></div>
<div class="outer">
<div class="inner">
<div class="cube">1</div>
<div class="cube">2</div>
<div class="cube">3</div>
<div class="cube">4</div>
<div class="cube">5</div>
<div class="cube">6</div>
<div class="cube">7</div>
<div class="cube">8</div>
<div class="cube">9</div>
<div class="cube">10</div>
</div>
</div>
<div class="simple2"></div>
<div class="simple3"></div>
Here is an approximate structure, until block 2 has scrolled to the end, block 3 should be visible and after 2 has scrolled horizontally to the end, the standard scroll will continue
PS Here is an example (https://horizontalscrolling.wpdemos.net/horizontal-scrolling/) of how scrolling should work, although there can be more than 1 block on one screen

This technique needs to use javascript called "GSAP" which is a high-performance javascript animation library.
I found a similar animation that you were looking for.
Hopefully, this will help :)
//https://codepen.io/osublake/pen/e72106811a34efcccff91a03568cc790.js?v=3
class SmoothScroll {
constructor(options) {
this.endThreshold = 0.05;
this.requestId = null;
this.maxDepth = 10;
this.viewHeight = 0;
this.halfViewHeight = 0;
this.maxDistance = 0;
this.viewWidth = 0;
this.halfViewWidth = 0;
this.maxDistanceWidth = 0;
this.scrollHeight = 0;
this.endScroll = 0;
this.returnCurrentScroll = 0;
this.currentScroll = 0;
this.scrollTransform = 0;
this.horizontalScroll = 0;
this.resizeRequest = 1;
this.scrollRequest = 0;
this.scrollItems = [];
this.lastTime = -1;
this.maxElapsedMS = 100;
this.targetFPMS = 0.06;
// this.scrollBody = options.scrollBody;
// this.scrollSpacer = options.scrollSpacer;
this.target = options.target;
this.scrollEase = options.scrollEase != null ? options.scrollEase : 0.1;
this.maxOffset = options.maxOffset != null ? options.maxOffset : 500;
this.horizontalScrollWrapper = options.horizontalScrollWrapper;
this.horizontalScrollTarget = options.horizontalScrollTarget;
this._horziontalSetHeihgt();
this.childElements = this._childElements();
this.rectHorStart = this.horizontalScrollWrapper.getBoundingClientRect();
this.horzItemStart = {
top: this.rectHorStart.top,
bottom: this.rectHorStart.bottom,
height: this.rectHorStart.height
}
this.addItems();
window.addEventListener("resize", this._onResize);
window.addEventListener("scroll", this._onScroll);
//this.scrollBody.addEventListener("scroll", this._onScroll);
this._update();
}
_childElements = (event) => {
const childElementsNode = this.target.querySelectorAll("*[data-color]");
return childElementsNode;
}
_horizonstalScrollRect = (event) => {
const horzintalRect = this.horizontalScrollTarget.getBoundingClientRect();
return horzintalRect;
}
_lastScrollRect = (event) => {
const lastScrollRect = this.horizontalScrollTarget.lastElementChild.getBoundingClientRect();
return lastScrollRect;
}
_horziontalSetHeihgt = (event) => {
let horScrHeight = 0;
if (
this.horizontalScrollTarget !== null &&
this.horizontalScrollWrapper !== null
) {
const lastScrollRect = this._lastScrollRect();
horScrHeight = this.horizontalScrollTarget.scrollWidth - lastScrollRect.width + this._horizonstalScrollRect().height;
this.horizontalScrollWrapper.style.height = horScrHeight + "px";
}
}
_onResize = (event) => {
this.resizeRequest++;
if (!this.requestId) {
this.lastTime = performance.now();
this.requestId = requestAnimationFrame(this._update);
}
};
_onScroll = (event) => {
this.scrollRequest++;
if (!this.requestId) {
this.lastTime = performance.now();
this.requestId = requestAnimationFrame(this._update);
}
};
_horizonstalScroll = (scrollY,dt) => {
if (this.horizontalScrollWrapper !== null) {
const rectHor = this.horizontalScrollWrapper.getBoundingClientRect();
const lastScrollRect = this._lastScrollRect();
const itemHor = {
target: this.horizontalScrollTarget,
targetRect: this._horizonstalScrollRect(),
top: rectHor.top,
bottom: rectHor.bottom + scrollY,
topScroll: rectHor.top + scrollY,
horizonstalMove: 0,
};
itemHor.horizonstalMove += this.currentScroll - this.horzItemStart.top;
if(scrollY >= this.horzItemStart.top && scrollY <= this.horzItemStart.bottom - itemHor.targetRect.height){
itemHor.target.style.position = 'fixed';
itemHor.target.style.transform = `translate3d(-${itemHor.horizonstalMove}px,0px,0px)`;
//this._paralaxHorizontal(dt);
if(lastScrollRect.x <= (lastScrollRect.width/2)){
this.scrollTransform = this.horzItemStart.bottom - itemHor.targetRect.height;
itemHor.target.style.top = this.horzItemStart.bottom - itemHor.targetRect.height+'px';
}else {
this.scrollTransform = this.horzItemStart.top;
itemHor.target.style.top = this.horzItemStart.top+'px';
}
}
}
};
_changeColorBody = (event) => {
if(this.childElements.length > 0){
this.childElements.forEach(child => {
const wrapper = document.querySelector('.change_color_page');
const childRect = child.getBoundingClientRect();
const childAttr = child.getAttribute('data-color');
if(childRect.y <= this.halfViewHeight && childRect.bottom >= this.halfViewHeight){
if(childAttr == "off_white"){
if(!document.body.classList.contains('white')){
document.body.classList.add('white');
}
if(!wrapper.classList.contains('white')){
wrapper.classList.add('white');
}
}else if(childAttr == "dark"){
if(document.body.classList.contains('white')){
document.body.classList.remove('white');
}
if(wrapper.classList.contains('white')){
wrapper.classList.remove('white');
}
}
}
});
}
}
_update = (currentTime = performance.now()) => {
let elapsedMS = currentTime - this.lastTime;
if (elapsedMS > this.maxElapsedMS) {
elapsedMS = this.maxElapsedMS;
}
const deltaTime = elapsedMS * this.targetFPMS;
const dt = 1 - Math.pow(1 - this.scrollEase, deltaTime);
const resized = this.resizeRequest > 0;
const scrollY = window.pageYOffset;
//const scrollY = this.scrollBody.scrollTop;
if (resized) {
this._horziontalSetHeihgt();
const height = this.target.clientHeight;
document.body.style.height = height + "px";
//this.scrollSpacer.style.height = height + "px";
this.scrollHeight = height;
this.viewHeight = window.innerHeight;
this.halfViewHeight = this.viewHeight / 2;
this.maxDistance = this.viewHeight * 2;
this.resizeRequest = 0;
this.viewWidth = window.innerWidth;
this.halfViewWidth = this.viewWidth / 2;
this.maxDistanceWidth = this.viewWidth * 2;
}
this.endScroll = scrollY;
// this.scrollTransform += (scrollY - this.scrollTransform) * this.scrollEase;
this.scrollTransform += (scrollY - this.scrollTransform) * dt;
this.currentScroll += (scrollY - this.currentScroll) * dt;
if (Math.abs(scrollY - this.currentScroll) < this.endThreshold || resized) {
this.currentScroll = scrollY;
this.scrollRequest = 0;
}
if (
Math.abs(scrollY - this.scrollTransform) < this.endThreshold ||
resized
) {
this.scrollTransform = scrollY;
this.scrollRequest = 0;
}
///change color section
this._changeColorBody();
///horizontal scroll
this._horizonstalScroll(this.currentScroll,dt);
// const scrollOrigin = scrollY + this.halfViewHeight;
const scrollOrigin = this.currentScroll + this.viewHeight;
this.target.style.transform = `translate3d(0px,-${this.scrollTransform}px,0px)`;
//items
for (let i = 0; i < this.scrollItems.length; i++) {
const item = this.scrollItems[i];
const distance = scrollOrigin - item.top;
const offsetRatio = distance / this.maxDistance;
item.endOffset = Math.round(
this.maxOffset * item.depthRatio * offsetRatio
);
if (Math.abs(item.endOffset - item.currentOffset < this.endThreshold)) {
item.currentOffset = item.endOffset;
} else {
// item.currentOffset += (item.endOffset - item.currentOffset) * this.scrollEase;
item.currentOffset += (item.endOffset - item.currentOffset) * dt;
}
if(item.direction == "y"){
item.target.style.transform = `translate3d(0px,${item.currentOffset}px,0px)`;
}else if(item.direction == "x"){
item.target.style.transform = `translate3d(${item.currentOffset}px,0px,0px)`;
}
}
this.lastTime = currentTime;
this.requestId =
this.scrollRequest > 0 ? requestAnimationFrame(this._update) : null;
};
addItems() {
this.scrollItems = [];
const elements = document.querySelectorAll("*[data-depth]");
for (let i = 0; i < elements.length; i++) {
const element = elements[i];
const depth = +element.getAttribute("data-depth");
const direction_item = element.getAttribute("data-direction");
const rect_item = element.getBoundingClientRect();
const item = {
rect: rect_item,
target: element,
top: rect_item.top + window.pageYOffset,
//top: rect_item.top + this.scrollBody.scrollTop,
depth: depth,
depthRatio: depth / this.maxDepth,
currentOffset: 0,
endOffset: 0,
direction: direction_item
};
this.scrollItems.push(item);
}
return this;
}
currentScrollReturn() {
return this.currentScroll;
}
}
document.documentElement.style.setProperty(
"--scrollbar-size",
getScrollbarSize() + "px"
);
var scroller = new SmoothScroll({
// scrollBody: document.querySelector(".scroll-content"),
// scrollSpacer: document.querySelector(".spacer"),
target: document.querySelector(".scroll-container"), // element container to scroll
scrollEase: 0.05,
horizontalScrollWrapper: document.querySelector(".horizontal-scroll-wrapper"),
horizontalScrollTarget: document.querySelector(".horizontal-scroll")
});
function getScrollbarSize() {
var div = document.createElement("div");
div.classList.add("scrollbar-test");
document.body.appendChild(div);
var size = div.offsetWidth - div.scrollWidth;
document.body.removeChild(div);
return size;
}
$white: #fbe8ee;
$black: #0a0a0a;
:root {
--scrollbar-size: 0px;
}
*, :after, :before {
box-sizing: border-box;
}
body {
}
.viewport {
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
body {
overflow-x: hidden;
overflow-y: scroll;
padding: 0;
margin: 0;
font-family: "Courier New", Courier, monospace;
*:not(.change_color_page) {
color: $white;
transition: color 0.5s ease-in-out, border-color 0.5s ease;
border-color: $white;
}
&.white {
*:not(.change_color_page) {
color: $black;
transition: color 0.5s ease-in-out, border-color 0.5s ease;
border-color: $black;
}
}
}
.change_color_page {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: $black;
transition: background-color 0.5s ease;
backface-visibility: hidden;
transform-style: preserve-3d;
&.white {
background-color: $white;
}
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease-in-out;
background-color: $white;
&.white {
background-color: $black;
}
}
.scrollbar-test {
position: absolute;
visibility: hidden;
overflow: scroll;
width: 100px;
height: 100px;
top: -99999px;
left: -99999px;
pointer-events: none;
user-select: none;
}
.fixed-content {
position: absolute;
display: block;
top: 0;
left: 0;
right: var(--scrollbar-size, 0px);
bottom: 0;
z-index: 2;
pointer-events: none;
}
.scroll-container {
position: absolute;
overflow: hidden;
z-index: 10;
backface-visibility: hidden;
transform-style: preserve-3d;
width: 100%;
}
.content {
overflow: hidden;
position: relative;
width: 100%;
}
.spacer {
background: transparent;
}
.single-item {
flex: 0 0 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 70px;
&.left {
justify-content: flex-start;
}
p {
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
border-width: 2px;
border-style: solid;
}
}
.horizontal-scroll-wrapper {
position: relative;
}
.horizontal-scroll {
display: flex;
}
.horizontal-scroll .single-item {
flex: 0 0 100vw;
p {
width: 600px;
height: 600px;
max-width: 80%;
max-height: 80%;
}
}
<div class="change_color_page"></div>
<header></header>
<div class="viewport">
<div class="scroll-container">
<div class="content">
<div class="single-item active" data-color="off_white">
<p>1</p>
</div>
<div class="single-item" data-color="dark">
<p data-depth="-7" data-direction="y">2</p>
</div>
<div class="single-item" data-color="off_white">
<p class="item_to_move">3</p>
</div>
<div class="single-item" data-color="dark">
<p data-depth="-3" data-direction="y">4</p>
</div>
<div class="single-item" data-color="off_white">
<p data-depth="-3" data-direction="y">5</p>
</div>
<div class="horizontal-scroll-wrapper" data-color="dark">
<div class="horizontal-scroll">
<div class="single-item">
<p><span data-depth-hor="-3" data-direction="left">6</span></p>
</div>
<div class="single-item">
<p><span data-depth-hor="-3" data-direction="left">7</span></p>
</div>
<div class="single-item">
<p><span data-depth-hor="-3" data-direction="left">8</span></p>
</div>
<div class="single-item">
<p><span data-depth-hor="-3" data-direction="left">9</span></p>
</div>
<div class="single-item">
<p><span data-depth-hor="-3" data-direction="left">10</span></p>
</div>
</div>
</div>
<div class="single-item" data-color="off_white">
<p data-depth="-3" data-direction="y">11</p>
</div>
<div class="single-item" data-color="dark">
<p data-depth="-3" data-direction="y">12</p>
</div>
<div class="single-item left" data-color="off_white">
<p data-depth="15" data-direction="x">13</p>
</div>
</div>
</div>
</div>
source code from: https://codepen.io/duty47/pen/vYYEgam

HTML DIV is not moving from right to left diagonally towards end

<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: rgb(240, 240, 231);
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
#animate1 {
width: 50px;
height: 50px;
left: 350px;
top: 2px;
position: absolute;
background-color: rgb(43, 1, 1);
}
</style>
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
<div id="animate1"></div>
</div>
<script>
function myMove() {
var elem = document.getElementById("animate");
var elem1 = document.getElementById("animate1");
var pos = 0;
var pos1 = 0;
var id = setInterval(frame, 5);
var id1 = setInterval(frame1, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
function frame1() {
if (pos1 == 350) {
clearInterval(id1);
} else {
pos1++;
elem1.style.top = pos1 + "px";
elem1.style.right = pos1 + "px";
}
}
}
</script>
In the above code I have 2 cubes(div). On click of button, the left cube should move from left to right till the end of the container diagonally and right cube should move from right to left diagonally till the end of the container. But only left cube is moving from left to right and right cube is moving from top to bottom. I want right cube to be moved from right to left diagonally till the end of the container. And this is my sandbox link. https://codesandbox.io/s/autumn-sun-uz961?file=/index.html

.animate1 class has left:350px make it to right:0 it will work.
function myMove() {
var elem = document.getElementById("animate");
var elem1 = document.getElementById("animate1");
var pos = 0;
var pos1 = 0;
var id = setInterval(frame, 5);
var id1 = setInterval(frame1, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
function frame1() {
if (pos1 == 350) {
clearInterval(id1);
} else {
pos1++;
elem1.style.top = pos1 + "px";
elem1.style.right = pos1 + "px";
}
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: rgb(240, 240, 231);
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
#animate1 {
width: 50px;
height: 50px;
right:0px;
position: absolute;
background-color: rgb(43, 1, 1);
}
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
<div id="animate1"></div>
</div>

Update your css and change left: 350px; to right: 0px; for #animate1 :
function myMove() {
var elem = document.getElementById("animate");
var elem1 = document.getElementById("animate1");
var pos = 0;
var pos1 = 0;
var id = setInterval(frame, 5);
var id1 = setInterval(frame1, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
function frame1() {
if (pos1 == 350) {
clearInterval(id1);
} else {
pos1++;
elem1.style.top = pos1 + "px";
elem1.style.right = pos1 + "px";
}
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: rgb(240, 240, 231);
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
#animate1 {
width: 50px;
height: 50px;
right: 0px; /* instead of right : 350px; */
top: 2px;
position: absolute;
background-color: rgb(43, 1, 1);
}
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
<div id="animate1"></div>
</div>

Off Topic, but are you aware of CSS transitions?
function myMove() {
document.getElementById("animate").classList.toggle("move");
document.getElementById("animate1").classList.toggle("move");
}
// try clicking the boxes themselves
for (let item of document.querySelectorAll("#animate, #animate1")) {
item.onclick = function() {
item.classList.toggle("move");
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: rgb(240, 240, 231);
}
#animate {
width: 50px;
height: 50px;
top: 0;
left: 0;
position: absolute;
background-color: red;
transition: 3s linear;
}
#animate.move {
top: 350px;
left: 350px;
}
#animate1 {
width: 50px;
height: 50px;
right: 0px;
top: 2px;
position: absolute;
background-color: rgb(43, 1, 1);
transition: 3s linear;
}
#animate1.move {
top: 350px;
right: 350px;
}
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
<div id="animate1"></div>
</div>

How can I move tooltip on top of the mouse pointer?

let screenLog = document.querySelector('#screen-log');
document.addEventListener('mousemove', logKey);
var imgHgt = document.getElementById('box');
function logKey(e) {
var d = document.getElementById('TextHidden');
d.style.position = "absolute";
d.style.left = e.clientX +'px';
d.style.top = e.clientY +'px';
screenLog.innerHTML = `${e.clientX}, ${e.clientY}` + "<br>Image Height = " + imgHgt.offsetHeight + "<br>Image Width = " + imgHgt.offsetWidth;
}
#box { width: 40%; display: block; position: absolute; overflow: hidden; }
.image { display: block; width: 100%; z-index: 1; }
#TextHidden { display: none; color: red; font-size; 20px; z-index: 10; } #box:hover #TextHidden { display: block; }
#screen-log { z-index: 11; }
<div id="box">
<img src="https://res.cloudinary.com/vaqar/image/upload/v1499826226/DSC_0361_y3mv4r.jpg" class="image"></p> </img>
<div id="TextHidden">Hovering<p id="screen-log"></p></div>
</div>
I am trying to move comments on top of the the mouse pointer, but having no success.

Change your left and top position pixels like,
d.style.left = (e.clientX - 50) +'px';
d.style.top = (e.clientY - 100) +'px';
And the snippet as follows,
let screenLog = document.querySelector('#screen-log');
document.addEventListener('mousemove', logKey);
var imgHgt = document.getElementById('box');
function logKey(e) {
var d = document.getElementById('TextHidden');
d.style.position = "absolute";
d.style.left = (e.clientX - 50) +'px';
d.style.top = (e.clientY - 100) +'px';
screenLog.innerHTML = `${e.clientX}, ${e.clientY}` + "<br>Image Height = " + imgHgt.offsetHeight + "<br>Image Width = " + imgHgt.offsetWidth;
}
#box { width: 40%; display: block; position: absolute; overflow: hidden; }
.image { display: block; width: 100%; z-index: 1; }
#TextHidden { display: none; color: red; font-size; 20px; z-index: 10; } #box:hover #TextHidden { display: block; }
#screen-log { z-index: 11; }
<div id="box">
<img src="https://res.cloudinary.com/vaqar/image/upload/v1499826226/DSC_0361_y3mv4r.jpg" class="image"></p> </img>
<div id="TextHidden">Hovering<p id="screen-log"></p></div>
</div>

Your approach is working in principle, but you don't see the moving text because it is currently hidden. Note that I commented out the overflow: hidden and display: none properties in your stylesheet.
let screenLog = document.querySelector('#screen-log');
document.addEventListener('mousemove', logKey);
var imgHgt = document.getElementById('box');
function logKey(e) {
var d = document.getElementById('TextHidden');
d.style.position = "absolute";
d.style.left = e.clientX + 'px';
d.style.top = e.clientY + 'px';
screenLog.innerHTML = `${e.clientX}, ${e.clientY}` + "<br>Image Height = " + imgHgt.offsetHeight + "<br>Image Width = " + imgHgt.offsetWidth;
}
#box {
width: 40%;
display: block;
position: absolute;
#overflow: hidden;
}
.image {
display: block;
width: 100%;
z-index: 1;
}
#TextHidden {
#display: none;
color: red;
font-size: 20px;
z-index: 10;
}
#box:hover #TextHidden {
display: block;
}
#screen-log {
z-index: 11;
}
<div id="box">
<div id="TextHidden">
<p id="screen-log"></p>
</div>
</div>

Making a progressbar to load from 0 to 100% in 10 seconds with JavaScript

I am trying to make a simple progressbar to load for 10 seconds always when the JavaScript function is called. I don't want to use jQuery or any library. I want it to be on clean JavaScript. The only think I don't understand is how to make the progressbar load from 0 to 100% in 10 seconds. I am providing code with what I have done until now. Any suggestions?
var elem = document.getElementById("slide-progress-bar");
var width = 1;
function progressBar() {
resetProgressBar();
id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
function resetProgressBar() {
width = 1;
elem.style.width = width + '%';
}
.slide-progress-bar {
width: 1118px;
background-color: rgba(155, 155, 255, 0.36);
transition: width 10s linear;
display: inline-block;
vertical-align: middle;
}
.progress-bar {
height: 5px;
background-color: #aff;
width: 1%;
position: relative;
transition: linear;
}
<div class="slide-progress-bar">
<div class="progress-bar" id="progress-bar"></div>
<!--progress-bar-->
</div>
<!--slide-progress-bar-->

I think you just have to change the element that you are increasing in width. Not sure if this is the behaviour you expected:
var elem = document.getElementById("progress-bar");
var width = 1;
var interval;
function progressBar() {
resetProgressBar();
interval = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(interval);
} else {
width++;
elem.style.width = width + '%';
}
}
}
function resetProgressBar() {
width = 1;
clearInterval(interval)
elem.style.width = width + '%';
}
.slide-progress-bar {
width: 1118px;
background-color: rgba(155, 155, 255, 0.36);
transition: width 10s linear;
display: inline-block;
vertical-align: middle;
}
.progress-bar {
height: 5px;
background-color: #aff;
width: 1%;
position: relative;
transition: linear;
}
<div class="slide-progress-bar">
<div class="progress-bar" id="progress-bar"></div>
<!--progress-bar-->
</div>
<button onclick="progressBar()">Start</button>
<!--slide-progress-bar-->

as far I understood I think you are looking for this. the progress-bar will be completed 100% after 10s
var elem = document.getElementById("progress-bar");
var width = 1;
function progressBar() {
resetProgressBar();
id = setInterval(frame, 1000);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width+=10;
elem.style.width = width + '%';
}
}
}
function resetProgressBar() {
width = 1;
elem.style.width = width + '%';
}
progressBar();
.slide-progress-bar {
width: 1118px;
background-color: rgba(255, 0, 255, 0.36);
transition: width 10s linear;
display: inline-block;
vertical-align: middle;
}
.progress-bar {
height: 5px;
background-color: #fff2ff;
width: 1%;
position: relative;
transition: linear;
}
<div class="slide-progress-bar">
<div class="progress-bar" id="progress-bar"></div>
<!--progress-bar-->
</div>
let me know if it`s not ok

HI please check below solution
var elem = document.getElementById("progress-bar");
var width = 1;
var id = {};
function progressBar() {
id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
progressBar()
.slide-progress-bar {
width: 1118px;
height: 200px;
background-color: rgba(255, 255, 255, 0.9);
transition: width 10s linear;
display: inline-block;
vertical-align: middle;
}
.progress-bar {
height: 20px;
width: 0;
background-color: red;
position: relative;
transition: linear;
}
<div class="slide-progress-bar">
<div class="progress-bar" id="progress-bar"></div>
<!--progress-bar-->
</div>
<!--slide-progress-bar-->

This works for me
I changed the elem to the inner div and removed the width from the CSS
I also changed the speed
Then I actually called the function
var elem = document.getElementById("progress-bar");
var width = 1;
function progressBar() {
resetProgressBar();
id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width +"%";
}
}
}
function resetProgressBar() {
width = 1;
elem.style.width = width;
}
progressBar()
.slide-progress-bar {
width: 1118px;
background-color: rgba(155, 155, 155, 0.36);
transition: width 10s linear;
display: inline-block;
vertical-align: middle;
}
.progress-bar {
height: 5px;
background-color: #aff;
position: relative;
transition: linear;
}
<div class="slide-progress-bar">
<div class="progress-bar" id="progress-bar"></div>
<!--progress-bar-->
</div>
<!--slide-progress-bar-->

How to run smoothly the progress bar line in html

function move() {
var elem = document.getElementById("myBar");
var width = 1;
var counter = 1;
var id = setInterval(frame, 1000);
function frame() {
if (width >= 60) {
clearInterval(id);
} else {
width += 1;
elem.innerHTML = counter++;
elem.style.width = width + 'px';
}
}
}
#myProgress {
width: 120px;
background-color: #ddd;
}
#myBar {
width: 0px;
height: 10px;
background-color: #4CAF50;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar">0</div>
</div>
<br>
<button onclick="move()">Click Me</button>
In the above snippet there is progressive bar which will fill automatically when the button is clicked and it will fill the bar by adding the style.width by 1. I want that progressive bar to fill smoothly but the milliseconds shall remain unchanged i.e 1000 .

How about tweaking the JavaScript code to achieve the desired result:
function move() {
var elem = document.getElementById("myBar");
var width = 0.5;
// change the milliseconds to 10 or 5 to fill it relatively faster
var id = setInterval(frame, 20);
function frame() {
if (width >= 120) {
clearInterval(id);
} else {
width += 0.5;
elem.style.width = width + 'px';
}
}
}
#myProgress {
width: 120px;
background-color: #ddd;
}
#myBar {
width: 2px;
height: 10px;
background-color: #4CAF50;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button onclick="move()">Click Me</button>

You can use trasition and decrease the interval time
function move() {
var elem = document.getElementById("myBar");
var width = 2;
var id = setInterval(frame, 1);
function frame() {
if (width >= 60) {
clearInterval(id);
} else {
width += 2;
elem.style.width = width + 'px';
}
}
}
#myProgress {
width: 120px;
background-color: #ddd;
}
#myBar {
width: 2px;
height: 10px;
background-color: #4CAF50;
transition: width 2s;
}
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button onclick="move()">Click Me</button>

Add transition:width 600ms linear; to
#myBar {
width: 2px;
height: 10px;
background-color: #4CAF50;
transition:width 600ms linear;
}
This will smoothly animate the width of the bar.
Note:Keep the transition timing equal to setInterval timeout to avoid jerky animation
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var counter = 1;
var id = setInterval(frame, 1000);
function frame() {
if (width >= 60) {
clearInterval(id);
} else {
width += 1;
elem.innerHTML = counter++;
elem.style.width = width + 'px';
}
}
}
#myProgress {
width: 120px;
background-color: #ddd;
}
#myBar {
width: 2px;
height: 10px;
background-color: #4CAF50;
transition:width 1000ms linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button onclick="move()">Click Me</button>
The transition in CSS makes smooth interpolation between 2 values.
That means when you increment the width by 1px, the browser will increase the width by animating it, This takes place only after the javascript code to increase width is executed.

The smallest unit that you can render is a pixel.What you can do is check for a certain inverval to increase the width. In the sample below I increase the width by 10px so that you can see the transition properly
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var counter = 0;
var id = setInterval(frame, 600);
function frame() {
if (width >= 60) {
clearInterval(id);
} else {
counter++
console.log(counter);
if(counter % 5 == 0)
{
width += 10;
elem.style.width = width + 'px';
}
}
}
}
#myProgress {
width: 120px;
background-color: #ddd;
}
#myBar {
width: 2px;
height: 10px;
background-color: #4CAF50;
-webkit-transition: width 0.5s;
-moz-transition: width 0.5s;
-ms-transition: width 0.5s;
-o-transition: width 0.5s;
transition: width 0.5s;
}
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button onclick="move()">Click Me</button>

We Keep Coding

JavaScript is the programming language of the Web.

Javascript dynamically adding divs from the left side - javascript

Related

flip scroll when scrolling

HTML DIV is not moving from right to left diagonally towards end

How can I move tooltip on top of the mouse pointer?

Making a progressbar to load from 0 to 100% in 10 seconds with JavaScript

How to run smoothly the progress bar line in html

Categories

Resources