So I'd like to align multiple divs next to each other (horizontal centered). If there are more then n divs the container where the divs are located should be scrollable in x-direction like a simple scrollbar to get something like this:
Note: Would somebody be so kind to add the (!) before the images?
However - I could not get it working so far using this code:
#container {
position: relative;
width: 80%;
height: 40%;
overflow-x: scroll;
background: gray;
}
.item {
position: absolute;
width: 10%;
height: 80%;
background-image: url("http://www.icemeltmanufacturers.com/wp-content/uploads/2016/09/head-icon-png-5.png");
background-repeat: no-repeat;
background-position: 50% 50%;
margin: auto;
top: 0;
bottom: 0;
background-size: contain;
}
#bigContainer {
position: absolute;
width: 100%;
height: 50%;
background: white;
bottom: 0%;
border-radius: 15px 15px 0px 0px
}
<div id="bigContainer">
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
Note: It seems like Stackoverflow currently is broke for me so there is the fiddle for testing the code: https://jsfiddle.net/nfdgyx73/13/
Note: It would be cool to provide a solution where I don't have to apply massive changes to the containers (especially not to change their position attributes)
Any help would be very appreciated, thanks a million in advance!
Are you looking for something like this? I also updated fiddle:
https://jsfiddle.net/nfdgyx73/40/
Just need to display the items inline (display: inline-block), and make sure you aren't wrapping your container since it is using a % to calculate width (white-space: nowrap), along with ensuring no overflow for container on y axis (overflow-y: hidden)
Per your comment, I have also added text-align: center to container id, so if there is less items that don't require scroll, they will center.
#container {
position: relative;
width: 80%;
height: 40%;
overflow-x: scroll;
background: gray;
overflow-y: hidden;
white-space: nowrap;
text-align: center;
}
.item {
display: inline-block;
width: 10%;
height: 80%;
background-image: url("http://www.icemeltmanufacturers.com/wp-content/uploads/2016/09/head-icon-png-5.png");
background-repeat: no-repeat;
background-position: 50% 50%;
margin: 4px;
top: 0;
bottom: 0;
background-size: contain;
}
#bigContainer {
position: absolute;
width: 100%;
height: 50%;
background: white;
bottom: 0%;
border-radius: 15px 15px 0px 0px
}
<div id="bigContainer">
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
My solution uses flex box to align all the items as desired. If the there are more items than there is space for it adds a scrollbar (uncomment the extra divs to see it in action)
https://jsfiddle.net/nfdgyx73/58/
#container {
position: relative;
width: 80%;
height: 40%;
overflow-x: scroll;
background: gray;
display: inline-flex;
flex-direction: row;
align-items: center;
}
#container::before, #container::after {
content: '';
margin: auto;
}
.item {
width: 10%;
height: 80%;
background: url("http://www.icemeltmanufacturers.com/wp-content/uploads/2016/09/head-icon-png-5.png");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
margin: 0 5px;
flex-shrink: 0;
}
#bigContainer {
position: absolute;
width: 100%;
height: 50%;
background: white;
bottom: 0%;
border-radius: 15px 15px 0px 0px
}
<div id="bigContainer">
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<!-- <div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div> -->
</div>
</div>
If position: absolute; isn't necessary, this could be done with flexboxes
#container {
display: flex;
justify-content: center;
width: -webkit-fit-available;
padding: 20px;
background: gray;
}
#container .item {
margin-right: 10px;
}
#container .item:last-child {
margin-right: 0;
}
.item {
width: 25px;
height: 25px;
background-image: url("http://www.icemeltmanufacturers.com/wp-content/uploads/2016/09/head-icon-png-5.png");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
}
#bigContainer {
display: flex;
width: 80%;
background: white;
overflow-x: auto;
border-radius: 15px 15px 0px 0px;
margin-bottom: 20px; /* This is just to help differentiate the two bigContainers */
}
<div id="bigContainer">
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div id="bigContainer">
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
Related
There are 9 circles that scroll horizontally, left to right. It is necessary that each circle when approaching the right side of the screen increased in size by 150% (see screenshot), also when scrolling should be animated rotation of each circle in a clockwise direction. Please advise how this can be implemented using JS/CSS.
enter image description here
.wrapper {
display: flex;
overflow-x: auto;
gap: 10px;
transform: rotateY(-180deg);
}
.wrapper .item {
min-width: 350px;
min-height: 350px;
border-radius: 50%;
text-align: center;
border: 1px dashed black;
transform: rotateY(180deg);
}
<div class="section1">
<h1>Companies we keep</h1>
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
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>
I have a container with images and a "load more" button to add more images. It works, but I want to make a smooth opening from top to bottom, but I fail. I added 'opacity' to see it works, but still, 'transition' doesn't happen. I looked at other people's examples, where the code works using the height of the container, but I add the number of images, I want to add 6 images and smoothly. How can do this correctly?
let data = Array.from(document.querySelectorAll('.block .item')),
step = 6,
item = 0;
data.slice(step).forEach(e => e.style.display = 'none');
item += step;
document.querySelector('#load').addEventListener('click', function(e){
let tmp = data.slice(item, item + step);
tmp.forEach(e => e.style.display = 'block');
item += step;
let animation = document.querySelector('.block');
animation.classList.add('fade');
if(tmp.length < 6){
this.remove();
}
});
.block {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
width: 80%;
margin: auto;
}
.item {
background-color: #6ab7eb;
border: 1px solid black;
flex: 0 1 25%;
width: 50px;
height: 50px;
}
#load {
background-color: white;
}
.block.fade {
-webkit-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
opacity: 0.5;
}
<div class="block">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<button id="load">Load more</button>
here is a snippet it may help you:
$(document).ready(function () {
size_li = $(".block .item").size();
x=0;
$('.block li:lt('+x+')').addClass('show');
$('#loadMore').click(function () {
x= (x+5 <= size_li) ? x+6 : size_li;
$('.block .item:lt('+x+')').addClass('show');
});
$('#showLess').click(function () {
x=(x-5<0) ? 3 : x-5;
$('#myList li').not(':lt('+x+')').removeClass('show');
});
});
.block{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
width: 80%;
margin: auto;
}
.item{
background-color: #6ab7eb;
border: 1px solid black;
flex: 0 1 25%;
width: 50px;
height: 50px;
opacity: 0;
transition: all 0.4s ease;
overflow: hidden;
}
.block .item{
height: 0;
opacity: 0;
transition: all 0.4s ease;
overflow: hidden;
}
.block .item.show {
height: 18px;
opacity: 1;
}
#loadMore {
color:green;
cursor:pointer;
}
#loadMore:hover {
color:black;
}
#showLess {
color:red;
cursor:pointer;
}
#showLess:hover {
color:black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="block">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="loadMore">Load more</div>
I would like to make a div with 3 texts, rotate it and place it on a fixed spot on the page. I would like it to perfectly fit the size of the screen,
So I created a div which height and width were the opposite of what I need then I rotated it. The thing is that I'm having problems positioning it correctly on the spot I want. (top:0 right:40px)
This is my code where I tried to move the div around.
.page {
width: 100%;
heigth: 100%;
background-color: #fefefe;
}
.green-band {
height: 90px;
width: 100vh;
padding: 0 30px;
background-color: green;
display: flex;
justify-content: space-between;
align-items: center;
transform: rotate(-90deg);
position: fixed;
top: 0;
right: 40px;
}
<div class="page"></div>
<div class="green-band">
<div class="text-inside">Text 1</div>
<div class="text-inside">Text 2</div>
<div class="text-inside">Text 3</div>
</div>
Can you help me figuring out how to correctly position the div?
.page {
width: 100%;
heigth: 100%;
background-color: #fefefe;
}
.green-band {
height: 90px;
width: 100vh;
padding: 0 30px;
background-color: green;
display: flex;
justify-content: space-between;
align-items: center;
transform: translateX(calc(100% - 40px)) rotate(-90deg);
transform-origin: bottom left;
position: fixed;
bottom: 0;
right: 0;
}
<div class="page"></div>
<div class="green-band">
<div class="text-inside">Text 1</div>
<div class="text-inside">Text 2</div>
<div class="text-inside">Text 3</div>
</div>
I want to make collapsible top boxes. but somehow I was not successful. I want to make objects such as cards on the links page materialize. but also bootstrap
card subject at this link: materializecss.com/cards.html
.card3 {
padding: 20px;
position: absolute;
background-color: #FFF;
width: 97.5%;
overflow-y: auto;
border-radius: 4px;
height: 92%;
z-index: 1;
overflow: hidden;
}
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="card3" class="card3">
.......
</div>
<div class="panel panel-default">
<div class="row">
<div class="col-md-6">
......
</div>
<div class="col-md-6">
.......
</div>
</div>
</div>
</div>
</div>
</div>
Have you tried styling the other divs? Because right now only one of the divs has styling, and that usually doesn't end up with a properly styled product.
you can try this one:
.container
{
background:gray;
padding: 20px;
}
.col-md-12 {
padding: 10px;
background-color: #FFF;
width: 97.5%;
overflow-y: auto;
border-radius: 4px;
height: 12%;
z-index: 1;
overflow: hidden;
}
.wrong
{
float:right;
top:0px;
margin-top:-70px;
cursor:pointer;
}
DEMO HERE