We Keep Coding

Center the focused item in horizontal scroll

I have created a horizontal scroll container with <HTML/> and CSS:
body {
background-color: #212121;
}
.scroll_container {
height: 100px;
width: 400px;
display: flex;
align-items: center;
overflow-y: hidden;
width: 100%;
height: 20%;
}
.scroll_container_sub {
height: 100px;
min-width: 230px;
float: none;
display: inline-block;
zoom: 1;
margin: 10px;
border: solid 1px transparent;
border-radius: 15px;
background-color: #fff;
}
<div class="scroll_container">
<div class="scroll_container_sub"></div>
<div class="scroll_container_sub"></div>
<div class="scroll_container_sub"></div>
</div>
What I try:
Is it possible that every time one item (scroll_container_sub) is centered in the scroll_container? Especially for mobile use, this is very good.
EXAMPLE:
After the scroll the middle item gets centered horizontally:
(image: mobile view)
That means that things like this should not exist:
Because none of the containers are centered. When I look at a scroll position like this the scroll view should center one of the containers.
For hopefully more detail: :)
In the following link, you see what I try to achieve. Look only at the few seconds in the beginning.
The cards are centered every time after the user swiped. Exactly what I try to achieve:
https://www.youtube.com/watch?v=UsXv6VRqZKs Do you need a live example? No Problem. In the Google Play Store, you find them. For example this swiper:
~filip

2022 edit: unless you need to support old browsers, scroll-margin is now the way to go.
JS implementation and theory follows:
The general formula is as following - you find your element of interest, find its middle point (x + width / 2), then subtract half of container's width from that:
window.addEventListener("load", function(e) {
var container = document.querySelector(".scroll_container");
var middle = container.children[Math.floor((container.children.length - 1) / 2)];
container.scrollLeft = middle.offsetLeft +
middle.offsetWidth / 2 - container.offsetWidth / 2;
});
body {
background-color: #212121;
}
.scroll_container {
height: 100px;
width: 400px;
display: flex;
align-items: center;
overflow-y: hidden;
position: relative;
width: 100%;
height: 20%;
}
.scroll_container_sub {
height: 100px;
min-width: 230px;
float: none;
display: inline-block;
zoom: 1;
margin: 10px;
border: solid 1px transparent;
border-radius: 15px;
background-color: #fff;
}
<div class="scroll_container">
<div class="scroll_container_sub"></div>
<div class="scroll_container_sub"></div>
<div class="scroll_container_sub"></div>
</div>
If you want to dynamically apply this effect, you would want to wait until the user is done scrolling, calculate the new scroll destination, and ease towards that over time.

center align grid without gaps and floating

I have a grid set up where the blocks are centre aligned, thus I've done this using display: inline block and set text-align: center to the container. BUT now the client wants variable heights on the blocks which now leaves big gaps in the grid as they're inline-block. Alternatively I could use float: left but this won't work as the blocks need to be centred. I have a codepen setup here: https://codepen.io/anon/pen/WOaeve
I usually use the isotope plugin for grids but there's no layout mode that'll allow for centre aligned blocks so I need a solution that'll allow for all the gaps in the grid to be filled AND for the blocks to be centred. Here's my CSS markup also:
.feed-grid {
position: relative;
display: block;
width: 100%;
height: auto;
text-align: center;
font-size: 0;
}
.feed-grid .grid-block {
display: inline-block;
vertical-align: top;
margin-left: 6px;
margin-right: 6px;
margin-bottom: 12px;
width: auto;
height: 255px;
}
.feed-grid .grid-block.large {
height: 522px;
}
.feed-grid .grid-block img {
position: relative;
display: block;
width: auto;
height: 255px;
}
.feed-grid .grid-block.large img {
height: 522px;
}
Any solutions to this would be greatly appreciated!

It may solve your problem. I have used float: left; in .child elements.
.container {background: green; overflow: hidden; text-align: center; padding: 15px;}
.center-element {float: none; background: yellow; overflow: hidden; width: auto; box-sizing: border-box; display: inline-block; padding: 5px; vertical-align: middle;}
.child {float: left; padding: 12px 24px; background-color: red;}
.child:not(:first-child) {margin-left: 5px;}
<div class="container">
<div class="center-element">
<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>

What about a vertical middle alignement in the cases you have a smaller image than its "row" ?
Here is a CodePen
$(document).ready(function(){
var rowHeight = 0;
var rowHeights = [];
var rowCount = 0;
var offset = $(".grid-block").first().offset().top;
// Loop throught all images to get their heights.
$(".grid-block img").each(function(){
// If on the same row
if($(this).offset().top == offset){
// Find the biggest height
if($(this).height() > rowHeight){
rowHeight = $(this).height();
rowHeights[rowCount] = rowHeight;
}
// If the row is different.
}else{
// Get the new row offset.
offset = $(this).offset().top;
rowCount++;
rowHeight = $(this).height();
rowHeights.push(rowHeight);
}
// Set a custom attribute to apply the right margins.
$(this).attr("data-row",rowCount);
});
//Here you have the array of row heights in console.
console.log(JSON.stringify(rowHeights));
// Loop again to apply some margins.
$(".grid-block img").each(function(){
var thisRowHeight = rowHeights[parseInt($(this).data("row"))];
// Apply the margin if this image is smaller than the row height.
if( $(this).height() < thisRowHeight ){
var margin = (thisRowHeight - $(this).height() )/2;
$(this).css({"margin":margin+"px 0"});
}
});
});
It "measures" the row height to apply a margin to small images... Making them at the middle.

Align animation in center without text-align center

I am trying to smooth out this custom animation.
See Working Animation Here.
The problem I am having is that when the city name revolves up and replaces the old one, the text-align center causes the h2 text to re-align center in one frame. I want to smooth out this transition so it eases into the align center instead of just jumping to it.
I hope that explanation helps. Here is my code.
HTML
<div class="coverage">
<h2>Kellin has service in <span class="flip"></span></h2>
<ul class="coverage_list">
<li>Larkspur</li>
<li>Castle Rock</li>
<li>Monument</li>
<li>Palmer Lake</li>
<li>Colorado Springs</li>
<li>Pueblo</li>
<li>Peyton</li>
<li>Falcon</li>
<li>Calhan</li>
<li>Franktown</li>
<li>Elizabeth</li>
<li>Elbert</li>
<li>Glenwood Springs</li>
<li>Rifle</li>
<li>Silt</li>
<li>El Jebel</li>
<li>Carbondale</li>
<li>New Castle</li>
<li>Parachute</li>
<li>Battlement</li>
</ul>
</div><!-- end .coverage -->
CSS
/* Coverage Banner */
.coverage{
border: 2px solid #333;
width: 100%;
}
.coverage ul.coverage_list{
display: none;
}
.coverage h2{
font-size: 2em;
font-weight: 700;
padding: 0px;
margin:0px;
overflow: hidden;
display: block;
text-align: center;
white-space: nowrap;
}
.coverage h2 .flip{
display: inline-block;
position: relative;
padding: 0px;
margin: 0px;
}
.coverage h2 .flip .current{
position: relative;
left:0;
display: inline-block;
text-align: left;
width: 100%;
padding: 0px;
margin: 0px;
}
.coverage h2 .flip .newcity{
position: absolute;
display: inline-block;
text-align: left;
white-space: nowrap;
left: 0;
padding: 0px;
margin: 0px;
}
JS / Jquery
var coverageVars = {
index : 1,
count : 0,
flipTime : 500
}
// .current = Current City, position relative
// .newcity = New City, position absolute;
$(document).ready(function(){
// Load First City Into H2 Display
var firstCity = $('ul.coverage_list li:nth-child(1)').html();
$('.coverage h2 .flip').append('<span class="current">'+firstCity+'!</span>');
// Get Count
coverageVars.count = $('ul.coverage_list').children('li').length;
var flipTimer = setInterval(function(){
// Increase Counter
if( coverageVars.index < coverageVars.count ){
coverageVars.index += 1;
} else {
coverageVars.index = 1;
}
// Get City Names
var currentCity = $('.coverage h2 .flip .current').html();
var newCity = $('ul.coverage_list li:nth-child('+coverageVars.index+')').html();
// Append newcity span to flip element
$('.coverage h2 .flip').append('<span class="newcity" style="top:50px;">'+newCity+'!</span>');
$('.coverage h2 .flip .current').animate({top:'-50px'}, coverageVars.flipTime, function(){
$(this).remove();
});
$('.coverage h2 .flip .newcity').animate({top:0}, coverageVars.flipTime, function(){
console.log('done!');
$(this).removeClass('newcity').addClass('current');
});
}, 1500);
});
I figure i would have to align with margins and then put a css transition on the margins but I can't figure it out. Thanks for the help.

An other idea:
Get the width of your <h2> (without .flip)
Get the width of the next <li> that will be appended. For this .coverage_list can't be set to display: none, but you can set the height: 0 and overflow to hidden.
Animate your <h2> to the new width (<h2> + <li>). Maybe with 1-2px more, due to browser rendering
Repeat steps #2 and #3 and always animate the width before appending

How to make the main content div fill height of screen with css [duplicate]

This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
So I have a webpage with a header, mainbody, and footer.
I want the mainbody to fill 100% of the page (fill 100% in between footer and header)
My footer is position absolute with bottom: 0. Everytime I try to set the mainbody to 100% height or change position or something it will also overflow the header. If if set the body to position absolute with top: 40 (cause my header is 40px high), it will just go 40px too far down, creating a scroll bar.
I created a simple html file since i cannot actually post the entire page/css from the actual project. With the sample code, even though the maincontent body fills the screen, it goes 40px too far down (cause of the header I assume).
html,
body {
margin: 0;
padding: 0;
}
header {
height: 40px;
width: 100%;
background-color: blue;
}
#maincontent {
background-color: green;
height: 100%;
width: 100%;
}
footer {
height: 40px;
width: 100%;
background-color: grey;
position: absolute;
bottom: 0;
}
<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<div id="maincontent">
</div>
<footer></footer>
</body>
</html>
Anyone knows the answer?

These are not necessary
remove height in %
remove jQuery
Stretch div using bottom & top :
.mainbody{
position: absolute;
top: 40px; /* Header Height */
bottom: 20px; /* Footer Height */
width: 100%;
}
check my code : http://jsfiddle.net/aslancods/mW9WF/
or check here:
body {
margin:0;
}
.header {
height: 40px;
background-color: red;
}
.mainBody {
background-color: yellow;
position: absolute;
top: 40px;
bottom: 20px;
width:100%;
}
.content {
color:#fff;
}
.footer {
height: 20px;
background-color: blue;
position: absolute;
bottom: 0;
width:100%;
}
<div class="header" >
</div>
<div class="mainBody">
<div class="content" >Hello world</div>
</div>
<div class="footer">
</div>

No Javascript, no absolute positioning and no fixed heights are required for this one.
Here's an all CSS / CSS only method which doesn't require fixed heights or absolute positioning:
/* Reset */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
/* Essentials */
.container {
display: table;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
/* Aesthetics */
.container {
width: 100%;
height: 100%;
}
.header,
.footer {
padding: 10px 20px;
background: #f7f7f7;
}
.content-body {
padding: 20px;
background: #e7e7e7;
}
<div class="container">
<header class="header">
<p>This is the header</p>
</header>
<section class="content">
<div class="content-body">
<p>This is the content.</p>
</div>
</section>
<footer class="footer">
<p>This is the footer.</p>
</footer>
</div>
The benefit of this method is that the footer and header can grow to match their content and the body will automatically adjust itself. You can also choose to limit their height with css.

There is a CSS unit called viewport height / viewport width.
Example
.mainbody{height: 100vh;} similarly html,body{width: 100vw;}
or 90vh = 90% of the viewport height.
**IE9+ and most modern browsers.

This allows for a centered content body with min-width for my forms to not collapse funny:
html {
overflow-y: scroll;
height: 100%;
margin: 0px auto;
padding: 0;
}
body {
height: 100%;
margin: 0px auto;
max-width: 960px;
min-width: 750px;
padding: 0;
}
div#footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 60px;
}
div#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
div#pageContent {
padding-bottom: 60px;
}
div#header {
width: 100%;
}
And my layout page looks like:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="pageContent"></div>
<div id="footer"></div>
</div>
</body>
</html>
Example here: http://data.nwtresearch.com/
One more note, if you want the full page background like the code you added looks like, remove the height: auto !important; from the wrapper div: http://jsfiddle.net/mdares/a8VVw/

Using top: 40px and bottom: 40px (assuming your footer is also 40px) with no defined height, you can get this to work.
.header {
width: 100%;
height: 40px;
position: absolute;
top: 0;
background-color:red;
}
.mainBody {
width: 100%;
top: 40px;
bottom: 40px;
position: absolute;
background-color: gray;
}
.footer {
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
background-color: blue;
}
JSFiddle

Well, there are different implementations for different browsers.
In my mind, the simplest and most elegant solution is using CSS calc(). Unfortunately, this method is unavailable in ie8 and less, and also not available in android browsers and mobile opera. If you're using separate methods for that, however, you can try this: http://jsfiddle.net/uRskD/
The markup:
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
And the CSS:
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
min-height: calc(100% - 40px);
}
My secondary solution involves the sticky footer method and box-sizing. This basically allows for the body element to fill 100% height of its parent, and includes the padding in that 100% with box-sizing: border-box;. http://jsfiddle.net/uRskD/1/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#footer {
background: #f0f;
height: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#body {
background: #0f0;
min-height: 100%;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
}
My third method would be to use jQuery to set the min-height of the main content area. http://jsfiddle.net/uRskD/2/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
}
And the JS:
$(function() {
headerHeight = $('#header').height();
footerHeight = $('#footer').height();
windowHeight = $(window).height();
$('#body').css('min-height', windowHeight - headerHeight - footerHeight);
});

Not sure exactly what your after, but I think I get it.
A header - stays at the top of the screen?
A footer - stays at the bottom of the screen?
Content area -> fits the space between the footer and the header?
You can do this by absolute positioning or with fixed positioning.
Here is an example with absolute positioning: http://jsfiddle.net/FMYXY/1/
Markup:
<div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>
CSS:
.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }
To make it work best, I'd suggest using % instead of pixels, as you will run into problems with different screen/device sizes.

Relative values like: height:100% will use the parent element in HTML like a reference, to use relative values in height you will need to make your html and body tags had 100% height like that:
HTML
<body>
<div class='content'></div>
</body>
CSS
html, body
{
height: 100%;
}
.content
{
background: red;
width: 100%;
height: 100%;
}
http://jsfiddle.net/u91Lav16/1/

Although this might sounds like an easy issue, but it's actually not!
I've tried many things to achieve what you're trying to do with pure CSS, and all my tries were failure. But.. there's a possible solution if you use javascript or jquery!
Assuming you have this CSS:
#myheader {
width: 100%;
}
#mybody {
width: 100%;
}
#myfooter {
width: 100%;
}
Assuming you have this HTML:
<div id="myheader">HEADER</div>
<div id="mybody">BODY</div>
<div id="myfooter">FOOTER</div>
Try this with jquery:
<script>
$(document).ready(function() {
var windowHeight = $(window).height();/* get the browser visible height on screen */
var headerHeight = $('#myheader').height();/* get the header visible height on screen */
var bodyHeight = $('#mybody').height();/* get the body visible height on screen */
var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */
var newBodyHeight = windowHeight - headerHeight - footerHeight;
if(newBodyHeight > 0 && newBodyHeight > bodyHeight) {
$('#mybody').height(newBodyHeight);
}
});
</script>
Note: I'm not using absolute positioning in this solution, as it might look ugly in mobile browsers

This question is a duplicate of Make a div fill the height of the remaining screen space and the correct answer is to use the flexbox model.
All major browsers and IE11+ support Flexbox. For IE 10 or older, or Android 4.3 and older, you can use the FlexieJS shim.
Note how simple the markup and the CSS are. No table hacks or anything.
html, body {
height: 100%;
margin: 0; padding: 0; /* to avoid scrollbars */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#body {
flex: 1;
border: 1px solid orange;
}
#footer{
background: lime;
}
<div id="wrapper">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>
In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.

border-radius + overflow:hidden when animating with jQuery

Check this jsFiddle.
The orange bar is serving as a progress bar where the value under the circle is how high the progress bar should be.
Any idea why the overflow:hidden; is beeing disregarded and how do one solve this problem? Oblviously nothing should go outside the circle.
Also is there a better solution for this?

Modified your fiddle a little bit. Here is the link
Modifications:
Changed .outerContainer css to display:block from display:table and addedmargin-top:30px to p css
Check if this works for you.

position: absolute and overflow: hidden don't appear to be playing nicely with display: table/table-cell. Removing the table stuff you had in there to vertically center the text fixes the problem. In Firefox, at least.

I think it's the browser thing...
This is the CSS3 version...
.progressBar {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #ec6730;
transition: height 1s;
}
.innerContainer:hover > .progressBar {
height: 300px;
}
http://jsfiddle.net/ZyhgT/2/
It no longer flashing 'cause browser handle the job (not js loop animation...). But still it shows the edge on animation finish!!! This could be the browser things... Could be a bug...

This is not related to jQuery or any javascript. In fact, if you delete all your javascript and manipulate the height of your .progressBar using css on li:hover, you will notice the bug anyway.
It appears to be a browser issue as reported on: https://code.google.com/p/chromium/issues/detail?id=157218
As a workaround try adding an imperceptible css transform to the mask element:
.outerContainer {
-webkit-transform: rotate(0.000001deg);
}

You just need to change your .outerContainer class and it works just fine!
.outerContainer {
position: relative;
display: block;
height: 96px;
width: 96px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
}

Put the level class inside the outerContainer div and style the span inside the level class to be relatively positioned. In the JavaScript, to calculate the level, divide by 10 instead of 100 for the perfect circular hover effect.
Here is a fiddle.
HTML
<div class="outerContainer">
<div class="innerContainer">
<p>Circle 3</p>
<span class="progressBar"></span>
</div>
<div class="level"><span>75</span>
</div>
</div>
CSS
body {
background: blue;
}
#circles {
text-align: center;
margin: 100px 0;
}
li {
display: inline-block;
margin: 0 10px;
position: relative;
}
.outerContainer {
position: relative;
display: block;
height: 96px;
width: 96px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.innerContainer {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
text-align: center;
}
p {
color: #000;
width: 96px;
position: relative;
z-index: 2;
}
.progressBar {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #ec6730;
}
.level span{
position:relative;
}
JS
$(function() {
$("#circles li").hover(function(){
var thisElement = $(this);
var level = $(this).find(".level").text();
var elementHeight = $(this).find(".outerContainer").height();
level = (level/10)*elementHeight;
$(thisElement).find(".progressBar").stop().animate({
height: level
}, 300);
}, function() {
var thisElement = $(this);
$(".progressBar").stop().animate({
height: 0
}, 300);
});
});

display: table doesn't work that good with CSS positioning;
you should avoid using that, and find some other way to vertically center your labels.
If your circles have a known height, like your code seems to indicate (height:96px ecc), then just use a fixed top position for an absolutely positioned <p> element:
http://jsfiddle.net/ZyhgT/5/
Note that you don't even need jQuery for this, it is all achievable with just CSS3 (unless you are targeting old browsers)