Develop Reference

I want to create an animation circle that play always and allow click even

Hello guys I want my animation be infinite and when it finish - he restart without any jump space.
and moreover allow to click event to go next position on my animation circle
How can I apply it?
let jump = 0;
let index = 0;
const boxContainer = document.querySelector(".boxContainer");
const animate = () => {
boxContainer.style.transform = `translate(${jump}px)`;
boxContainer.appendChild(boxContainer.children[index].cloneNode(true));
index++;
};
const nextBox = () => {
jump -= 100;
requestAnimationFrame(animate);
};
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: aqua;
height: fit-content;
width: 500px;
overflow-x: hidden;
position: relative;
}
.anim {
animation: anim 10s infinite linear;
}
.boxContainer {
display: flex;
transition: transform 0.2s;
}
.boxContainer > .box {
width: 90px;
height: 90px;
margin: 5px;
background-color: blue;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.container > button {
position: absolute;
left: 0px;
top: 32px;
width: 50px;
}
#keyframes anim {
to {
transform: translateX(-1000px);
}
}
<div class="container">
<div class="anim">
<div class="boxContainer">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
</div>
</div>
<button onclick="nextBox()">next box</button>
</div>
As you can see I create at animation that allow that click event nad he jump to next position but in some place animation restart in wrong place.
How to fix that issue in right and performance way ?

Parent component not resizing to fit children

I have a <div className="canvas"> element that contains four <div className="stripe stripe-color"> elements that I will be styling dynamically adding random color classes.
I want to use this canvas element as a 'dynamic background'.
As you can see, I have a <div className="children">{props.children}</div> element among the <div className="stripe"/> elements:
const Canvas = (props) => {
return (
<div className="stripe-container">
<div className="children">{props.children}</div>
<div className="stripe stripe-yellow" />
<div className="stripe stripe-green" />
<div className="stripe stripe-red" />
<div className="stripe stripe-purple" />
</div>
);
};
And SCSS:
.stripe-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 0;
margin: 3vw;
height: 100vh;
}
.children {
position: absolute;
width: calc(100% - 6vw);
}
.stripe-yellow {
background: #fdc111;
}
.stripe-green {
background: #00ad5e;
}
.stripe-red {
background: #d33136;
}
.stripe-purple {
background: #8f3192;
}
The problem here is that <div className="canvas"> won't grow to fit the children's height so if the content in <div className="children">{props.children}</div> becomes too large or if the user uses a smaller viewport, the children will overflow into the height and allow you to scroll, but canvas won't expand to fit it's children.
As additional information, props.children is a React component that contains a list of "card elements" for a restaurant's menu. The cards and its container use flex to wrap around if they don't have enough space horizontally. This is causing the canvas to become too small on smaller viewports. height:100% and their variants won't work either.
Any ideas into how I can get the desired behavior? I'm also open to refactoring as long as my requirement of achieving dynamic color stripes remains.
Here's a minima reproducible example without React:
.stripe-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 0;
margin: 3vw;
height: 100vh;
}
.children {
position: absolute;
width: calc(100% - 6vw);
}
.stripe {
height: 100%
}
.stripe-yellow {
background: #fdc111;
}
.stripe-green {
background: #00ad5e;
}
.stripe-red {
background: #d33136;
}
.stripe-purple {
background: #8f3192;
}
.child-container {
display: flex;
flex-wrap: wrap;
}
.child {
border: 1px solid white;
margin: 1rem;
width: 25vw;
height: 25vw;
background: lightgray;
opacity: 80%;
}
<div class="stripe-container">
<div class="children">
<div class="child-container">
<div class="child">one</div>
<div class="child">two</div>
<div class="child">three</div>
<div class="child">four</div>
<div class="child">five</div>
<div class="child">six</div>
<div class="child">seven</div>
<div class="child">eight</div>
<div class="child">nine</div>
</div>
</div>
<div class="stripe stripe-yellow"></div>
<div class="stripe stripe-red"></div>
<div class="stripe stripe-green"></div>
<div class="stripe stripe-purple"></div>
</div>

I'm not sure I understand 100% what you're trying to achieve. But I'll try my best to help you.
Removing the absolute from the children and putting it on the stripes instead might do the trick. Additionally, you'll want to position the stripes on 25% of the width to the left respectively.
I don't think you need CSS grid for this anymore, so I removed it and added some small tweaks as well. Let me know if you have any questions or if I got the question wrong.
.stripe-container {
padding: 0;
margin: 3vw;
position: relative;
}
.children {
position: relative;
z-index: 2;
width: 100%;
}
.stripe {
width: 25%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
}
.stripe-yellow {
left: 0;
background: #fdc111;
}
.stripe-green {
left: 25%;
background: #00ad5e;
}
.stripe-red {
left: 50%;
background: #d33136;
}
.stripe-purple {
left: 75%;
background: #8f3192;
}
.child-container {
display: flex;
flex-wrap: wrap;
}
.child {
border: 1px solid white;
margin: 1rem;
width: 25vw;
height: 25vw;
background: lightgray;
opacity: 80%;
box-sizing: border-box;
}
<div class="stripe-container">
<div class="children">
<div class="child-container">
<div class="child">one</div>
<div class="child">two</div>
<div class="child">three</div>
<div class="child">four</div>
<div class="child">five</div>
<div class="child">six</div>
<div class="child">seven</div>
<div class="child">eight</div>
<div class="child">nine</div>
</div>
</div>
<div class="stripe stripe-yellow"></div>
<div class="stripe stripe-red"></div>
<div class="stripe stripe-green"></div>
<div class="stripe stripe-purple"></div>
</div>
This way, the stripes work as a background for the stripe-container no matter the size, and since the children element is no longer absolute, the container is finally able to have the same size as the children.

Why not use a linear gradient for the striped background? You could accomplish what you're trying to do with simpler CSS and without the extraneous markup.
Optional: If you declared custom properties for the stripe colors you could change them simply by setting different values instead of having to rewrite the gradient each time (although the gradient itself isn't complicated or particularly verbose anyway.)
:root {
/*
Using custom properties here to demonstrate
that you could control the stripe colors without
hard-coding them in the stylesheet. an element
could declare its own colors via another class
or even an inline style, e.g.
<div style="--stripe-1: blue">
This isn't required. Just a suggestion.
*/
--stripe-1: #fdc111; /* yellow */
--stripe-2: #00ad5e; /* green */
--stripe-3: #d33136; /* red */
--stripe-4: #8f3192; /* purple */
}
.container {
padding: 0;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
background: linear-gradient(
to right,
var(--stripe-1) 0 25%,
var(--stripe-2) 25% 50%,
var(--stripe-3) 50% 75%,
var(--stripe-4) 75%
);
}
.container > * {
border: 1px solid white;
margin: 1rem;
width: 25vw;
height: 25vw;
background: lightgray;
opacity: 80%;
}
<div class="container">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
<div>eight</div>
<div>nine</div>
</div>

How to make content scrollable inside a flex box without given the height?

I'm trying to create a flex row split panel with a footer inside a column flexbox. However, I find out that I cannot make the content to be scrollable unless I limit the height of the container by coding height: calc(100% - FooterHeight). Does anyone know an alternative way to achieve this?
Thanks in advance!
Sandbox URL
My code:
import React from "react";
import "./styles.css";
const lefts = new Array(15).fill("Left");
const rights = new Array(15).fill("Right");
export default function App() {
return (
<div className="height">
<div className="column">
<div className="row">
<div className="row-left">
{lefts.map((left, index) => {
return (
<div key={index} className="item">
{left + index}
</div>
);
})}
</div>
<div className="row-right">
{rights.map((right, index) => {
return (
<div key={index} className="item">
{right + index}
</div>
);
})}
</div>
</div>
<div className="footer">Footer</div>
</div>
</div>
);
}
My CSS:
.height {
height: 600px;
width: 600px;
background-color: gray;
display: flex;
flex-direction: column;
}
.column {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
}
.row {
flex: 1;
display: flex;
height: calc(100% - 60px); // not preferred
}
.row-left {
width: 200px;
border: 1px solid red;
overflow: auto;
}
.row-right {
flex: 1;
border: 1px solid peru;
overflow: auto;
}
.item {
padding: 16px;
}
.footer {
flex-shrink: 0;
height: 60px;
border: 1px solid blue;
}

You need to replace that height with overflow: hidden for .row:
.row {
flex: 1;
display: flex;
overflow: hidden;
}
Here is fork of your Codesandbox:
https://codesandbox.io/s/fast-wood-1wxii

CSS Having two lists, sync their vertical scroll while allowing one to scroll horizontally

I have two lists where item i in list 1 is related to item i in list 2.
i want both lists to be scrollable vertically, so that items i always have the same scrolling position in both lists.
But list 2 has more content for a screen to display (like a timeline of sorts), so I want that list to be scrollable horizontally (Mind you not the item itself but the whole list), while list 1 stays fixed.
Is there any way to do this in CSS only?
This is what I have so far:
Codesandbox
Please note that this is just illustrating the point. The actual items are much bigger DOM structures and not just text.
I updated the codesandbox to illustrate the point.
I can't really seem to get the horizontal scrolling working. Any help would be much appreciated.

Set width to some appropriate large value (eg. 500px) and also set white-space: nowrap on the .rightPaneItem.
Keep in mind that value of the width property on the .rightPaneItem element will need to be adjusted according to the content of the rightPaneItem that has the longest content.
function App() {
return (
<div className="App">
<div className="leftPane">
LeftPane
{new Array(100).fill(0).map((_, i) => (
<div key={i} class="leftPaneItem">
item {i}
</div>
))}
</div>
<div className="rightPane">
RightPane
{new Array(100).fill(0).map((_, i) => (
<div key={i} class="rightPaneItem">
item {i} with a way longer text so you should be able to scroll
horizontally
</div>
))}
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
.App {
text-align: center;
max-height: 300px;
max-width: 300px;
display: flex;
border: 3px dashed green;
overflow: auto;
padding: 5px;
}
.leftPane {
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
border: 2px solid red;
padding: 5px;
}
.rightPane {
display: flex;
flex-direction: column;
height: 100%;
flex: 2;
border: 2px solid blue;
padding: 5px;
overflow-x: auto;
}
.leftPaneItem {
height: 20px;
}
.rightPaneItem {
height: 20px;
width: 500px;
overflow-x: hidden;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Edit:
Since you will have the content with variable length in the right column, you could use the following approach.
Instead of setting the width and overflow properties on .rightPaneItem, you could add overflow: auto on the outer container .App and .rightPane element.
function App() {
return (
<div className="App">
<div className="leftPane">
LeftPane
{new Array(100).fill(0).map((_, i) => (
<div key={i} class="leftPaneItem">
item {i}
</div>
))}
</div>
<div className="rightPane">
RightPane
{new Array(100).fill(0).map((_, i) => {
if (i % 2 == 0) {
return (
<div key={i} class="rightPaneItem">
item {i} with a way longer text so you should be able to scroll
horizontally
</div>);
} else {
return (
<div key={i} class="rightPaneItem">
item {i} with a way longer text so you should be able to scroll
horizontally. item {i} with a way longer text so you should be able to scroll
horizontally. item {i} with a way longer text so you should be able to scroll
horizontally
</div>);
}
})}
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
.App {
font-family: sans-serif;
text-align: center;
max-height: 300px;
max-width: 300px;
display: flex;
border: 3px dashed green;
overflow: auto;
padding: 5px;
}
.leftPane {
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
border: 2px solid red;
padding: 5px;
}
.rightPane {
display: flex;
flex-direction: column;
height: 100%;
flex: 2;
border: 2px solid blue;
padding: 5px;
overflow: auto;
}
.leftPaneItem {
height: 20px;
}
.rightPaneItem {
height: 20px;
position: relative;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
I have also created a demo on codesandbox that is similar to the one posted in your question and uses the same CSS as the one used in second code snippet.

Logo moves when js script inserts text in paragraph

The main problem is that my logo that is positioned next to the title with a negative margin and when a user fills in a username and proceeds the logo jumps down probably because text is inserted in the paragraph. But I can't find a solution to fix this.
HTML:
#logo{
display: flex;
flex-flow: row;
margin-top: -2.9rem;
margin-left: 11rem;
-ms-transform: rotate(-15deg); /* IE 9 */
-webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
transform: rotate(-15deg);
justify-content: space-between;
float: left;
vertical-align: top;
position:absolute;
}
#logo>img{
max-width:230px;
max-height:95px;
width: auto;
height: auto;
}
<header>
<div id="hoofding">
<div id="titel">
<h1>Sudoku</h1>
</div>
<div id="home" >
<div id="Welkom">
<p id="afmeldennaam" class="hidden"></p>
</div>
<a id="afmelden" class="hidden">Logout</a>
</div>
</div>
<nav class="hidden" id="navigatie">
<ul>
<!--<li>Home</li>-->
<li>Sudoku</li>
<li>Highscores</li>
</ul>
</nav>
</header>
<div id="logo">
<img src="assets/media/logo.png" alt="logo" class="visible-lg">
</div>

You should locate the logo/image in the same containing element (#hoofding) as the title. Then use relative positioning to position it outside of the element.
Here's a contrived example.
function locate( selector, base ) {
base = base && 1 === base.nodeType ? base : document;
return base.querySelector( selector );
}
var btn = locate( 'button' ),
hb = locate( '.header-bottom' ),
user = locate( '.user' );
btn.addEventListener( 'click', function ( e ) {
hb.classList.toggle( 'hide' );
user.classList.toggle( 'hide' );
} );
body {
margin: 0;
}
header {
}
.header-top,
.header-bottom {
display: flex;
height: 75px;
align-items: center;
}
.header-top {
padding: 0 1rem;
color: white;
background-color: black;
}
.header-top a {
color: white;
}
.user {
flex-grow: 1;
text-align: right;
}
.header-bottom {
justify-content: center;
}
.hb-item {
margin: 0 1rem;
padding: 0.5rem 1rem;
color: white;
background-color: teal;
border-radius: 0.25rem;
}
h1 {
margin: 0;
color: teal;
}
.logo {
display: block;
transform: rotate( -13deg );
position: relative;
top: 25px;
left: 15px;
}
.hide {
display: none;
}
<header>
<div class="header-top">
<h1>Sudoku</h1>
<img class="logo" src="http://placehold.it/100x100/fc0">
<div class="user hide">
<span>Welcome User!</span>Logout
</div>
</div>
<div class="header-bottom hide">
<div class="hb-item">One</div>
<div class="hb-item">Two</div>
</div>
</header>
<main>
<button>Click Me!</button>
</main>

Use the id='logo' inside the id="hoofding".
Put the id='logo' after the id="titel".
The id='logo' doesn't need flex attributes.
The id='logo' doesn't need the float attribute.
The id='logo' doesn't need the flex-flow attribute.
Use the transform: rotate(-15deg); in the img tag, not in the id='logo'.
Delete the margins left and top from the id='logo'.
You can use about margin-top: 15px; in the img tag.

If you place the logo into the title div then it will work, all you have to do then is just adjust the margins and padding.
example:
HTML
<nav>
<div class="brand">
<h3>LogoName</h3>
<img src="https://cdn0.iconfinder.com/data/icons/20-flat-icons/128/crest.png" alt="">
</div>
</nav>
CSS
nav{
background-color: black;
height: 50px;
}
.brand{
position: relative;
}
.brand h3{
display: inline;
color: white;
}
https://jsfiddle.net/q24L6ct4/2/