Использование 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, я действительно не знаю, правильно это или нет. Любая помощь была бы оцененный.
Блоки на моей домашней странице по-прежнему выглядят очень неравномерно, так как контент на одном намного больше, чем на другом. Я хочу, чтобы они оба были равны высоте блока, в котором больше контента.
1 answers
Вы уже опробовали модуль jQuery равных высот ? Этот модуль делает именно то, что вы хотите, без необходимости создавать пользовательский код и отлично работает с Zen.