2007年09月05日 00:26
http://blog.hi-farm.net/tb.php?article_id=1188919489
http://blog.hi-farm.net/tb.php?article_id=1188919489
2007年03月04日 17:58
scriptaculousのslide
最近やっとこさAjaxへ手を出し始めました。
DHTMLの二の舞にならなければいいなあ、と思いつつ、SlideDownのエフェクトを使うのでした。
これを使って、長い文章を<p>なり<div>でブロックに分けて、
読みたい人はクリックすれば読める、というのを作ろうと思いました。
で、せっかくなので、SlideDown , SlideUpを利用する事にしました。
早速問題が起きたのですが、「初期値を隠したいのだが、どうすればよい？」
という事でした。
ヘッダーには
//
var state = true;
function execEffect(){
if(state){
new Effect.SlideDown($("read_more"));
state = false;
}
else if(!state){
new Effect.SlideUp($("read_more"));
state = true;
}
}
<body onload="javascript: execEffect();">
としていたのだが、これではページを開くと突然或る部分がスライドアップする。
これはつらい。下品。
じゃあデフォルトで見えなくして、さらにこのエフェクトと連携するには、どうすればいい？
と悩んでいたのですが、
結局は、 CSSのdisplay = none; をつかって見えなくしている様子。
なので、
<body onload="document.getElementById('read_more').style.display='none';">
としてやると、ページを開いたときには閉じた状態になっていました。
めでたしめでたし。
※javascriptは今まであんまりいじってなかったため、無駄なスクリプトがあるとは思いますが、ご容赦下さい。