Использование jquery-match-height для установки двух блоков равной высоты


Я новичок в jquery и добавляю его в Drupal. Однако я пытаюсь добавить эту библиотеку на свой сайт Drupal, чтобы я мог установить два блока на своей домашней странице на одинаковую высоту. Но это не работает, и я не знаю, почему.

Вот библиотека:

Https://github.com/liabru/jquery-match-height

Элементы на домашней странице, которые нужно сделать равными, находятся в двух разных регионах подтемы дзен. Они разделены третьей областью посередине. Вот как выглядят регионы в tpl:

  <?php print render($page['featured_resource']); ?>
  <?php print render($page['hp_video']); ?>
  <?php print render($page['whats_new']); ?>    

Примечание: поскольку я использую Zen, я использовал сетки Zen, чтобы все эти элементы находились в одной "строке" (тот же zen_clear()). Не уверен, что это может вызвать проблемы с тем, как кодируется jquery.

Я хочу установить блоки в "featured_resource" и "whats_new" на одинаковую высоту. Блоки, содержащиеся в этих регионах, я присвоил один и тот же класс друг другу: "feat-res".

Я добавил свою библиотеку jquery и файл кода в свой страницы, использующие drupal_add_js в моем файле шаблона, например:

function mytheme_preprocess_page(&$vars) {
    drupal_add_js(drupal_get_path('theme', 'my_theme') . '/js/jquery.matchHeight.js');
    drupal_add_js(drupal_get_path('theme', 'my_theme') . '/js/matchHeightHP.js');
}

Я думаю, что это называется правильно, потому что, когда я поджигаю страницу, эти файлы .js отображаются в тегах.

Код, который я поместил в файл matchHeightHP, просто такой:

(function() {
    $('.feat-res').matchHeight();
})();

Вот тут-то я и становлюсь особенно неуверенным. Я попытался смоделировать это по примерам, приведенным по ссылке, на которую я ссылался вверху, но, как новичок в jQuery, я действительно не знаю, правильно это или нет. Любая помощь была бы оцененный.

Блоки на моей домашней странице по-прежнему выглядят очень неравномерно, так как контент на одном намного больше, чем на другом. Я хочу, чтобы они оба были равны высоте блока, в котором больше контента.

Author: Sage, 2015-04-15

1 answers

Вы уже опробовали модуль jQuery равных высот ? Этот модуль делает именно то, что вы хотите, без необходимости создавать пользовательский код и отлично работает с Zen.

 1
Author: Watergate, 2015-04-16 08:33:25