jQueryで複数のdivタグの高さを揃える方法

　最近ブログのテンプレートをtwitter風にしようとアレコレ頑張ってます。
そしてjQueryも導入してみたんですけど、いいですねコレ。ｫｵｰ!!(ﾟдﾟ屮)屮
javascriptの文法が初めからコレだったらいろいろ歴史変ってましたよきっと。

さてjQueryのおかげで記事とサイドバーの高さを揃えたり、リンクリストを開閉できるようになりました。( ﾟДﾟﾉﾉ"☆ﾊﾟﾁﾊﾟﾁﾊﾟﾁﾊﾟﾁ　しかしそこで問題発生。リンクリストが長すぎて、開くとサイドバーを突き抜けてしまいました。(ﾉ∀`)ｱﾁｬｰ

　記事とサイドバーの高さを揃えるスクリプトは検索してその辺から拾ってきたものを使用していたのですけど、そのスクリプトはサイドバーが長くなっても高さを再調整してくれなかったのです。(´・ω・｀)ｼｮﾎﾞｰﾝ

だから作りましたよ、自分で。(σ・∀・)σｺﾚﾀﾞ!!

jQuery.fn.uniHeight= function(offset) {
if( offset == undefined) { offset = 0; }

var maxHeight = 0;

$(this).each(function(){
   var height = offset;
   $(this).children().each(function(){
       height += $(this).height();
   });
   if( height > maxHeight ) { maxHeight = height; }
});

return $(this).css('height', maxHeight + 'px');
};

　何が違うのかというと、高さを揃えたい要素の子要素を調べて高さの合計値を使用しているところ。　これでリンクリストを開閉したときの高さの変化を外側のdivタグの高さに反映できます。


　作成したuniHeight()の使い方はこちら。(σ・∀・)σｺﾚﾀﾞ!!
idが#main-wrapperと#sidebar-wrapperのdivタグを揃えます。

$(document).ready(function() {
$('#sidebar .Label > h2').click(function(){
   $(this).next().slideToggle('fast', function(){
       $('#main-wrapper, #sidebar-wrapper').uniHeight(24);
   });
   $(this).toggleClass('toggle-up');
   $(this).toggleClass('toggle-down');
});
$('#sidebar .Label > h2').next().hide();
$('#sidebar .Label > h2').addClass('toggle-down');

$('#main-wrapper, #sidebar-wrapper').uniHeight(24);
});

$(window).load(function() {
$('#main-wrapper, #sidebar-wrapper').uniHeight(24);
});

$(document).ready()でまず1回、画像が表示された後に高さがズレる場合があったので$(window).load()でもう1回、uniHeight()を呼んでいます。

そして大事なのがリンクリストを開閉するslideToggle()のcallback関数でuniHeight()を呼ぶこと。　これでサイドバーの長さが変ったときに記事側の長さも調整されるようになります。


　ついでにjQueryを使えるようにするためのコード。ｃ⌒っﾟдﾟ)っφ　ﾒﾓﾒﾓ...
Google AJAX Libraries APIはみんなで同じjsファイル使えばキャッシュの利用が促進されて素敵じゃん的な思想で用意されているらしい。Googleはやることがいちいちクールすぎる。(　ﾟдﾟ)ﾎﾟｶｰﾝ

<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>

本屋でチェックした中では派手なことをやるためのサンプルコードが見つけやすそうでした。　あと2009年発行で新しかったから。

Bloggerコミュ(σ･∀･)σ