Css / jquery - how to hide the last row of floated elements if not even
I'm looking for a quick and easy way (either in css or jquery) to hide the last row of floated elements if not already defined.
See JS Fiddle: http://jsfiddle.net/cohhvfjn/
When you resize the html container, sometimes the last row of floating point elements can have 3 elements when there are 4 above it, the same when it shrinks down, so that the last row has 1 element when the superscript has 2 element.
Basically I'm trying to remove / hide this last line only if the number of items in it doesn't match the above line.
Can anyone help me with this?
Here is the basic html included in the jsfiddle:
<style>
.content {width:100%;}
.content .block {float:left;width:20%}
@media all and (max-width: 600px) {
.content .block {width:25%}
}
@media all and (max-width: 500px) {
.content .block {width:33.3%}
}
@media all and (max-width: 400px) {
.content .block {width:50%}
}
</style>
<div class="content">
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
</div>
source to share
Using a combination of nth-child
and nth-last-child()
.
If you need 4 elements per line, you can target every fourth element starting with the 1st (so 1, 5, 9, ...), which is also the last one (meaning it is the only element on the last line ), from the second to the last child (there are only 2 elements in the last line) or from the third to the last child (there are only 3 elements in the last line).
The same applies for strings of other lengths. This article by Haydon Pickering is very helpful in this situation.
Note. ... I changed your media queries to make my demo more manageable and also used the <ol>
item number for clarification.
<style>
.content {width:100%;}
.content .block {float:left;width:20%}
@media all and (min-width: 501px) and (max-width: 600px) {
/* 4 elements to a row */
.content .block {width:25%}
.content .block:nth-child(4n+1):nth-last-child(1),
.content .block:nth-child(4n+1):nth-last-child(2),
.content .block:nth-child(4n+1):nth-last-child(2) ~ .block,
.content .block:nth-child(4n+1):nth-last-child(3),
.content .block:nth-child(4n+1):nth-last-child(3) ~ .block {
display: none;
}
}
@media all and (min-width: 401px) and (max-width: 500px) {
/* 3 elements to a row */
.content .block {width:33.3%}
.content .block:nth-child(3n+1):nth-last-child(1),
.content .block:nth-child(3n+1):nth-last-child(2),
.content .block:nth-child(3n+1):nth-last-child(2) ~ .block {
display: none;
}
}
@media all and (max-width: 400px) {
/* 2 elements to a row */
.content .block {width:50%}
.content .block:nth-child(2n+1):last-child {
display: none;
}
}
</style>
<ol class="content">
<li class="block">Text</li>
<li class="block">Text</li>
<li class="block">Text</li>
<li class="block">Text</li>
<li class="block">Text</li>
<li class="block">Text</li>
<li class="block">Text</li>
<li class="block">Text</li>
<li class="block">Text</li>
<li class="block">Text</li>
<li class="block">Text</li>
<li class="block">Text</li>
<li class="block">Text</li>
<li class="block">Text</li>
<li class="block">Text</li>
</ol>
source to share
You can do something like this:
function hideOdd() {
var blocks = $(".block");
blocks.show();
var nr_per_row = Math.round($(".content").width() / blocks.width());
var elements_to_hide = blocks.length % nr_per_row;
for (var i = 0; i < elements_to_hide; ++i) {
blocks.eq(blocks.length - i - 1).hide();
}
}
$(document).ready(function () {
$(window).on("resize", hideOdd);
hideOdd();
});
Updated script: http://jsfiddle.net/cohhvfjn/1/
source to share