1

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.

1

Have you already tried out the Equal Heights jQuery module? This module does exactly what you want, without having to create custom code and works fine with Zen.

  • Good to hear your problem is solved! – Watergate Apr 16 '15 at 8:29
  • @kiamlaluno what's your problem with this post now? – Sage May 6 '15 at 17:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.