So My situation is this, I have a lot of divs... A LOT (over 300) and im using them as part of an interactive background. EDIT:(they all have the same class btw)
The Problem?
Since on mobile I need more divs to fill the page than on desktop, I have too many divs on desktop, meaning you can scroll wayyyyyy more than I want to.
How can I have it so Divs Below a certain point are deleted or (more usefully) how to stop scrolling after a certain amount of pixels.
I literally have no idea how to do this, I've tried experimenting with margins, padding, overflow, position: fixed; but I haven't found a solution so don't pester my "lack of effort"
(some of my accounts have been blocked because I had no legitimate idea what to do and you "cool kids" decided to downvote me enough to get blocked (thanks for that!))
Anyway enough blabbing. Help would be appreciated! Thanks in advance.
You can do 2 things for this:
Wrap all your content in a div and set height to it and overflow-y: hidden.
.wrapper{
height: 1000px; overflow-y: hidden
}
With CSS you can hide the elements after certain number. Like if you want to hide all div after 100
.container .className:nth-child(n+101) {
display: none;
}
This will hide all the divs after 100.
Put all your divs inside a container div and use this css
.container{
max-height:900px; // Set this value to the no of pixel you want to scroll
overflow:hidden;
}
I have set the max-height to 900px cause i want to show only 9 div each div is off height 100px.
SNIPPET
.item {
width: 100%;
height: 100px;
background-color: red;
}
.item:hover {
background-color: yellow;
}
.container {
max-height: 900px;
overflow: hidden;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<!--You cant scroll after that-->
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
</div>
Related
I am having some scrolling issue when using my website on mobile devices (tested on iPhone).
The issue is that, on mobile, when touching or moving finger outside of the scrollable div, when trying to scroll this div after that, it is blocked until you wait a moment or scroll slowly, or touch it.
https://imgflip.com/gif/75nefo shows my issue. when scroll outside 'scrollable', then when scrolling back into scrollable, it keeps scrolling the whole body and takes a few more tries until it finally scrolls where I want.
The website is the following, as seen in the gif.
body{
margin: 0;
padding: 0;
}
.frame{
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
background-color: lightblue;
overflow: hidden;
}
.scrollable{
overflow: scroll;
}
.bottom-nav{
width: 100%;
background-color: lightcoral;
padding: 30px 10px;
box-sizing: border-box;
}
.sample-cube{
background-color: lightgreen;
box-sizing: border-box;
padding: 10px;
width: 100%;
height: 200px;
}
.sample-cube + .sample-cube{
margin-top: 10px;
}
<body>
<div class="frame">
<div class="scrollable">
<div class="sample-cube"> this is stuff on the scrollable area</div>
<div class="sample-cube"> </div>
<div class="sample-cube"> </div>
<div class="sample-cube"> </div>
<div class="sample-cube"> </div>
<div class="sample-cube"> </div>
<div class="sample-cube"> </div>
</div>
<div class="bottom-nav">
navigation area with options
</div>
</div>
</body>
I was wondering if there's any way to give the scrollable div a priority so that, whenever it is scrolled on, it scrolls from the first finger touch-swipe instead of being locked...
Ended up finding something that works for me, after doing some investigation, the issue seems to be related to how IOS Safari handles scrolling. This question has many approaches as answers but there's one in particular that works the best for me.
There's this library that lets you block the body scroll, when you want a fixed body like on my case, and allow scroll only on a certain element. It works like a charm!!!
Body Scroll Lock on npmjs
Now my scroll doesn't 'freeze' when I scroll outside of my scrollable element and quickly scroll my scrollable element again!!
Here is a example
.FlexContainer {
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: column;
max-height: 220px;
margin: 10px;
padding: 20px;
width: 300px;
overflow-y: auto;
}
.FlexItem {
background: hsla(0,0%,0%,.1);
width: 80%;
margin: 2px;
padding: 6px;
word-break: break-all;
white-space: normal;
cursor: pointer;
}
.FlexItem:hover{
background-color: red;
}
<html>
<head>
<title>demo</title>
</head>
<body>
<div class="FlexContainer">
<div class="FlexItem">
The contents is short in IE11.
</div>
<div class="FlexItem">
The contents is long - inside of this box are overflowing their container in IE11.
</div>
<div class="FlexItem">
The contents inside of this box are overflowing their container in IE11.
</div>
<div class="FlexItem">
The contents inside of this box are overflowing their container in IE11.
</div>
<div class="FlexItem">
The contents inside of this box are overflowing their container in IE11.
</div>
<div class="FlexItem">
The contents inside of this box are overflowing their container in IE11.
</div>
<div class="FlexItem">
The contents inside of this box are overflowing their container in IE11.
</div>
<div class="FlexItem">
The contents inside of this box are overflowing their container in IE11.
</div>
<div class="FlexItem">
The contents inside of this box are overflowing their container in IE11.
</div>
<div class="FlexItem">
The contents inside of this box are overflowing their container in IE11.
</div>
</div>
</body>
</html>
In chrome it can work well
chrome work well
But In IE11 It's not what I expected.
IE11 work not expected
This issue only happen when container height is less than fex items and set overflow-y:auto/scroll.
Is anyone can help me find the cause of the issue?
Appreciate for your help.
Internet Explorer needs you to specify the flex value of you children.
Try to add the property flex: 1 0 auto; to the FlexItem class
I've found the key point maybe the format of setting the width of FlexItem.
If you change the width:80% as 200px, it will work well in IE.
I guess that if you write in % format, IE may could not understand it well.
So you should give a static length to it.
I need some help setting up a column-based grid for flexible layout. I am hoping to use flexbox primarily, but have been unable to figure out how to implement exactly what I need. I am also open to using a JS grid plugin, but again have not found one that meets me specific needs.
Here is a photo that illustrates what I'm hoping to build.
Grid Illustration
The most important priorities are:
The layout creates as many columns as possible within the master content container.
After organizing the content blocks in columns, resize each content block so that each column's height is uniform.
The height of the master content container's height scales fit content within.
Having the elements display in order is preferable, but not mandatory.
I also want the width of the content container to scale based on device. So predictably when it goes down to mobile it becomes a simple one column layout.
Now I believe I can control the number of grids by setting the container width, and content block width specifically based on device. I.e. if it's on mobile the content blocks are 100% width, and if it is on desktop the container is 900px and the content blocks are 300px.
That plus flexbox should give me something that resembles this. Flexbox Illustration, but only if I set a fixed height on the master container, which is not ideal.
So my question is, is there a way to setup flexbox to achieve my goals? If, not is there JS plugin that is capable of doing this?
HTML
<div id="blocks">
<div class="block">
<div class="info" style="height:280px"></div>
</div>
<div class="block">
<div class="info" style="height:280px"></div>
</div>
<div class="block">
<div class="info" style="height:280px"></div>
</div>
<div class="block">
<div class="info" style="height:600px"></div>
</div>
<div class="block">
<div class="info" style="height:400px"></div>
</div>
<div class="block">
<div class="info" style="height:300px"></div>
</div>
</div>
CSS
#blocks{
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items:flex-start;
flex-wrap:wrap;
background-color: #ddd;
width:900px;
height:900px;
}
.info{
position:relative;
width:80%;
background-color: #888;
margin: 5px 0px;
}
.block{
width:290px;
background-color: #ddd;
border: 1px solid black;
flex: 1 0 auto;
display:flex;
flex-direction:column;
justify-content: center;
align-items:center;
}
CodePen
I am trying to add a slider to an existing page that has a left and right side. The left side has a background image, some text and a clear fix that expands the image to the height of the right side.
When I use Slick Slider and make the left side element a slide, the clear fix no longer works and the height is dictated by the content of the left element.
Here are 2 jsfiddles that demonstrate the problem:
Without slider: http://jsfiddle.net/robmccart/15wrct6g/
With slider: http://jsfiddle.net/robmccart/yj9nerh1/
Here's the code with slider:
<div class="parent">
<section class="right-side"></section>
<section class="slider left-side">
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide1</div>
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide2</div>
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide3</div>
</section>
</div>
CSS:
$c1: #3a8999;
$c2: #e84a69;
.parent {
background: #336633;
}
.right-side {
float: right;
height: 700px;
}
.left-side {
padding-right: 450px;
}
I'm not sure if I'm using the clear fix properly, but it looks like the code injected by Slick Slider is breaking something.
Thanks
Is it possible to create this page layout with css alone? if so what is the best way to go about it? floating puts all block level elements aligned to the last page break along the top, display:inline-block just aligns up along the bottom. Neither create the alineation model from the image below.
I know I could position them manually but the divs are filled with content from a data base so they will need to adjust automatically and align this way independently of their size. I thought about calculating all their heights with javascript and positioning them dynamically this way, but I've got this feeling that there might be a simple way of doing this that I'm totally overlooking. any ideas?
I guess you are looking for a layout similar to Pinterest, so the first Google search returned this example. There are a lot of other results, so I am sure one should fit your needs if you search yourself.
Have 3 columns, and fill the blocks in them,
Something like this,
Skeleton:
<div class="column-container">
<div class="column-1">
<div class="block">...</div>
<div class="block">...</div>
</div>
<div class="column-2">
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
</div>
<div class="column-3">
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
</div>
</div>
css:
.column-1, .column-2, .column-3{
float:left;
width:200px;
height:auto;
}
.block{
display:block;
width:180px;
}
And the blocks you add to each column will go sit below one another. Simple.
Updated response:
Flexbox almost does what you want (as does something like I posted below) but if you're ordering must be left-to-right and it must tight-fit vertically as in your mock - perhaps consdier something like http://masonry.desandro.com/?
Original response:
Maybe try something like this?
.container {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
}
.container div {
display: inline-block;
width: 200px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
margin-bottom: 10px;
}
Here: http://jsfiddle.net/bvaughn/rrpg58yy/
Bootsrap is the one I recommend, u simply add the reference to your file (or project) and then it's really easy to design the layout that you want, after you implement Bootstrap, your code will look like this:
<div class="container">
<div class="col-lg-3">
<div class="row">
<div>some data 1</div>
</div>
<div class="row">
<div>some data 2</div>
</div>
<div class="row">
<div>some data 3</div>
</div>
</div>
<div class="col-lg-3">....
Fiddle
Make sure you resize your page, since bootstrap stacks all the divs together for smaller (mobile) screens