サイドバーを折り畳みたい
またサイドバーネタです(^_^;)。前回、「折り返す」というのをやったんですが（今思えば「折り返し」ているわけじゃないですね。その時はその表現がぴったりしているような気がしてたんですが。）、やっぱり長いものは長い。ということで、今度はタイトル(h2)だけを残してリスト部分(ul)を折り畳んでしまおう、という企画です。（企画だったのか）
----
javascriptとDOMの勉強がてら、ちょっと作ってみました。が、Mozilla Firebirdでは動くんですが、IE5/6では動いてくれませんでした。できたら結構便利だと思うんですが、どうしてもできませんでした。何処が悪いんでしょう？？？(;_;) 誰か教えてくださーい。_(._.)_
マイリストのテキストメモに、これを仕込んでます。
<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldSidebarUl01a.js">
</script>
=== 追記 2004-01-24 :
肝心のscriptへのリンクを張るのを忘れてましたので、改めて。_(._.)_
http://facet.cocolog-nifty.com/divers/foldSidebarUl01a.js
=== 追記 ここまで
----
このスクリプトを作っていて何度もマイリストを書き換えたりしていたので、巡回ソフトを使っている人にご迷惑をお掛けしたようです。この場をかりて_(._.)_。 （ローカルでやればいいんですが、IE6が手元になくリモートデスクトップを利用して確認してたもので(^^ゞ。）
| 固定リンク
« 日記 | トップページ | 本文の見出しを抽出したい »
「ウェブログ・ココログ関連」カテゴリの記事
- [ココログ] 記事の公開日時変更をもっと簡単に!(2005.03.23)
- [ココログ] マイリストを消すJavaScript(2007.08.06)
- [ココログ] 「ウェブページ」のファイル名を index.html にしてみたら…(2008.09.04)
- コメント欄の設定を明示する(2004.11.29)
- とりあえずサイドバー折り畳み２(2004.03.14)
コメント
IE の場合は、head ～ /head の間に仕込まないと、うまく動かなかったような記憶があります。というか、Movable Type で運用している方の blog はそうやっています。
マイリスト埋め込みで対応する方法は、私も模索中なのですが、まだいい方法が見つかっていません。
投稿： tsupo | 2004-01-23 19:39
tsupoさん、どうも(^^)。
IEはheadに仕込まないとダメなんですか(;_;)。それは困ったなあ……。
ULを閉じたり開いたりする部分は、今、
oUl.setAttribute("style", "display:none;");
としているんですが、これを
oUl.style.display = "none";
としてみたら一応IEでも消えてくれました。が、逆に
oUl.style.display = "block";
が効かず、ULの展開ができないありさまでした。
# Firebirdでは、.style.でもOKでした。
# 消えて表示できないより最初から消えない方がましかなと思い、今はsetAttribute()を使ってます。
このあたりが、head内でないことから生じている結果ということなんでしょうか……。(;_;)
うーん。
投稿： facet | 2004-01-24 02:51
oUl.style.display = "block";
IE は block じゃなくて inline です。
投稿： tsupo | 2004-01-24 07:35
え？そうなんですか(@_@)。……そういえばどこかで「IEはブラウザでinline化している」とかなんとか読んだような気も……。
ということで、inlineを試してみましたが、やっぱりダメでした。noneは効いて折り畳んでくれるんですが開いてくれないという同じ症状でした。やっぱりhead内じゃないとダメなんですかね……。(;_;)
ところで、肝心のscriptを公開し忘れていることに気が付きました。_(._.)_
http://facet.cocolog-nifty.com/divers/foldSidebarUl01a.js
本文にもリンクを追加しておきました。
投稿： facet | 2004-01-24 11:53
IE は、そもそも function extend(oAnchor) を呼び出していない、もしくは
var idA = oAnchor.getAttribute("id");
var idUl = idA.replace("h2", "ul");
oUl = document.getElementById(idUl);
が期待通り動いていないみたいです。
Opera は、折りたたみ状態→開いた状態は OK でしたが、いったん開いてしまったあとは、そのままになってしまい、折りたためなくなってしまいました。function fold(oAnchor) を呼び出していないようです。
投稿： tsupo | 2004-01-26 10:39
本文抽出のスクリプト、無事に動いたようでなによりです。
ところで、こちらの方ですが、tsupoさんのご指摘のとおり、extend(this)が呼ばれていないようでした。(alertとかにして試しました)
これは、
oAnchor.setAttribute(onclick", extend(this);");や
oAnchor.setAttribute(onclick", fold(this);");をそれぞれ
oAnchor.onclick = function() { extend(this); };や
oAnchor.onclick = function() { fold(this); };のように変えるとうまくいきました。
setAttribute()でやる方法は引き続き探してみますが、とりあえずこの方法をお試しください。
投稿： 山けん | 2004-01-26 16:30
tsupoさん、山けんさん、コメントありがとうございました！ あの拙いプログラムを読んでいただけたようで恐縮です。
そうか。functionが呼ばれてないのが問題なんですね。
setAttributeには全くこだわっていないので、たくさんのブラウザで動いてくれるのならonclickで全く問題ありません。(というか、こういう方法は全く知りませんでした(^^)。）
ちょっと今晩あたり、やってみたいと思います_(._.)_。こちらもできるといいんですが…。
また、もし「既にこんなスクリプトがあるよー」という情報があれば是非知りたいなとも思っています。そういう意味でも、tsupoさんの記事はとても参考になりました。どうもありがとうございました。
http://watcher.moe-nifty.com/memo/2004/01/__4.html
また、本文抽出の方は、山けんさんのお蔭で無事、「これぐらいなら公開できるかな」と自分で納得できる程度のスクリプトにすることができ、本当に嬉しく思っています。やっぱり、恥ずかしさを堪えて見切り公開して良かったなあと思っています。こういうところがwebの良いところだなあと改めて。
投稿： facet | 2004-01-26 17:47