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

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

HIT

18.11.2015

1300

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

Тэги:

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

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

Верстка типовых блоков


Deprecated: Function create_function() is deprecated in /home/htvtwmhs/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

Находим оптимальные решения верстки типовых блоков, т.е. конструкций которыми на различных сайтах приходиться пользоваться часто. Изображение текст Очень часто используется связка «изображение + текст»: списки статей, перечисление преимуществ, опции, достопримечательности Читать далее »

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

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


Deprecated: Function create_function() is deprecated in /home/htvtwmhs/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

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

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

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


Deprecated: Function create_function() is deprecated in /home/htvtwmhs/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

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

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

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

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