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

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

HIT

18.11.2015

2781

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

Тэги:

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

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

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

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

Responsive block’s

Responsive block’s

Это эксперимент по складываю блоков при разном разрешении экрана и в различных устройствах. Это очень сырое решение, не рекомендую применять на реальных сайтах. Данное тестирование лучше всего проводить с помощью Читать далее »

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

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

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

/

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

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

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