2009年12月3日

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を使えるようにするためのコード。c⌒っ゚д゚)っφ メモメモ...
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年発行で新しかったから。

0 件のコメント:

コメントを投稿