News list of the same height (Update)

Menu
  1. 1. Updated

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

Updated

1
2
3
4
5
// default call
// elements - .box
// elementsImg - .box-img
// elementsContent - .box-content
$('.js-fixed-height').box();

example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container js-fixed-height">
<div class="box-item box">
<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>
</div>
<div class="box-item box">
<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>
</div>
<div class="box-item box">
<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>
</div>
</div>

Card List items. Each card has a description and a picture (can been absent)

1
2
3
4
5
6
7
// call with oprions
// elements - list of items that contains elements of the same height (direct parent)
// elementsContent - elements to the same height given by the maximum value
$('.js-fixed-height').box({
elements: '.product-list',
elementsContent: '.product-card'
});

example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="wrapper js-fixed-height">
<div class="product-list">
<div class="product-card">
<div class="product-card__img-wrap"><img class="product-card__img" src="ex-1.jpg" alt="" /></div>
<div class="product-card__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>
</div>
<div class="product-card">
<div class="product-card__img-wrap"><img class="product-card__img" src="ex-2.jpg" alt="" /></div>
<div class="product-card__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>
</div>
<div class="product-card">
<div class="product-card__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>
</div>
</div>
</div>

Card List items. Each card has a picture and a brief description of the block.

1
2
3
4
5
6
7
// call with oprions
// if you want to take into account the height of the block with a picture and description
$('.js-fixed-height').box({
elements: '.product-card',
elementsImg: '.product-card__img-wrap',
elementsContent: '.product-card__content'
});

example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="wrapper">
<div class="product-list js-fixed-height">
<div class="product-card">
<div class="product-card__img-wrap"><img class="product-card__img" src="ex-1.jpg" alt="" /></div>
<div class="product-card__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>
</div>
<div class="product-card">
<div class="product-card__img-wrap"><img class="product-card__img" src="ex-2.jpg" alt="" /></div>
<div class="product-card__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>
</div>
<div class="product-card">
<div class="product-card__img-wrap"><img class="product-card__img" src="ex-3.jpg" alt="" /></div>
<div class="product-card__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>
</div>
</div>
</div>

Download