スペースを有効利用するために、項目をクリックすると、項目の囲いがスライドされ、overflow: hidden な部分が表示される効果を考えています。
現在暫定的に、画面を見ながら拡大される量を調節していますが、以下のようなことはできないでしょうか。
<div id="div" style="width:50px; height:1em; overflow:hidden;">
項目1<br />
<p>なんちゃらかんちゃら、いろいろかいてあります。<br />
例えば途中で<img src="img/img.jpg" />とかもあったりします。＝中略＝</p>
</div>
例えば overflow の値として、overflow していたら、true、 していなかったら false、 のように返ってきて、jQuery の animate の効果のように、false になるまで、項目の囲いが伸び続ける、というもの。
表示がテキストだけのものは、文字数をカウントしたり、<br />を数えたりして、おおまかな height を割り出して animate させていますが、もっと共通化できればと考えています。
No.1
203
20
100pt
基本的にはheightにautoを実際に設定してみて値を採ってしまえばいいかと思います。
共通部品化みたいな事は全然してませんが、サンプルコードです。
29
29
<head>
<style type="text/css">
#div {
border:solid 1px red;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#div').click(function(){
var H1 = $(this).height();// 現在の高さ
$(this).css('height','auto');// 'auto'に仮設定
var H2 = $(this).height(); // 'auto'の場合の高さ
$(this).css('height',H1+'px'); // 現在の高さに戻す
// 高さの設定を何度もやってますが、流れの中での変更なので最後のアニメーション以外はレンダリングに影響しない（はず）
$(this).animate({height:H2});// アニメーション
})
});
</script>
</head>
<body>
<div id="div" style="width:50px; height:1em; overflow:hidden;">
項目1<br />
<p>なんちゃらかんちゃら、いろいろかいてあります。<br />
例えば途中で<img src="img/img.jpg" />とかもあったりします。＝中略＝</p>
</div>
</body>
Mars
2009/10/30 19:53:15
2
1
1
1
1
AKI-NAMI
早い回答ありがとうございます。
表示する中身が大きいと、読み込みが遅いと一瞬全体が表示されそうな気もしますが、いただいたサンプルではスムーズに動きました。
実際に値をとるというのは一番確実な方法ですよね。。。
すみませんが、もう少しすっきり感が欲しいので、他の方の回答を待ちたいと思います。