jQueryとheightLine.jsが上手く動かない時の対処

※この記事は10年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

こんにちは、今の会社では、早く帰れてます、みやびプリンです。

今回は、jQueryとheightLine.jsが上手く整合できなかったので、
その対処方を備忘録も兼ねて。

まず、heightLineの紹介。
ブロックの高さを揃えるJavaScriptです。

●ブロックレベル要素の高さを揃えるheightLine.js
http://blog.webcreativepark.net/2007/07/26-010338.html

jQueryプラグインではないが、かなり使いやすい。
詳しくは、上記ページに書いていますが、クラスをつけるだけで、様々な揃え方ができる。
jQueryプラグインの中にも、ブロックの高さ系はあるが、僕はなぜかこっちを使ってしまう。

さて、本題。
このheightLineは、jsで動的に生成した要素に対しても有効で、
ブロックを追加したものに対してクラスを追加すれば、そのブロックの高さを揃えることができるの。
その仕組みとしては、heightLineの内部で、高さを揃える関数を一定時間で繰り返して実行しているというものだ。
（初期設定では1秒）

だが、こいつがたまに上手く動かないことがある。
たとえば、jQueryでタブ系のブロックをフェードインさせたりした時、
タブの内部でheightLineクラスを使用してたときなど・・・。
ページを更新しないと、高さがそろってくれないのだ。

おそらく、読み込みの関係なんだけど、読み込みを遅らせたり、
関数の実行タイミングを変えても、上手くいかなかった。

ではどうすればいいかというと、
タブを表示させた後に、強制的にheightLineの関数を実行させてしまえばいいのだ。

<script type=""text/javascript>

 changeBoxSize();

</script>

heightLine.jsの中身をみてみればわかると思うが、
"changeBoxSize();"の中で関数が展開されている。
そいつを、好きなタイミングで実行してしまえばいいのだ。

これに気付くのに、一日くらいかかった・・・。

でもいい勉強になりました。
相変わらず話長い・・・ｗ