How to make smooth block animation? - javascript

A slide opening has twitches, how can I get rid of them?
If with the last block everything is more or less normal, then with the rest are not even close. How do I make all the blocks, except the one that was clicked disappear and the remaining block is smoothly moved to the center of the screen and then opens.
$(document).ready(function() {
let status = false;
$(".block").on("click", function() {
if (status == false) {
$(".block").not($(this)).slideToggle();
$(this).animate({
maxWidth: "100%"
}, 500).find(".slide").css("display", "flex").animate({
width: "100%"
}, 500);
status = true;
} else {
$(this).animate({
maxWidth: "32%"
}, 500).find(".slide").css("display", "none").animate({
width: "0%"
}, 500);
$(".block").not($(this)).slideToggle();
status = false;
}
})
});
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;800;900&display=swap');
html,
body {
font-size: 10px;
}
body {
background-color: #1c1c1e;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
width: 100%;
padding: 1rem 0;
}
.flex-block {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.block {
display: flex;
margin: 15px;
justify-content: space-between;
width: 100%;
max-width: 32%;
height: 200px;
background-color: #464649;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
}
.block .slide,
.block .content {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
color: #d7d7df;
}
.block .slide {
background-color: #303033;
width: 0%;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<section class="test">
<div class="flex-block">
<div class="block">
<div class="content">
<p>Block</p>
</div>
<div class="slide">
<p>Slide</p>
</div>
</div>
<div class="block">
<div class="content">
<p>Block</p>
</div>
<div class="slide">
<p>Slide</p>
</div>
</div>
<div class="block">
<div class="content">
<p>Block</p>
</div>
<div class="slide">
<p>Slide</p>
</div>
</div>
</div>
</section>
</div>

To start, don't use JQUERY, convert that code into vanilla JS. The best way is to use JS just to apply/remove classes and use CSS for all the transitions.
You have JS events that can tell you if a certain transition applied to a block has ended (look for "ontransitionend" event), this can help you to apply CSS or a class in the exact time you need.

Not sure what this is what you are after, but I would use the callback functions of your slide toggle and animation so on the first click, you hide the unwanted blocks first and then show the slide and then on your second click, you hide the slide and then show the hidden blocks:
$(document).ready(function() {
let status = false;
$(".block").on("click", function() {
const $currentBlock = $(this); // get current clicked block
if (status == false) {
// hide non clicked blocks
$(".block").not($currentBlock).slideToggle(function() {
// run this when slide toggle has finished
$currentBlock.animate({
maxWidth: "100%"
}, 500).find(".slide").css("display", "flex").animate({
width: "100%"
}, 500);
});
status = true;
} else {
$currentBlock.animate({
maxWidth: "32%"
}, 500).find(".slide").animate({
width: "0"
}, 500, function() {
// run this when slide has finished animating
$(this).css("display", "none"); // only hide the slide once the animation is finished
$(".block").not($currentBlock).slideToggle(); // show the other blocks
});
status = false;
}
})
});
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;800;900&display=swap');
html,
body {
font-size: 10px;
}
body {
background-color: #1c1c1e;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
width: 100%;
padding: 1rem 0;
}
.flex-block {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.block {
display: flex;
margin: 15px;
justify-content: space-between;
width: 100%;
max-width: 32%;
height: 200px;
background-color: #464649;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
}
.block .slide,
.block .content {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
color: #d7d7df;
}
.block .slide {
background-color: #303033;
width: 0%;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<section class="test">
<div class="flex-block">
<div class="block">
<div class="content">
<p>Block</p>
</div>
<div class="slide">
<p>Slide</p>
</div>
</div>
<div class="block">
<div class="content">
<p>Block</p>
</div>
<div class="slide">
<p>Slide</p>
</div>
</div>
<div class="block">
<div class="content">
<p>Block</p>
</div>
<div class="slide">
<p>Slide</p>
</div>
</div>
</div>
</section>
</div>

Related

Stick element inside absolute positioned container

Considering an element ".sticky-element" (orange) that is inside an absolute positioned container ".tab" (green, blue, fuchsia).
I wish to make it "sticky", so when the the parent ".container" (grey) scrolls, the ".sticky-element" stays always on the top.
I've tried without success getting the offset position of the sticky elements and control the "top" accordingly with the scroll position of the container. Is there any pure CSS solution? If not, how to accomplish this with JS?
Here it is a Codepen with the HTML/CSS of the concept.
Not 100% if I got what you're looking for, but the orange headers stick to the top when scrolling. I had to move them outside of the containers you had them in so they would display like your photo and added a min-width and height to your sticky class. And finally, set a z-index value on the sticky element.
body {
padding: 0;
margin: 0;
}
.wrap {
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
}
.container {
width: 200px;
overflow-y: scroll;
display: flex;
flex-direction: column;
row-gap: 50px;
scroll-snap-type: y mandatory;
}
.group {
display: flex;
position: relative;
}
.tab {
width: 20px;
height: 100%;
background: red;
opacity: 0.9;
position: absolute;
overflow: hidden;
transition: 0.5s width;
}
.tab:hover {
width: 100%;
}
.sticky-element {
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
left: 20px;
top: 20px;
background: orange;
position: sticky;
z-index:1;
}
.child-handler {
display: flex;
flex: 1 1 auto;
flex-direction: column;
row-gap: 20px;
}
.child {
height: 200px;
scroll-snap-align: start;
}
.group[groupid="1"] .child {
background: green;
}
.group[groupid="2"] .child {
background: blue;
}
<body>
<div class="wrap">
<div class="container">
<div class="sticky-element">Sticky 1</div>
<div class="group" groupid="1">
<div class="tab">
</div>
<div class="child-handler">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
<div class="sticky-element">More Sticky</div>
<div class="group" groupid="2">
<div class="tab">
</div>
<div class="child-handler">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</div>
</div>
</body>
Based on the solution of #Phaelax z I solve the problem with this approach:
$.each($(".group"), function() {
$(this).css("min-height", $(this).find(".child-handler").innerHeight());
});
function animate(el, width) {
el.stop().animate({
width: width
}, {
duration: 500,
step: function(currentWidth) {
const sticky = el.closest(".group").children(".sticky-element");
const left = parseInt(sticky.css("left"));
sticky.css("width", currentWidth - left);
}
});
}
$(".tab")
.mouseenter(function() {
animate($(this), "100%");
})
.mouseleave(function() {
animate($(this), 20);
});
body {
padding: 0;
margin: 0;
}
.wrap {
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
}
.container {
width: 200px;
overflow-y: scroll;
display: flex;
flex-direction: column;
row-gap: 50px;
scroll-snap-type: y mandatory;
}
.group {
display: flex;
position: relative;
}
.sticky-element {
max-width: 50px;
height: 50px;
width: 0;
left: 20px;
top: 20px;
margin-top: 20px;
margin-bottom: 20px;
background: orange;
position: sticky;
z-index: 2;
overflow: hidden;
pointer-events: none;
}
.tab-child-wrap {
position: absolute;
width: 100%;
height: 100%;
}
.tab {
width: 20px;
height: 100%;
background: red;
opacity: 0.9;
position: absolute;
overflow: hidden;
z-index: 1;
}
.tab-content {
width: 100%;
}
.child-handler {
display: flex;
flex: 1 1 auto;
flex-direction: column;
row-gap: 20px;
}
.child {
height: 200px;
scroll-snap-align: start;
}
.group[groupid="1"] .child {
background: green;
}
.group[groupid="2"] .child {
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="wrap">
<div class="container">
<div class="group" groupid="1">
<div class="sticky-element">Sticky 1</div>
<div class="tab-child-wrap">
<div class="tab">
<div class=".tab-content">Content</div>
</div>
<div class="child-handler">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</div>
<div class="group" groupid="2">
<div class="sticky-element">More Sticky</div>
<div class="tab-child-wrap">
<div class="tab">
<div class=".tab-content">Content</div>
</div>
<div class="child-handler">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</div>
</div>
</div>
</body>

css messing up when dynamically appending to swiper js slide

I have an array of elements and i'm trying to chunk the array and dynamically append every element to a swiper js slide. My chunk strategy is to chuck the array every 5 elements and I am looping on the chucked new arrays and appending every element of that array to the swiper slide. And whenever a new chuck array is found a new class called .level3Items will be created that will be housing the 5 .swiper-slide classes. Now my chuck strategy and adding every element to .level3Items works but my CSS messes up when the elements are dynamically added. For debugging I have 2 main divs below. The first one (.level3) is manually coded and it works right. On the second main div (.level3_2) I am adding the same code as the first main div but dynamically and as shows the CSS messes up. How can I fix this? How can I make .level3_2 look like .level3? Thanks in advance.
const swiperRegular = new Swiper('#swiperRegular', {
direction: 'horizontal',
slidesPerView: 5,
spaceBetween: 10,
slidesPerGroup: 5,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
disabledClass: 'disabled_swiper_button'
}
});
let myArray = ['test1', 'test2', 'test3', 'test4', 'test5']
const result = Object.values(
myArray.map((x, i) => ({
grp: Math.floor(i / 5),
val: x
}))
.reduce((acc, i) => {
acc[i.grp] ||= [];
acc[i.grp].push(i.val);
return acc;
}, {})
);
result.forEach((elm) => {
const dataElem = $('<div class="level3Items"><div class="swiper" id="swiperRegular"><div class="swiper-button-prev"><i class="fa-solid fa-arrow-left"></i></div><div class="swiper-button-next"><i class="fa-solid fa-arrow-right"></i></div><div class="swiper-wrapper">');
elm.forEach(item => {
dataElem.find('.swiper-wrapper').append(`<div class="swiper-slide"><div class="topSwiperSlideItems"><div class="imgCon"><img src="https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=%5B660%2C300%5D&w=1500&h=750&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F20%2F2021%2F07%2F23%2Fgrizzly-bear-1.jpg" /></div></div><div class="bottomSwiperSlideItems"><div class="textCon"><p>${item}</p></div></div></div>`)
});
$(".level3_2").append(dataElem);
const swiperRegular = new Swiper('#swiperRegular', {
direction: 'horizontal',
slidesPerView: 5,
spaceBetween: 10,
slidesPerGroup: 5,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
disabledClass: 'disabled_swiper_button'
}
});
})
.disabled_swiper_button {
opacity: 0;
cursor: auto;
pointer-events: none;
}
.level3 {
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
margin-top: 1%;
background-color: pink;
}
.level3_2 {
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
margin-top: 1%;
background-color: pink;
}
.level3Items {
display: flex;
width: 100%;
height: fit-content;
}
.level3Items #swiperRegular {
width: 100%;
height: 100%;
padding-left: 1.5%;
padding-right: 1.5%;
}
.level3Items .swiper-button-prev {
display: flex;
justify-content: center;
align-items: center;
top: 35%;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: blue;
}
.level3Items .swiper-button-prev::after {
display: none;
}
.level3Items .swiper-button-prev i {
font-size: 1.4vw;
color: #ffffff;
}
.level3Items .swiper-button-next {
display: flex;
justify-content: center;
align-items: center;
top: 35%;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: blue;
}
.level3Items .swiper-button-next::after {
display: none;
}
.level3Items .swiper-button-next i {
font-size: 1.4vw;
color: #ffffff;
}
.level3Items .swiper-slide {
display: flex;
flex-direction: column;
}
.level3Items .swiper-slide .topSwiperSlideItems {
display: flex;
width: 100%;
height: 20vh;
background-color: gold;
}
.level3Items .swiper-slide .topSwiperSlideItems .imgCon {
display: grid;
width: 95%;
height: 95%;
margin: auto;
}
.level3Items .swiper-slide .topSwiperSlideItems .imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
}
.level3Items .swiper-slide .bottomSwiperSlideItems {
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
background-color: purple;
}
.level3Items .swiper-slide .bottomSwiperSlideItems .textCon {
display: flex;
width: 95%;
height: fit-content;
margin-left: 5%;
}
.level3Items .swiper-slide .bottomSwiperSlideItems .textCon p {
font-size: 3vw;
color: #bfbfbf;
margin-top: auto;
margin-bottom: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://unpkg.com/swiper#8/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
<!--working-->
<div class="level3">
<div class="level3Items">
<div class="swiper" id="swiperRegular">
<div class="swiper-button-prev">
<i class="fa-solid fa-arrow-left"></i>
</div>
<div class="swiper-button-next">
<i class="fa-solid fa-arrow-right"></i>
</div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="topSwiperSlideItems">
<div class="imgCon">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=%5B660%2C300%5D&w=1500&h=750&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F20%2F2021%2F07%2F23%2Fgrizzly-bear-1.jpg" />
</div>
</div>
<div class="bottomSwiperSlideItems">
<div class="textCon">
<p>test</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="topSwiperSlideItems">
<div class="imgCon">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=%5B660%2C300%5D&w=1500&h=750&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F20%2F2021%2F07%2F23%2Fgrizzly-bear-1.jpg" />
</div>
</div>
<div class="bottomSwiperSlideItems">
<div class="textCon">
<p>test</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="topSwiperSlideItems">
<div class="imgCon">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=%5B660%2C300%5D&w=1500&h=750&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F20%2F2021%2F07%2F23%2Fgrizzly-bear-1.jpg" />
</div>
</div>
<div class="bottomSwiperSlideItems">
<div class="textCon">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--not working-->
<div class="level3_2">
</div>

Row submenu appears in wrong place after click [duplicate]

This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 2 years ago.
I have static top bar and left menu, and scrollable long content on right. In my (long) submenu I use position: absolute to not change row height. Submenu position for rows 2 and 3 in below snippet is wrong and non-intuitive and unwanted scroll bar appear. How to fix it?
body { margin: 0}
button { height: 20px}
.hide { display:none; }
.container { display: flex; }
.topBar { background: red; height: 30px; }
.side__menu {
height: calc(100vh - 30px);
background: yellow;
display: flex;
flex-direction: column;
justify-content: space-between;
width:100px;
}
.main__panel {
overflow: auto;
height: calc(100vh - 30px);
width: calc(100vw - 100px);
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
height: 200px;
background: #ddd;
margin: 10px;
}
.submenu {
position: absolute;
right: 100px;
background: #fdd;
height: 70px;
}
<div class="topBar">Top Bar</div>
<div class="container">
<div class="side__menu">
<div>item1</div><div>item2</div><div>menu footer</div>
</div>
<div class="main__panel">
<div class="row">
Row 1
<button onclick="s1.classList.toggle('hide')">toggle submenu</button>
<div id="s1" class="submenu hide">submenu</div>
</div>
<div class="row">
Row 2
<button onclick="s2.classList.toggle('hide')">toggle submenu</button>
<div id="s2" class="submenu hide">submenu</div>
</div>
<div class="row">
Row 3
<button onclick="s3.classList.toggle('hide')">toggle submenu</button>
<div id="s3" class="submenu hide">submenu</div>
</div>
</div>
</div>
I make some investigation and discover that height: 100vh (with calc or not) "create problems" with submenu. I accidentally find one solution - just add following style to row class
position: relative;
But I totally don't know why it actually works - so feel free to create answer and explain it if you know why (or show some alternative approach)
body { margin: 0}
button { height: 20px}
.hide { display:none; }
.container { display: flex; }
.topBar { background: red; height: 30px; }
.side__menu {
height: calc(100vh - 30px);
background: yellow;
display: flex;
flex-direction: column;
justify-content: space-between;
width:100px;
}
.main__panel {
overflow: auto;
height: calc(100vh - 30px);
width: calc(100vw - 100px);
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
height: 200px;
background: #ddd;
margin: 10px;
position: relative;
}
.submenu {
position: absolute;
right: 100px;
background: #fdd;
height: 70px;
}
<div class="topBar">Top Bar</div>
<div class="container">
<div class="side__menu">
<div>item1</div><div>item2</div><div>menu footer</div>
</div>
<div class="main__panel">
<div class="row">
Row 1
<button onclick="s1.classList.toggle('hide')">toggle submenu</button>
<div id="s1" class="submenu hide">submenu</div>
</div>
<div class="row">
Row 2
<button onclick="s2.classList.toggle('hide')">toggle submenu</button>
<div id="s2" class="submenu hide">submenu</div>
</div>
<div class="row">
Row 3
<button onclick="s3.classList.toggle('hide')">toggle submenu</button>
<div id="s3" class="submenu hide">submenu</div>
</div>
</div>
</div>
Tested on: Chrome, Safari and Firefox

How to struct a Gantt Chart using flex divs using HTML and CSS

I'm structuring a Gantt Chart component using CSS and HTML.
The below image illustrate the necessary user viewing interactions:
The red boundaries is the current user view. The desired scrolling behaviour is as follows:
a) The tasks are must be scrolled vertically and horizontally as data can be out of viewable area.
b) When scrolling horizontally, the scale must be scrolled in sync (the scale will have date/time tags).
c) When scrolling horizontally, the left title boxes must remain fixed on the left, not scrolling together.
d) When scrolling vertically, the scale must remain fixed at the top.
e) When scrolling vertically, the titles boxes scrolls together with taks, keeping in sync view.
Here is what've tried so far with no success.
.container {
height: 100vh;
width: 100vw;
background-color: #cdcdcd;
}
.areas {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 100%;
}
.leftarea {
display: flex;
flex-direction: column;
background-color: #ababab;
height: 100%;
margin-top: 30px;
}
.rightarea {
display: flex;
flex-direction: column;
height: 100%;
}
.titlecard {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
min-height: 30px;
background-color: #435543;
color: white;
margin: 10px;
}
.scale {
display: flex;
color: white;
background-color: #433777;
}
.scaletick {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
width: 80px;
color: white;
border: 1px solid white;
}
.tasks {
display: flex;
flex-direction: column;
background-color: #393984;
height: 100%;
}
.taskcard {
display: flex;
justify-content: center;
align-items: center;
background-color: #fefefe;
border-radius: 4px;
padding: 5px;
height: 50px;
width: 100px;
margin: 10px;
}
.taskcard1 {
width: 100px;
margin-left: 80px;
}
.taskcard2 {
width: 550px;
margin-left: 230px;
}
.taskcard3 {
width: 400px;
margin-left: 40px;
}
.taskcard4 {
width: 300px;
margin-left: 130px;
}
.taskcard5 {
width: 350px;
margin-left: 400px;
}
.taskcard6 {
width: 90px;
margin-left: 90px;
}
.taskcard7 {
width: 70px;
margin-left: 230px;
}
.taskcard8 {
width: 150px;
margin-left: 10px;
}
.taskcard9 {
width: 60px;
margin-left: 120px;
}
.taskcard10 {
width: 50px;
margin-left: 45px;
}
<div class="container">
<div class="areas">
<div class="leftarea">
<div class="titlecard">
Title 1
</div>
<div class="titlecard">
Title 2
</div>
<div class="titlecard">
Title 3
</div>
<div class="titlecard">
Title 4
</div>
<div class="titlecard">
Title 5
</div>
<div class="titlecard">
Title 6
</div>
<div class="titlecard">
Title 7
</div>
<div class="titlecard">
Title 8
</div>
<div class="titlecard">
Title 9
</div>
<div class="titlecard">
Title 10
</div>
</div>
<div class="rightarea">
<div class="scale">
<div class="scaletick">
01/01/2000
</div>
<div class="scaletick">
02/01/2000
</div>
<div class="scaletick">
03/01/2000
</div>
<div class="scaletick">
04/01/2000
</div>
<div class="scaletick">
05/01/2000
</div>
<div class="scaletick">
06/01/2000
</div>
<div class="scaletick">
07/01/2000
</div>
<div class="scaletick">
08/01/2000
</div>
<div class="scaletick">
09/01/2000
</div>
<div class="scaletick">
10/01/2000
</div>
</div>
<div class="tasks">
<div class="taskcard taskcard1">
Task 1
</div>
<div class="taskcard taskcard2">
Task 2
</div>
<div class="taskcard taskcard3">
Task 3
</div>
<div class="taskcard taskcard4">
Task 4
</div>
<div class="taskcard taskcard5">
Task 5
</div>
<div class="taskcard taskcard5">
Task 6
</div>
<div class="taskcard taskcard7">
Task 7
</div>
<div class="taskcard taskcard8">
Task 8
</div>
<div class="taskcard taskcard9">
Task 9
</div>
<div class="taskcard taskcard10">
Task 10
</div>
</div>
</div>
</div>
</div>
How can I get the necessary behaviour?

How to design a layout like this: one box on top and two bottom covering the whole page

I want 3 section one cover half part of the screen to show image slider and in half part, there is two section right now that part I'm done but now I want to add half part of the screen on top but it does not show image slider section, please help me.
right now my code:
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial;
color: white;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #ff6a00;
}
.right {
right: 0;
background-color: #ffd800;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="split left">
<div class="centered">
<h2>Blood Donor</h2>
<p>Go To Registration</p>
</div>
</div>
<div class="split right">
<div class="centered">
<h2>Blood Seeker</h2>
<p>Go To Registration</p>
</div>
</div>
</form>
</body>
please help me,
Thank You for your time.
He's a simple layout using CSS Grid (the 2D version of Flexbox):
.main {
display: inline-grid;
height: 200px;
width: 400px;
grid-template-rows: 50% 50%;
border: green solid 2px;
}
.main .level1 {
border: blue solid 2px;
display: flex;
}
.main .level1 .level2 {
border: red solid 2px;
flex-basis: 50%;
}
<div class="main">
<div class="level1"></div>
<div class="level1">
<div class="level2"></div>
<div class="level2"></div>
</div>
</div>
If you are happy using grid then is quite easy. You just need to setup a grid which with two columns and two rows.
Here is a link to a codepen, there are some other styles to make it a little easier to see what is going on but you only need to pay attention to the grid css attributes.
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
height: 50vh;
}
.container>div {
display: flex;
justify-content: center;
align-items: center;
}
.image-slider {
background: magenta;
grid-column: span 2;
}
.page-link-1 {
background: red;
}
.page-link-2 {
background: green
}
<div class="container">
<div class="image-slider">Image Slider</div>
<div class="page-link-1">Page Link 1</div>
<div class="page-link-2">Page Link 2</div>
</div>
https://codepen.io/tmcnicol/pen/PdoLpm/
My implementation with flex:
body,
html {
height: 100%;
}
.wrap {
display: flex;
height: 100%;
flex-direction: column;
}
.slider {
border: 2px solid red;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.bottom-wrap {
display: flex;
flex: 1;
}
.link {
border: 2px solid red;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
<div class="wrap">
<div class="slider">Image slider</div>
<div class="bottom-wrap">
<div class="link">Page Link</div>
<div class="link">Page Link</div>
</div>
</div>
Working codepen

Categories