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

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

HIT

18.11.2015

4226

Одинаковая высота блоков является насущной проблемой при разработке дизайна сайта, средствами 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();	
});

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Фоновые линии

Фоновые линии

Добавим линии в верстку сайта. Это разбавит однородный фон, а также придаст стройности разным блокам контента. 6 секторов Разделение фона линиями на 6 секторов. 12 секторов Тот же самый принцип, Читать далее »

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

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

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

Легкая верстка блоков

Легкая верстка блоков

Представим, что нам нужно упорядочить записи плиткой, т.е. слева направо сверху вниз. При этом, чтобы записи в каждом ряду были выровнены по левому и правому краям. Сделаем максимально простым способом. Читать далее »

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

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

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