We Keep Coding

How to hide thoes children elements that exceed the paraent's width in CSS

The parent has red dashed border, and the children elements are filled with blue. It can be implemented by inline-block, float, flex, etc.
I want to implement such effect: when the parent's width gets too small to contain the last children element, then the last element will be hidden.
How to implement this with pure CSS or with minimal JavaScript?

There is a way to do this using max-width, max-height and overflow, like the example below:
.parent {
max-width: 400px;
max-height: 60px;
overflow: hidden;
border: 1px dashed #ddd;
}
.child {
width: 100px;
height: 50px;
margin: 5px;
background-color: blue;
display: inline-block;
color: white;
text-align: center;
}
<p>There are 5 items here</p>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
And here is another example using flex instead of display: inline block; with max-width, max-height and overflow too
.parent {
display: flex;
border: 1px dashed #ccc;
max-width: 380px;
max-height: 60px;
overflow: hidden;
flex-wrap: wrap;
}
.child {
background-color: blue;
width: 100px;
height: 50px;
margin: 5px;
}
<pAnother example, using flex, with 5 items too</p>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>

If your html structure is static, you can try to look into media queries.
Otherwise, i'm not sure it would be possible in CSS.
Using overflow: hidden on your parent element will not make the last child desappear until it totaly overflow.

Setting the overflow property of the parent container to hidden can do that for you.

Slider loop with backgroud image

I have a container and within it 5 (or more) items (divs) with another 2 child divs, the second (child) div has a background image (declared as inline-style "background" property). Now, I want an infinite cycle/loop of all this images (items with backgroud images) to work, after one iteration the first one become second, second third... fifth become first etc, with some interval.
I was trying some javascript and jquery with no success, is there a way how to do that? Thank you so much for help.
The code is:
<style type="text/css">
.container {
position: relative;
width: 100%;
display: -webkit-box;
display: flex;
}
.container .img {
position: relative;
width: 240px;
height: 240px;
}
.container .img div {
position: relative;
background-size: cover;
background-position: center;
width: 240px;
height: 240px;
opacity: 0.9;
cursor: pointer;
}
.container .img div:hover {
opacity: 1;
}
</style>
<div id="s" class="container">
<div class="img">
<div style="background: url(https://picsum.photos/id/271/240)"></div>
</div>
<div class="img">
<div style="background: url(https://picsum.photos/id/221/240)"></div>
</div>
<div class="img">
<div style="background: url(https://picsum.photos/id/101/240)"></div>
</div>
<div class="img">
<div style="background: url(https://picsum.photos/id/22/240)"></div>
</div>
<div class="img">
<div style="background: url(https://picsum.photos/id/11/240)"></div>
</div>
</div>

setInterval(function(){
$i=$(document).find('.container .img:nth-child(1)');
$i.clone().appendTo( ".container" );
$i.remove()}, 5000);

How to re-create Facebook image modal?

I want to create something almost exactly like the Facebook image modal wherein the image is fixed while a user scrolls through the comments. I am messing with different ways to apply overflow: hidden to one div and overflow: scroll to the other. I even looked into applying it to their parent. Here is the code I've tried:
<div class="row container border border-primary">
<div class="image col border">
Image
</div>
<div class="text-section col border">
Comments
</div>
</div>
div.image {
height: 300px;
overflow: hidden;
}
div.text-section {
height: 1000px;
overflow: scroll;
}
div.container {
height: 300px;
}
Plunkr

I supposed a code like this. The blue (image) remains fixed on the left, while you can scroll the green section (comments) on the right
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#container { background: red; width: 400px; height: 150px; display: flex; }
#image { background: url("https://i1.adis.ws/i/canon/canon-pro-best-landscape-lenses-1-1140?w=200&aspect=4:3&qlt=70&sm=aspect&fmt=jpg&fmt.options=interlaced&fmt=jpg&fmt.options=interlaced&bg=rgb(255,255,255)"); width: 200px; height: 150px; }
#comments { background: #eee; width: 200px; overflow: scroll; padding: 0 10px 20px 10px; font-family: Verdana; color: black; }
</style>
</head>
<body>
<div id="container">
<div id="image"></div>
<div id="comments">
<h3 style="color: red;">Comments</h3>
<p>Nice!</p>
<p>Good!</p>
<p>Wonderful</p>
<p>Bah...</p>
<p>Strange</p>
<p>Nice again</p>
<p>Amazing</p>
<p>Beautiful</p>
<p>Great</p>
<p>I don’t like it</p>
<p>Yes, nice</p>
<p>Super</p>
<p>Normal</p>
<p>Ok...</p>
<p>Nice</p>
<p>Bah</p>
<p>Great</p>
<p>Nice</p>
<p>I like it</p>
<p>Normal</p>
</div>
</div>
</body>
</html>

I don't have facebook so cant look at the behaviour, but you could put position: sticky; on the image container, that will keep it in place. It also depends on your browser support, like ie11 does not support it, but there are more ways to do this. Let me know if you need a more cross browser solution.
.container {
max-height: 600px;
height: 100%;
overflow: auto;
position: relative;
}
div.image {
height: 300px;
background-color: deepskyblue;
position: sticky;
top: 0;
}
div.text-section {
height: 1000px;
background-color: aqua;
}
<div class="row container border border-primary">
<div class="image col border">
Image
</div>
<div class="text-section col border">
Comments
</div>
</div>

Adjust a 100% width image to vertically center using jQuery or CSS?

Basically I have a fixed size div that contains an <img> tag. I cannot change the structure.
Often these images are much larger than the container due to keeping them 100% width and filling the box. Most times this results in too much of the image shown at top and not cropped to the center of the image.
So using jQuery (or pure CSS if possible) I want to adjust the position of the image to move it up so the top is cropped off instead of the bottom.
Also, this should remain responsive as the viewport changes width.
Here is a fiddle
.container {
height: 200px;
width: 100%;
overflow: hidden;
margin: 0 0 30px;
}
<div class="container">
<img src="http://placekitten.com/900/500/">
</div>
<div class="container">
<img src="http://placekitten.com/901/500/">
</div>

It's doable with known height container, like your demo. We can set the container to position:relative, and set the image to position:absolute, plus some extra set ups as follows.
.container {
height: 200px;
width: 100%;
overflow: hidden;
margin: 0 0 30px;
position: relative;
}
.container img {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
max-width: 100%;
height: auto;
}
<div class="container">
<img src="http://placekitten.com/900/500/">
</div>
<div class="container">
<img src="http://placekitten.com/901/500/">
</div>
jsfiddle

If you are OK with using the images as the div background, you can do the following:
Option1:
HTML:
<div class="container" id="first"></div>
<div class="container" id="second"></div>
CSS:
.container {
height: 200px;
width:100%;
overflow: hidden;
margin: 0 0 30px;
border: solid;
background-position: center center;
background-repeat: no-repeat;
}
#first {
background-image: url('http://placekitten.com/901/500/');
}
#second {
background-image: url('http://placekitten.com/900/500/');
}
Update- Option2:
without using the image as background.
HTML:
<div class="container">
<img class="centered" src="http://placekitten.com/900/500/" />
</div>
<div class="container">
<img class="centered" src="http://placekitten.com/901/500/" />
</div>
CSS:
.container {
height: 200px;
width:100%;
overflow: hidden;
margin: 0 0 30px;
border: solid;
}
.centered {
object-fit: none;
object-position: center;
width: 100%;
height: inherit;
}
Please check this option1, option2

For now I'm going to use:
$("img").each(function(){
var hHeight = $(this).height()/2;
$(this).css("top", - hHeight);
});
I would love to see other solutions, especially if they are better.

Make floated element in column layout ride up to meet element above

Say I have 3 div elements that all have width:50% but have undefined heights. Now say these elements all have the attribute float:left.
Due to the width:50% attribute, the three elements are now in a two column layout, the first element sits left of the second, and the third sits below both the first.
Now, if the first div is 50px tall, and the second div is 200px tall, the third div sits below the line created by the taller div, and thus a big white space of 150px is created between div 1 and div 3.
How can one prevent the white space from occurring?
PS, the divs are being generated dynamically!
Here's a jsfiddle

make the Second element float right
See that Working Fiddle
HTML:
<div class="First"></div>
<div class="Second"></div>
<div class="Third"></div>
CSS:
div
{
float: left;
width: 50%;
}
.First
{
height: 50px;
background-color: red;
}
.Second
{
height: 90px;
background-color: yellow;
float: right;
}
.Third
{
height: 50px;
background-color: green;
}
Edit: If you have an unknown number of div's,
something like this HTML (alter the sizes as you want)
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
Just use this CSS:
div
{
width: 48%;
margin: 1%;
background-color: #09F;
}
div:nth-child(odd)
{
float: left;
}
div:nth-child(even)
{
float: right;
}
Check out this Working Fiddle