News list of the same height

Menu
  1. 1. Problem
  2. 2. How to solve problem
  3. 3. Example jquery extension
  4. 4. Call jquery extension

Establish the all elements of a container according to the maximum height of the one element.

Example box

Problem

When you create sites, business cards, companies often post their news or publish their journals and etc. Designers draw such an entity in the form of elements of the same height, sometimes with graphics headline news. Means css and html to make the alignment of all elements of the adjustment will not work, especially if we consider an adaptive design, then there is always the resolution, in which everything is a little bit to go.

How to solve problem

For this task, I jotted down a small extension that collects all the elements of what that essentially checks maximum height of the block and sets it for all elements.

An example of a template of the list of news

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="app">
<div class="container">
<div class="row box-container js-fixed-height">
<div class="col-md-6">
<a class="box-item box" href="#">
<div class="box-item__img box-img"><img src="ex-1.jpg" alt="" /></div>
<div class="box-item__content box-content"><h4>Title news 1</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
</a>
</div>
<div class="col-md-6">
<a class="box-item box" href="#">
<div class="box-item__img box-img"><img src="ex-1.jpg" alt="" /></div>
<div class="box-item__content box-content"><h4>Title news 2</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</a>
</div>
<div class="col-md-6">
<a class="box-item box" href="#">
<div class="box-item__img box-img"><img src="ex-1.jpg" alt="" /></div>
<div class="box-item__content box-content"><h4>Title news 3</h4><p>Decsription for news 3</p></div>
</a>
</div>
<div class="col-md-6">
<a class="box-item box" href="#">
<div class="box-item__img box-img"><img src="ex-1.jpg" alt="" /></div>
<div class="box-item__content box-content"><h4>Title news 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
</a>
</div>
</div>
</div>
</div>

Css properties for the template of the list

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html { font-size: 100%; -webkit-tap-highlight-color: transparent; }
body { font-size: 14px; line-height: 1.42857; color: #231f20; margin: 0; }
.app { padding: 20px; }
.row { margin-left: -15px; margin-right: -15px; }
.row:before, .row:after { display: table; content: " "; }
.row:after { clear: both; }
.container { width: 1200px; margin: 0 auto; }
.col-md-6 { width: 50%; float: left; padding-left: 15px; padding-right: 15px; position: relative; min-height: 1px; }
.box-item { display: block; position: relative; text-decoration: none; background-color: #E8E8E8; margin: 10px 0; }
.box-item__img { position: relative; text-align: center; }
.box-item__img > img { max-width: 100%; height: auto; }
.box-item__content { padding: 34px 40px 40px; position: relative; }
.box-item__content h4 { margin: 0; color: #4d4d4d; }
.box-item__content p { margin: 28px 0 0 0; }

Example jquery extension

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
+function ($) {
'use strict';
var self;
var Box = function(element, options) {
self = this;
self.options = '';
self.$element = null;
self.isShown = false;
self.init('box', element, options);
self.windowWidth = $(window).width();
self.windowHeight = $(window).height();
};
Box.prototype.init = function(type, element, options) {
self.$element = $(element);
var $elementChild = self.$element.find('.box');
this.addArray($elementChild, self.$element);
};
Box.prototype.addArray = function(element, parent) {
var elementArrayTmp = [],
elementArray = [];
var $items = element,
$itemsImg = $items.children('.box-img'),
$itemsContent = $items.children('.box-content');
self.isShown = true;
self.destroy($items);
var i = 0,
j = 0,
len = $items.length;
for (i; i < len; i++) {
if($itemsImg.length !== 0){
if($itemsImg[i].offsetHeight !== 0)
elementArrayTmp.push($itemsImg[i].offsetHeight);
}
elementArray.push($itemsContent[i].offsetHeight);
}
$items.each(function(key, element) {
if($(window).width() <= 760) return false;
$(this).css('height', elementArray.max() + elementArrayTmp.min() + 'px');
$itemsImg.css({
'height': elementArrayTmp.max() + 'px',
'overflow': 'hidden'
});
$itemsContent.css({
'height': (elementArray.max()) + 'px',
'transition': 'all 0.3s'
});
});
self.resize();
};
Box.prototype.destroy = function(element) {
var element = (element) ? element : self.$element.find('.box');
var $items = element,
$itemsImg = $items.children('.box-img'),
$itemsContent = $items.children('.box-content');
$items.removeAttr('style');
$itemsImg.removeAttr('style');
$itemsContent.removeAttr('style');
};
Box.prototype.refresh = function() {
var triggers = self.$element.attr('class').split(' ');
var parent = $('.' + triggers[triggers.length - 1]);
$.each(parent, function(){
if($(this).is(':visible')){
var $elementChild = $(this).find('.box');
self.addArray($elementChild, this);
}
});
};
Box.prototype.resize = function () {
if (self.isShown) {
$(window).on('resize.bs.box', $.proxy(self.handleUpdate, this));
} else {
$(window).off('resize.bs.box');
}
};
Box.prototype.handleUpdate = function(element) {
var windowWidthNew = $(window).width();
var windowHeightNew = $(window).height();
if(self.windowWidth != windowWidthNew || self.windowHeight != windowHeightNew){
self.windowWidth = windowWidthNew;
self.windowHeight = windowHeightNew;
self.refresh.call();
}
};
Array.prototype.max = function() {
return Math.max.apply(null, this);
};
Array.prototype.min = function() {
return Math.min.apply(null, this);
};
function Plugin(option) {
return this.each(function() {
var $this = $(this);
var data = $this.data('bs.box');
var options = typeof option == 'object' && option;
if($(this).is(':visible')){
if (!data) $this.data('bs.box', (data = new Box(this, options)));
if (typeof option == 'string') data[option]();
}
});
}
$.fn.box = Plugin;
$.fn.box.Constructor = Box;
}(jQuery);

Call jquery extension

1
2
3
if ($('.js-fixed-height').length && $('.js-fixed-height').is(':visible')) {
$('.js-fixed-height').box();
}

Refresh block, if has been invisible, for ex into the tabs.

1
$('.js-fixed-height').refresh();

To reset a fixed height for the blocks you want to call the method Destroy

1
$('.js-fixed-height').destroy();

Download