We are currently

View our business hours

Equal-height columns

Follow

This functionality requires some basic knowledge of Javascript.

Instructions

You can modify the script below and add it to your "Custom Script Code" in the Design tab of your dashboard. Under the comment "EDIT BELOW HERE" you must tell it which blocks to process using the AW.equalHeights() function. This function takes a jQuery selector string as its argument. All elements which match the specified selector will be made the same height as the tallest element. You can add multiple calls to AW.equalHeights to separately process multiple groups of blocks.

Source code

(function($) {
"use strict";
var AW = AW || {};
AW.equalHeights = function(selector) { var currentTallest = 0; var $elementList = $(selector); if ($.browser.msie && $.browser.version == 6.0) { $elementList.css({'height': 'auto'}); } else { $elementList.css({'min-height': 0}); } $elementList.each(function(){ var $this = $(this); if ($this.width() / $(document).width() < 0.5) { if ($this.height() > currentTallest) { currentTallest = $this.height(); } if (Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified } else { $elementList = $elementList.not(this); } }); // for ie6, set height since min-height isn't supported if ($.browser.msie && $.browser.version == 6.0) { $elementList.css({'height': currentTallest}); } else { $elementList.css({'min-height': currentTallest}); } }; // event handler for equalizing footer block heights AW.processEqualHeights = function(e) { // EDIT BELOW HERE: Add a line or lines like one of the ones below to specify which elements should be equal in height // AW.equalHeights('#block-views-blog-feed-block, #block-views-tweets-block, #block-views-events-block-1'); // processes the three specified blocks // AW.equalHeights('.region-content-bottom .block'); // processes all blocks in content bottom region }; $(window).resize(AW.processEqualHeights); Drupal.behaviors.processEqualHeights = function (context) { AW.processEqualHeights(context); }; })(jQuery);
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk