Jump to navigation

Equal height boxes with Javascript

Update 20/04: Steve Clay pointed out that the previous version didn’t work in Opera, so I have updated the code accordingly.

As any convert to DOM scripting will tell you, our temple is built on the twin pillars of unobtrusiveness and graceful degradation; your website’s functionality must not rely on scripting, but rather it should act as an additional layer of behaviour to enhance your users’ interaction experience.

Or custard, of course.

Whichever laboured metaphor you choose, they key is that your site experience should not suffer through the user’s lack of Javascript.

But what of your site’s appearance?

Fixing your layout without CSS hacks

Quite often when designing you’ll require a series of boxes of equal height, usually arranged in a row; but with variable amounts of content, getting CSS to play nicely and give them all the same height can require quite a bit of hackage or advanced CSS properties that a certain popular browser doesn’t grok.

Personally, I don’t think resorting to minor bouts of divitis is worth it when a simple script can deliver the same thing to almost all users – so here’s a little bit of functionality I developed on a couple of recent projects to do just that.

Extensibility

One key requirement was that the script was extensible – I didn’t want to have to be editing it each time I needed to use it – so the function takes a list of element ids as its arguments, checks that they all exist, and expands their heights to match the tallest.

1. var BoxHeights = {
2. maxh: 0,
3. boxes: Array(),
4. num: 0,
5. equalise: function() {
6. this.num = arguments.length;
7. for (var i=0;i<this.num;i++) if (!$(arguments[i])) return;
8. this.boxes = arguments;
9. this.maxheight();
10. for (var i=0;i<this.num;i++) $(arguments[i]).style.height = this.maxh+"px";
11. },
12. maxheight: function() {
13. var heights = new Array();
14. for (var i=0;i<this.num;i++) {
15. if (navigator.userAgent.toLowerCase().indexOf('opera') == -1) {
16. heights.push($(this.boxes[i]).scrollHeight);
17. } else {
18. heights.push($(this.boxes[i]).offsetHeight);
19. }
20. }
21. heights.sort(this.sortNumeric);
22. this.maxh = heights[this.num-1];
23. },
24. sortNumeric: function(f,s) {
25. return f-s;
26. }
27. }
28. Download this code: /code/boxheights.txt

Then to fix the box heights we call the equalise method, passing it a list of element ids:

1. window.onload = function() {
2. BoxHeights.equalise('one','two','three','four');
3. }
4.  

Here’s a very simple demonstration.

Improving the effect

You may have noticed in the example above that there is a brief flicker between the page loading and the script running. Luckily, there is a solution – Dean Edwards solved the window.onload problem a few months ago – which means our equal height columns can slot neatly into our layout without any flicker at all.

Users with no Javascript support get boxes of uneven height, but it’s hardly as if that is a usability or accessibility problem; and the underlying HTML and CSS is easier to maintain than if you had used a complicated pure CSS solution.

Filed under: DOM, Javascript.

Digg this article

Bookmark this article with del.icio.us

Previously: Roundup

Next: Stripe your tables the OO way

Comments

All content © 2007 The Watchmaker Project unless otherwise indicated. Comments are the property of their individual authors.

Hosted by MediaTemple. Powered by Textpattern (although soon to be ExpressionEngine - sorry TxP!). Valid XHTML and CSS (probably).

Technorati Profile