I have a series of div 250px that are scrolling horizzontaly. I want that when each div(.slide) get on
50vw get a class (.bigger) in order to incrise its width till 50vw.
this website explaining what I'm trying to accomplish : https://norgram.co/
body{overflow-y: hidden;}
.slide {
width: 250px;
height: 100vh;
font-size: 50px;
font-family: roboto;
color: #e5e5e5;
text-align: right;
padding: 50px;
border-left: solid 1px #e5e5e5;
}
.bigger {
width: 50vw;
}
.wrapper {
display: flex;
flex-direction: row;
width: 200vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
}
::-webkit-scrollbar {
display:none;
}
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
</div>
Related
Following is the code which is working fine with position: relative and position: absolute. However I am trying to achieve similar effect using Flexbox and though the item is adjusted in the center but it is not overlapping like the one achieved using position. Let me know how can I achieve the similar effect using Flexbox.
Code -
* { box-sizing: border-box; }
.container { width: 300px; height: 300px; border: 1px solid black; }
.green { background: #2a9d8f; }
.blue { background: #333366; }
/* Position CSS */
.position-container { position: relative; }
.box1, .box2 { position: absolute; }
.box1 { width: 60px; height: 60px; left: 120px; top: 120px; }
.box2 { width: 40px; height: 40px; left: 130px; top: 130px; }
/* Flexbox CSS */
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
.box3 { width: 60px; height: 60px; }
.box4 { width: 40px; height: 40px; }
<div class="container position-container">
<div class="box1 green"></div>
<div class="box2 blue"></div>
</div>
<hr />
<div class="container flex-container">
<div class="box3 green"></div>
<div class="box4 blue"></div>
</div>
You can use negative margins to adjust the overlapping. Add margin-left: -50px; to box4 to achieve the desired output.
* { box-sizing: border-box; }
.container { width: 300px; height: 300px; border: 1px solid black; }
.green { background: #2a9d8f; }
.blue { background: #333366; }
/* Position CSS */
.position-container { position: relative; }
.box1, .box2 { position: absolute; }
.box1 { width: 60px; height: 60px; left: 120px; top: 120px; }
.box2 { width: 40px; height: 40px; left: 130px; top: 130px; }
/* Flexbox CSS */
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
.box3 { width: 60px; height: 60px; }
.box4 { width: 40px; height: 40px; margin-left: -50px; }
<div class="container position-container">
<div class="box1 green"></div>
<div class="box2 blue"></div>
</div>
<hr />
<div class="container flex-container">
<div class="box3 green"></div>
<div class="box4 blue"></div>
</div>
You should change HTML and put the blue box inside the green one. Then,
add css for green box:
.box3 { display: flex; align-items: center; justify-content: center; }
* { box-sizing: border-box; }
.container { width: 300px; height: 300px; border: 1px solid black; }
.green { background: #2a9d8f; }
.blue { background: #333366; }
/* Position CSS */
.position-container { position: relative; }
.box1, .box2 { position: absolute; }
.box1 { width: 60px; height: 60px; left: 120px; top: 120px; }
.box2 { width: 40px; height: 40px; left: 130px; top: 130px; }
/* Flexbox CSS */
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
.box3 { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.box4 { width: 40px; height: 40px; }
<div class="container position-container">
<div class="box1 green"></div>
<div class="box2 blue"></div>
</div>
<hr />
<div class="container flex-container">
<div class="box3 green">
<div class="box4 blue"></div>
</div>
</div>
if you want to make the same effect but using flexbox only, I don't think you can do that but you need to use position with flexbox like code below:
* {
box-sizing: border-box;
}
.container {
width: 300px;
height: 300px;
border: 1px solid black;
}
.green {
background: #2a9d8f;
}
.blue {
background: #333366;
}
/* Position CSS */
.position-container {
position: relative;
}
.box1,
.box2 {
position: absolute;
}
.box1 {
width: 60px;
height: 60px;
left: 120px;
top: 120px;
}
.box2 {
width: 40px;
height: 40px;
left: 130px;
top: 130px;
}
/* Flexbox CSS */
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
.box3 {
width: 60px;
height: 60px;
position: absolute;
}
.box4 {
width: 40px;
height: 40px;
position: absolute;
}
<div class="container position-container">
<div class="box1 green"></div>
<div class="box2 blue"></div>
</div>
<hr />
<div class="container flex-container">
<div class="box3 green"></div>
<div class="box4 blue"></div>
</div>
I use resizable split views with split.js
I have a very basic setup with 2 panes
How can I center bottom-footer in the right pane?
Since the width of the pain is dynamic the footer doesn't centered properly once pane resized.
I've tried all possible positioning - absolute, fixed, sticky, relative but nothing seems to be work.
JSFiddle
Split(['.split-left', '.split-right'], {
gutterSize: 10,
sizes: [33,67] // in %
})
body {
margin: 0;
height: 100vh;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
display: flex;
justify-items: center;
align-items: center;
}
.split {
width:100%;
height:100%;
border: 0px solid;
overflow: hidden;
}
.split-left {
background-color: rgb(250,250,250);
padding: 20px;
padding-top: 0px;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 60px;
}
.split-right {
background-color: rgb(253,253,253);
background-color: white;
padding-top: 0px;
padding-right: 50px;
padding-left: 50px;
text-align: center;
overflow-x: hidden;
overflow-y: hidden;
}
.gutter {
cursor: col-resize !important;
height: 100%;
background: #ddd;
}
.footer {
position: fixed;
bottom: 0;
width: 60%;
background: rgba(255,0,0,0.2);
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.5.11/split.min.js"></script>
<body>
<div class="content">
<div class="split split-left">
</div>
<div class="split split-right">
<div class="content"></div>
<div class="footer">Footer</div>
</div>
</div>
</body>
you can use css flexbox
.split-right {
display: flex;
justify-content: center; // center horizontally
align-items: center; // center vertically
}
css flexbox tutorial
I have a wrapper with multiple sections in it, in which the scroll is horizontal (I used CSS to rotate the div and achieve this effect). I want to click on a button and scroll about 100px at a time, until I reach the end, inside said div.
I tried setting the scrollTop to 0 and then updating it after clicking the button, but this doesn't seem to solve the issue. Could anyone explain to me how I can achieve this effect?
Here's a Fiddle and also a snippet, for your convenience:
var scrollWrapper = $('.scroll_wrapper');
var scrollBtn = $('#scrollBtn');
scrollWrapper.scrollTop = 0;
$('#scrollBtn').on('click', function() {
scrollWrapper.scrollTop += 10;
});
.scroll_outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
}
.scroll_wrapper {
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
transition: transform .5s ease;
}
.scroll_section {
width: 100vw;
height: 100vh;
}
.scroll_section.one{background: black; color: white;}
.scroll_section.two{background: white; color: black;}
.scroll_section.three{background: black; color: white;}
.scroll_section.four{background: pink; color: black;}
#scrollBtn {
position: absolute;
bottom: 20px;
right: 20px;
background-color: darkblue;
color: white;
border: none;
width: 80px;
height: 80px;
border-radius: 50%;
text-transform: uppercase;
font-size: 12px;
line-height: 20px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll_outer-wrapper">
<div class="scroll_wrapper">
<section class="scroll_section one"><h2>section 1</h2></section>
<section class="scroll_section two"><h2>section 2</h2></section>
<section class="scroll_section three"><h2>section 3</h2></section>
<section class="scroll_section four"><h2>section 4</h2></section>
</div>
</div>
<button id="scrollBtn">Click to Scroll</button>
You need to use the parent element .scroll_outer-wrapper, and scrollTop as a function:
var scrollWrapper = $('.scroll_outer-wrapper');
var scrollBtn = $('#scrollBtn');
scrollWrapper.scrollTop(0)
$('#scrollBtn').on('click', function() {
scrollWrapper.scrollTop(scrollWrapper.scrollTop() + 10)
});
.scroll_outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
}
.scroll_wrapper {
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
transition: transform .5s ease;
}
.scroll_section {
width: 100vw;
height: 100vh;
}
.scroll_section.one {
background: black;
color: white;
}
.scroll_section.two {
background: white;
color: black;
}
.scroll_section.three {
background: black;
color: white;
}
.scroll_section.four {
background: pink;
color: black;
}
#scrollBtn {
position: absolute;
bottom: 20px;
right: 20px;
background-color: darkblue;
color: white;
border: none;
width: 80px;
height: 80px;
border-radius: 50%;
text-transform: uppercase;
font-size: 12px;
line-height: 20px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll_outer-wrapper">
<div class="scroll_wrapper">
<section class="scroll_section one">
<h2>section 1</h2>
</section>
<section class="scroll_section two">
<h2>section 2</h2>
</section>
<section class="scroll_section three">
<h2>section 3</h2>
</section>
<section class="scroll_section four">
<h2>section 4</h2>
</section>
</div>
</div>
<button id="scrollBtn">Click to Scroll</button>
I have multiples of cards that I want to rotate individually through 3D transformation on each click (not all at the same time). But, I can only seem to have the first one flip, but not the subsequent ones.
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
body { font-family: sans-serif; }
.scene {
width: 200px;
height: 260px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
<div class="scene">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<div class="scene">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
I tried wrapping the entire thing into class="wrapper" and the following code, but still didn't work:
var x = document.getElementsByClassName("wrapper").querySelectorAll(".scene");
x.addEventListener( 'click', function() {
x.classList.toggle('is-flipped');
You are using document.querySelector() which returns only the first element with class card.
You should use Document.querySelectorAll()
and then forEach(). add event listener in loop.
var cards = document.querySelectorAll('.card');
Array.from(cards).forEach(card => {
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
})
body { font-family: sans-serif; }
.scene {
width: 200px;
height: 260px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
<div class="scene">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<div class="scene">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
The problem is that you are querying a single card using document.querySelector().
You have to query all cards using document.querySelectorAll().
Then use a forEach() to attach the event handler to each card:
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('click', () => {
card.classList.toggle('is-flipped');
});
});
body { font-family: sans-serif; }
.scene {
width: 200px;
height: 260px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
<div class="scene">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<div class="scene">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
Decomposing my larger problem into this simple statement, I have a blue circle inside a box with a red border.
How do I keep the circle in the center but make it overlap over the top, horizontal line of the box's border?
My attempt looks like to reach the final result: https://jsfiddle.net/pgcft3z7/1/
HTML:
<div class="container">
<div class="circle">
Circle Text Here
</div>
</div>
CSS:
.circle {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: white;
border-radius: 50%;
width: 130px;
height: 130px;
margin: 0 auto;
background: blue;
position:absolute;
top: -5px;
left: 200px;
}
.container {
margin-top: 40px;
border: solid 1px;
border-color: red;
}
This involves me needing to manually specify a left and top which seems like it won't remain centered or will be very responsive.
Example of what it currently looks like:
https://jsfiddle.net/pgcft3z7/
Here is JSFiddle.
.circle {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: white;
border-radius: 50%;
width: 130px;
height: 130px;
margin: 0 auto;
background: blue;
position: relative;
}
.border {
border: solid 1px;
border-color: red;
width: 100%;
height: 70px;
top: 30px;
position: absolute;
}
.container {
margin-top: 40px;
position: relative;
}
<div class="container">
<div class="border">
</div>
<div class="circle">
Circle Text Here
</div>
</div>
.line{
position:relative; /* in order to contain inner absolute circle pos */
margin-top:50px;
background:red;
height:0;
border:1px solid red;
}
.circle{
position: absolute;
width:40px; height:40px;
top:50%; left:50%; /* 50% of parent */
transform: translate(-50%, -50%); /* -50% of self */
background:blue;
border-radius:50%;
}
<div class="line">
<div class="circle"></div>
</div>
Simply add these to your circle class:
position: relative;
top: -20px;
Look at this one https://jsfiddle.net/pgcft3z7/7/
.circle {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: white;
border-radius: 50%;
width: 130px;
height: 130px;
margin: 0 auto;
background: blue;
position:relative;
top: -65px;
left: 0;
}
.container {
margin-top: 100px;
border: solid 1px;
border-color: red;
}
<div class="container">
<div class="circle">
Circle Text Here
</div>
</div>