/ Сайтостроение / Scripts & jquery / Одинаковая высота блоков

Одинаковая высота блоков

HIT

18.11.2015

2430

Одинаковая высота блоков является насущной проблемой при разработке дизайна сайта, средствами css это делать не удобно, т.к. требует специальной верстки. Отлично с данной задачей справляется jQuery.

Скрипт EqualHeight

Скрипт для того чтобы динамически сделать одинаковую высоту блоков на странице по самому высокому.

<script type="text/javascript">

$.fn.setEqualHeight = function() {
$this = this;
setTimeout(function() {
var maxHeight = 0;
$this.each(function() {
if (maxHeight < $(this).height()) {
maxHeight = $(this).height();
}
});
$this.each(function() {
$(this).height(maxHeight);
});
}, 1000);
}

$(document).ready(function() {
$(".hentry-box").setEqualHeight();
});

</script>

Нужный для выравнивания блок вписываем в последнюю функцию.
Там где в скрипте прописана цифра (в примере выше 1000) — это временной интервал после которого срабатывает скрипт. Естественно чем быстрее — тем лучше, но иногда нужно «время» чтоб загрузить блоки. И если времени будет недостаточно, то блоки выровнятся не корректно.

Применяется в шаблоне категории для придания блоков с постами одинаковой высоты

На одном из сайтов происходил конфликт с Woocommerce в шаблоне карточки товара (не работала мини-корзина), условием jQuery я его отключил для этого шаблона:

if(!$("div").is(".entry-summary")) {
скрипт EqualHeight
}

Перезагрузка высоты

Если надо на лету перезагрузить высоту блоков, например если мы меняем вид построения постов, то добавляем код

// Перезагрузка высоты блоков при нажатии на кнопки

$( '#btn-block, #btn-line, #btn-photo' ).click(function(){
	  $(".hentry-empty").css("height", "auto");
          $(".hentry-empty").setEqualHeight();
});

// Перезагрузка высоты блоков при изменении размера окна

$(window).resize(function(){
          $(".hentry-empty").css("height", "auto");
          $(".hentry-empty").setEqualHeight();	
});

Одинаковая высота карточек товаров WC

$.fn.setEqualHeight = function() {
    $this = this;
    setTimeout(function() {
      var maxHeight = 0;
      $this.each(function() {
        if (maxHeight < $(this).height()) {
          maxHeight = $(this).height(); 
        }
      });
      $this.each(function() {
        $(this).height(maxHeight);                                
      });
    }, 400);
}
  
$(document).ready(function() {
  $(".products .product").setEqualHeight();
}); 

$(window).resize(function(){
		  $(".products .product").css("height", "auto");
          $(".products .product").setEqualHeight();	
});

Перезагрузка высоты, при переключении табов. Это нужно в случае, если мы реализовали, например, Похожие товары во вкладке.

$('.wc-tabs li').click(function(){
		  $(".products .product").css("height", "auto");
          $(".products .product").setEqualHeight();	
});

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Блочная верстка сайта

Блочная верстка сайта

Сайт должен верстаться по сетке блоками. При использовании сетки разметка сайта выглядит гармонично. Предлагаю свой простой вариант верстки блоков. Для добавления блоков, используйте тэги <div class="box"> <div class="block-1">Содержимое</div> — ширина Читать далее »

Галерея изображений Masonry

Галерея изображений Masonry

Masonry — это принцип построения изображений (блоков) занимая все пространство, по аналогии со строительной кладкой. Галерея изображений Masonry jquery Вставляем изображения в общий div с классом grid, каждое изображение в Читать далее »

/
Построение записей сайта

Построение записей сайта

Можно по разному располагать записи рублики, например: плиткой или списком. Также сделаем механизм по переключению режимов представления постов. Верстка плиткой HTML <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <div class="hentry-box"> Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Одинаковая высота блоков
Наводим порядок в админке
Рекомендации для васНаводим порядок в админкеOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.