If you have used any of our Joomla templates before, you may know that I am a massive fan of using jQuery. One of the things that we use it for is to equalise the height of certain divs so as to make certain design elements more uniform on the page.

As an example, in the powerplay Joomla template we use it to make the grid modules below the slideshow the same height regardless of your content on the front page. This makes it easier to have dynamic content there but still maintain the vertical separators between the module positions.

One shortcoming that the script we use has had in the past, is that height of a page that has images do not have a height set explicitly will be miscalculated, and the contents of the page will appear to overflow the main container.

Thankfully we have a solution that now works more intelligently and waits for all images to load so that we get a better measurement of the height of the page and thereby avoiding the issue.

The new equal heights script is as follows and it utilises the imagesloaded plugin.

Exploring the new code ...

The first part of the script sets up the equal height variable.

{codecitation}

// Equal Heights Script.

function equalHeight(group) {

var tallest = 0;

group.each(function() {

var thisHeight = jQuery(this).height();

if(thisHeight > tallest) {

tallest = thisHeight;

}

});

group.height(tallest);

}
{/codecitation}

The next part is the images loaded plugin.

{codecitation}

<pre style="font: normal normal normal 12px/normal Monaco, 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace; line-height: 1.4em; font-family: 'Bitstream Vera Sans Mono', Courier, monospace; padding: 0px; margin: 0px;"><div id="LC1" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 1em; line-height: 1.4em; margin: 0px;"><span style="line-height: 1.4em; color: #999988; font-style: italic; padding: 0px; margin: 0px;">// $('img.photo',this).imagesLoaded(myFunction)</span></div><div id="LC2" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 1em; line-height: 1.4em; margin: 0px;"><span style="line-height: 1.4em; color: #999988; font-style: italic; padding: 0px; margin: 0px;">// execute a callback when all images have loaded.</span></div><div id="LC3" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 1em; line-height: 1.4em; margin: 0px;"><span style="line-height: 1.4em; color: #999988; font-style: italic; padding: 0px; margin: 0px;">// needed because .load() doesn't work on cached images</span></div><div id="LC4" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 1em; line-height: 1.4em; margin: 0px;"><br style="line-height: 1.4em; padding: 0px; margin: 0px;"></br></div><div id="LC5" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 1em; line-height: 1.4em; margin: 0px;"><span style="line-height: 1.4em; color: #999988; font-style: italic; padding: 0px; margin: 0px;">// mit license. paul irish. 2010.</span></div><div id="LC6" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 1em; line-height: 1.4em; margin: 0px;"><span style="line-height: 1.4em; color: #999988; font-style: italic; padding: 0px; margin: 0px;">// webkit fix from Oren Solomianik. thx!</span></div><div id="LC7" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 1em; line-height: 1.4em; margin: 0px;"><br style="line-height: 1.4em; padding: 0px; margin: 0px;"></br></div><div id="LC8" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 1em; line-height: 1.4em; margin: 0px;"><span style="line-height: 1.4em; color: #999988; font-style: italic; padding: 0px; margin: 0px;">// callback function is passed the last image to load</span></div><div id="LC9" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 1em; line-height: 1.4em; margin: 0px;"><span style="line-height: 1.4em; color: #999988; font-style: italic; padding: 0px; margin: 0px;">//   as an argument, and the collection as `this`</span></div>

jQuery.fn.imagesLoaded = function(callback){

var elems = this.filter('img'),

len = elems.length,

blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";

elems.bind('load',function(){

if (--len <= 0 && this.src !== blank){ callback.call(elems,this); }

}).each(function(){

// cached images don't fire load sometimes, so we reset src.

if (this.complete || this.complete === undefined){

var src = this.src;

// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f

// data uri bypasses webkit log warning (thx doug jones)

this.src = blank;

this.src = src;

}

});

return this;

};

{/codecitation}

This last part needs to be added inside your document ready statement in order for it to fire.

{codecitation}

jQuery('img').imagesLoaded(function() {

equalHeight(jQuery("#leftCol, #midCol"));

});

{/codecitation}

Probably goes without saying but you need the jQuery library to already be loaded on the page. You can do this by using our free jQuery Joomla plugin.

And there you have it ... An equal heights script that will fire once the images have loaded and calculate the height of the divs correctly.

blog comments powered by Disqus