I'm new to jquery and adding it to Drupal. I'm trying however to add this library to my Drupal site so I can set two of the blocks on my home page to equal heights. But it's not working and I'm not sure why.
Here's the library:
https://github.com/liabru/jquery-match-height
The items on the home page to make equal are in two different regions in the zen subtheme. They are separated by a third region in the middle. Here's how the regions look in the tpl:
<?php print render($page['featured_resource']); ?>
<?php print render($page['hp_video']); ?>
<?php print render($page['whats_new']); ?>
Note: because I'm using Zen I've used Zen grids to make all these items be on the same 'row' (the same zen_clear()). Not sure if this might cause problems with the way the jquery is coded.
I want to set the blocks within the 'featured_resource' and 'whats_new' to the same height. The blocks contained within those regions I've given the same class as each other: 'feat-res'.
I've added my jquery library and code file to my pages using drupal_add_js in my template file like so:
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');
}
I think it's calling it correctly because when I firebug the page those .js files are showing up in tags.
The code I've put in the file matchHeightHP is simply this:
(function() {
$('.feat-res').matchHeight();
})();
So that's where I get especially unsure. I tried to model it after the examples given on the link I referenced at the top, but as a jQuery newbie I really don't know if this is correct or not. Any help would be appreciated.
The blocks on my home page continue to look very uneven as the content on one is much great than the content on the other. I want them to both be equal to the height of the block that has more content.
