jQuery – adjusting div heights on window resize

Posted: February 7, 2009 in internet, Web
Tags: , , , ,

I am working on a recode for a government agency website at the moment, their existing site essentially uses tables (SHAME!) to handle layout.  One benefit of working with tables is of course the ease with which multi-column layouts can be achieved and no need for trickery that we resort to with CSS layouts.  So, in my efforts to recode their site for CSS layout I’ve had to come up with some workarounds.  Typically I would have used faux columns developed years ago, that generally work really well, but this time I decided I wanted to employ jQuery to assist.

I chose to use jQuery to assist me with many things, but most importantly setting the heights of two containing divs that are floated next to one another, with the first also containing two floated divs inside which when the layout becomes too narrow the second falls below the first.

News col 1 News col 2
Features

Because their site has the news columns with one b/g colour, and features with a second b/g colour I at first tried using teh jQuery equalHeights plug-in.  This worked okay, but added annoying scrollbars.  So I used their code as the basis for just doing it manually.

function adjustHeights() {
hNews = $(‘#news’).height(); // Get height
hFeatures = $(‘#features’).height(); // Get height
mHeight = hNews > hFeatures ? hNews : hForestry;  // Set mHeight to the larger of the two heights
$(‘#news, #features’).height(mHeight);  // Set both to equal heights
}

This worked okay.  The problem I was now faced with, and a likely one, is that if someone resized their browser the columns didn’t adjust.  So to capture the resize event and readjust sizes I used the following code:

$(window).resize(function() {
$(‘#news, #features’).css(“height”,”auto”);  // Eliminate the heights value
adjustHeights();  // Set the heights once more
});

So far I’ve tested this in IE6, FF3.06 and Safari 3.21 and it’s working across each.  Safari seems to do a better job too, as I’m dragging the browsers width it’s applying the fixes.

Hope this helps anyone else attempting the same!

About these ads
Comments
  1. g04uld says:

    IE8 Release Candidate 1 has a bug on window resize that it enters a permanent loop, which affects the script above. The IE team has stated it’s a known bug that will be finished with the final release. One step forward…hmm

  2. [...] jQuery – adjusting div heights on window resize [...]

  3. David Mark says:

    You want a break? Stop trying to use script for layout. (!) More to the point, stop trying to use jQuery. If the authors don’t understand it, how can you hope to maintain a working site?

  4. g04uld says:

    Thanks for your comments David. I have to disagree with you though. I was faced with either:

    a) Using something like faux columns -> requiring additional html; or
    b) Using css tables and then providing IE specific stylesheet to handle their lack of support for this method;
    c) Using scripting with a view that once IE6 and IE7 are erased from our landscape that the script be removed and go to option b).

    If option c) isn’t for you, go the alternates. I chose the use this method as I was going to be using dynamic width columns for which faux columns wasn’t really an option (as they rely upon a background image). Given the number of hits I’ve already had on this post (over 460 when I last checked), it would seem that others are also looking for additional options with regards flexible column layouts.

    If you don’t understand jQuery then I suggest you invest some time, it really is a fantastic javascript library that I find saves me oodles of time.

  5. g04uld says:

    Another posting on this topic (excluding browser resize support): http://www.impressivewebs.com/equal-height-columns-with-javascript-full-version/

    • Mike says:

      I am currently working on a multipurpose layout for Drupal and needed a JavaScript fallback while creating fluid layouts, this totally helped. It’s also interesting to see some of the stronger responses against using JavaScript and more curiously Jquery. For these types of layouts JavaScript really is the only practical solution that degrades gracefully and offers the ability to position background images more effectively. And to suggest not using Jquery for fear of difficulty in site maintainability is crazy. If you already know JavaScript you can pick up the basics of Jquery in 20 minutes and most likely never want to go back to straight JavaScript! Anyway, thanks for a great and simple script.

  6. john says:

    Day Saver… thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s