rico.jsによる「もっと読む」機能の実装
id:higepon:20050914:1126689576の続き。
Effect::Sizeを使う場合、隠れた部分の height が事前に分からないと厳しいと書いたところ。
http://synklab.net/blog/?itemid=74の中の人からトラックバックが来ました。
この問題を、非常にスマートに解決しています。
ポイントは
var entries = document.getElementsByClassName(className); for (var i = 0; i < entries.length; i++) { var e = entries[i]; showing[e.id] = false; saveHeight[e.id] = e.offsetHeight; e.style.visibility = 'visible'; e.style.overflow = 'hidden'; e.style.height = '1px'; }
のように、初期表示時に height を記録する部分です。(事前にもっと読む部分をスタイルシートで hidden にしておきます。)
あとは、height を Objectの連想配列を利用しているところがクールだと思いました。
ほとんどコピペですが、今回の肝となるコード(実際に動くもの)を上げておきます。
http://www.monaos.org/higepon/slide/slide.html
というわけで、はてなのサービスのどこかで使えると良いな。