サイドメニュー折りたたみ状態保持スクリプト
Tag:[]
2004.12.06 追記
サイドメニュー折りたたみのエントリーを書き直しましたので
を参照ください。
このblogではサイドバーメニューの折りたたみ機能を利用させて頂いてますが、折りたたみ状態を変更した後で他のページに移動して戻ってきたり、新たにブラウザを起動するとblog管理者(つまり私)が予め設定しているデフォルトの折りたたみ状態に戻ってしまいます。このようにせっかくカスタマイズした折りたたみ状態が一瞬にして水の泡となってしまうのは何となく不便に感じていました。
そういう訳で折りたたみ状態を保持できるようにスクリプトを改造してみました。これにより折りたたみ状態をカスタマイズした訪問者はページを移動しても、別の日にブラウザを起動した時でも、常に直前に行った折りたたみ状態でblogを閲覧することができます。つまりblog管理者が設定したデフォルトの折りたたみ状態に縛られる必要がなくなる訳です。
具体的にどのような動作になるかは、このサイトでメニューの折りたたみ状態を変更して更新ボタンをクリックするか、他のページへ移動して戻ってきてみられるとお分かり頂けると思います(動作の都合上一瞬デフォルト状態になります)。
この機能を有効にするためにはブラウザのcookieが有効になっていること、折りたたみスクリプトは当方が利用させて頂いているJUGEMカスタマイズ講座:ナビゲーションの折り畳みを使われていることが前提です。
2004.09.20追記
この機能はcookieを利用しています。id属性名("?name"や"?list"を除いた文字列)がそのままcookie名となりますので他のcookie名と重複しないようなユニークな名称を使用してください。重複している場合、cookieを用いたスクリプトの動作に不具合が生じる場合があります。
またプレビュー画面では正常に動作していません(原因未確認です)。
動作確認済ブラウザはIE6.0およびNC7.1です。
2004.09.24追記
下記のサイトで公開中の折りたたみ用スクリプトに状態保持機能を採用くださいました。ありがとうございます。
以下、スクリプトの修正方法です。
1.cookie取得・設定用スクリプトの追加
メニュー毎の折りたたみ状態をcookieに保持およびcookieから読み出すスクリプトを<head>~</head>の間に追加します。ちなみにこのスクリプトはスタイルシート切り替えのstyleswitcher.jsのcookie用関数の一部を流用しておりますので、そちらを既に使われている方はこの項目をスキップしてください。
注:styleswitcher.jsを利用する場合、状態を保持したいテンプレートに全て指定されている必要があります。
<script type="text/javascript">
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
</script>
2.折りたたみ用スクリプトにcookie保持・読み出しスクリプト追加
折りたたみ用スクリプトを設定している各テンプレート(注:サイドバーメニューの折りたたみからの修正であればmenufolder.js)に下記の青色部分を追加します。
function FoldNavigation(idName,initMode,viewNum) {
:
if (!dispMode) {
var cookie_initMode = readCookie(idName);
if(cookie_initMode){
initMode = cookie_initMode;
}
createCookie(idName, initMode, 365);
var tmpText = Array('FoldNavigation(',"'",idName,"','chng','');return(false);").join('');
:
} else if (initMode == 'chng') {
:
objLists.style.display = (dispMode == 'none') ? 'block' : 'none';
if (dispMode == 'none') {
createCookie(idName, 'on', 365);
} else {
createCookie(idName, 'off', 365);
}
}
}
InitFoldNavi();
以上です。
メニューの折りたたみ状態をページ毎に制御したい場合(例えばメインページでたたんでいる「月別アーカイブ一覧」を月別アーカイブのページでは開いた状態にしたい等)は、id属性の名称をそれぞれ異なる名称で設定すればOKです。同じid属性名にしておけばページが変わっても同じ折りたたみ状態が引き継がれます。
2006.04.04 追記
リストから language 属性を削除しました(HTML4.01/XHTMLで非推奨あるいは廃止されているため)。
- ListfolderプラグインをMovable Typeに適用する
- サイドメニューの折りたたみ(Movable Type 4.x デフォルトテンプレート用)
- サイドメニューの折りたたみ(定義リスト編)
- サイドメニューの一部を折りたたむ
- サイドメニューの折りたたみマークに画像を使用する
- サイドメニューの折りたたみ(Movable Type デフォルトテンプレート用)
- サイドメニューの折りたたみ(v5.0:ゆっくり折りたたむ)
- サイドメニューの折りたたみに画像を使用する
- サイドメニューの折りたたみ(v4.0)
- menufolder.js 3.01 リリース
- Movable Type ユーザー・マニュアルをサイドメニューに追加
- サブカテゴリーリストの折りたたみ
- サイドメニュー折りたたみスクリプト(cookie等改善版)
- サイドメニューの折りたたみスクリプト改修中
- サイドメニュー折りたたみの動作遅延対処
≫ とうとうやりました! from life in my style diary
サイドメニューが長ったらしくなってきたので、どうにかして折りたたみたかったんです... [続きを読む]
≫ サイドバー折りたたみ from うだうだうだ
ちょっと、bloglistとかが長くなってきたので
サイドバー折りたたみ式にしま... [続きを読む]
≫ 3カラムにテンプレートを変更しました。 from blog・PC・HP奮闘記
念願の3カラムにテンプレートを変更しました。 ぐぐって見るといろいろなテンプレー... [続きを読む]
≫ メニウの折り畳みかつその状態を保持してみたり。 from かえいかえ。
引き続きメニウの折り畳みに挑戦してみまいた。
参考にしたのはこちら↓。
chocolat* BLOG
http://chocolatblog.bl... [続きを読む]
うわーい。
素晴らしいですねぇ。^^
私もスクリプト勉強しまーす、そのうち。
って、いつすんのかわからないですが。(苦笑)
どうもです。(^_^)/
といっても私は人様のスクリプトに手を入れる位のスキルしかございませんが…。
こんにちは、早速使ってみました
最初に折りたたみを導入する時
どうもうまく動かなくて・・
こちらのソース見てみたら
あ、なんか違うぞ・・と思ってました^^
こんにちはー。
ご利用ありがとうございます!
最近ミスを多発してしまっているのでうまく動いてホッとしてます。
こんばんわ、ユキです。
さっそく、スクリプトを拝見しにまいりました!
ただいま、今のデザインをちょこっと改良中です。
スクリプトを導入して、うまく動くといいんですが(笑)
こんばんは?。
お越しくださりありがとうございます。
うまく動作してくれることを願ってますが不具合ありましたらご連絡ください。
facet-diversへのコメント、ありがとうございました。(^^)
こちらに書き込もうと何度も思ったんですが、言いたいことが上手くまとめられなくて迷っているうちに先にお越しいただく形になってしまって恐縮です。
無断借用_(._.)_させていただいた2関数[createCookie(),readCookie()]については、一応、拙作「foldSidebar02c.js」内の関数定義直前に、
/*
functions createCookie() & readCookie() below are made by yujiro,
http://yujiro.dyndns.org/blog/koikikukan/archives/2004/09/13-235641.php
*/
と記させていただいていたんですがが、そんな程度でいいのかな?と悩んでました(悩んでないでさっさとこちらに聞きにくれば良かったです^^;)。
しかも、コメントをいただいた記事の中で「公開を控えた」とかノタマワッテましたが、あれじゃ公開したも同然でしたね。どうもすみません。
公開のご許可をいただき、遅ればせながら、ありがとうございました。何か問題がありましたら、お手数ですが、ご指摘ください。
ところで、余談ですが、この記事にある「プレビュー画面では正常に動作していません」というのは、「コメントの確認」画面でのことでしょうか。それなら、うちのFirefox0.9.1では問題なく状態保持されていますので、ご報告まで。
>facetさん
こちらへのコメントおよびスクリプトへの表示ありがとうございました。色々と注文つけるようなことになってしまってすいません。
なお該当記事にfacetさんのリンクを貼らせて頂きました。公開スクリプトに機能を盛り込んでくださり、こちらこそありがとうございます。
#プレビュー画面の問題は私の設定誤りでした。ご指摘ありがとございます。
MyBlogListにも登録させて頂きました。それでは今度ともよろしくお願い致します。
こんにちは?。なんだかcookieがおかしいみたいです、折りたたみ状態の保持が一部でできてません。なんだかんだ、サイドバーに詰め込みすぎちゃったかな。html的に下の方にいくほど、保持が鈍いような感じです。例えば トップページでカウンターのところを開いた状態にしておいて、日別アーカイブにとぶと、開いたままなので、おぉ??、状態保持できてる、って喜んで、トップページに戻ると、カウンターのところ、また勝手に閉じてます。状態保持が完全じゃないんです。MTにログインしてるのに、何度もログインしろと出るのとなにか関係があるのかな・・・とか思うんですけど。。。
>さえらさん
こんばんは。
ご質問の事象ですがcookieの利用に際しては仕様上の制限がございまして、一つのサーバが同じコンピュータに発行できるcookieは同時に20までです。状態保持スクリプトでは1タイトルにつき1つのcookieを利用しており、さえらさんのサイトはメニューが23ありますので動作保証されず、ご指摘の事象が発生するようです。
ちなみにサイトのメニューを半分に減らして実行したところ、状態は正常に保持されました。
どこまで正常に動作するかは未確認ですので実際にお試しになってください。
管理画面でログイン画面に戻るのは、どちらも同じサーバであり、さえらさんのブログサイトを参照している時にcookieを消費してしまうのでログインのcookie情報が消滅するためと思われます。
なおcookieを20以上使える(ように見せかける)技もあるようですが、現在のところは対応できておりません。
以上です。
それではよろしくお願い致します。
なるほどぉ、そうなんですか。よぉ???くわかりました。メチャメチャ納得しました。いくつかをまとめて一つのIDにして数を減らすなどして対処したいと思います。毎日あれこれ勉強になりますぅ、ありがとうございます。
>さえらさん
どういたしまして。
私も勉強になりました(ってどこかで書いたような…)。
毎晩あれこれとすみませんです。今、サイドバーをじぃ????っと見つめて考えてたんですけどぉ・・・どれとどれをくっつけようかな、とか。だけどやっぱりどれも一つずつ別々に開閉できたほうがいいし、せっかく載せたのを減らすのもイヤだし・・・あと、折りたたまないままの項目がいくつかあれば、20以内にできるのですが、スッキリ全部たためるようにしてたいんです。(わがまま。。。)ですので、一部で 折りたたみ状態の保持ができてないけど、初期状態ではほとんどが閉じたままの設定にしてますので、各[+]ボタンは 見たい人は押してくれるだろうし、特に用がなければ開かないだけのことだから、このままにしとこうかと思います。やむやむは11月1日からスタートしていて、12月になったら、カレンダーの月移動の状態保持が またできなくて困っちゃうかな、とか思ったんですけど、そのときまたどうするか考えます。自分の覚え書きという意味合いでも、ちょっとこの件を記事にしておきます。
>さえらさん
こんばんはー。
記事拝見させて頂きました。
そういえば月送りの状態保持もありましたね…。
cookieを20以上できる方法は(可能であれば)別途考えたいと思います。
期待せずにお待ちください。(笑)
こんばんは?。ありがとうございます。じゃあ ほんのり期待してます。(=ΦωΦ=)キラーン☆
Cookieの20個制限の回避方法ですが、開閉状態別にひとつずつのCookieを使うという方法はいかがでしょう?
一つのCookieにしたらscript自体が繁雑になってしまったので、なんとなくそんな気がします。
>さえらさん
その光った目が怖い…(冗談です)
>facetさん
ごぶさたしてますー。
なるほど、キーと値を逆にして(値は各メニューの名前が区切り文字でずらずらと並ぶ感じでしょうか)保存するということですね。
ナイスなアドバイス、ありがとうございます!
こんなところで何ですが、カウンタ表示もご利用ありがとうございます!
そうそう。そんな感じです。>キーと値を逆
ウチのは、半角縦棒でズ?ラズラずら。(byとのま)^^
カウンタのアイデア、どうもありがとうございました。
私の暫定公開版は、なんだか変な挙動もあるんですが、まあ、offsetで自由度が高いので適当に対処してね[ハート]という感じでしょうか(笑)
はじめまして。
サイドメニュー折りたたみにしたいと思っているので、ぜひ参考にさせていただきます。
私のほうで勝手にBlogPeopleに登録しにもかかわらず、相互リンクしていただいてありがとうございました。
>facetさん
こんばんはー。
区切り文字の件、了解しました。
私もカウンタのoffsetはプログラムの解説になってしまうのでお任せです(爆)。
>トレノさん
こんばんは。
はじめまして。
折りたたみの件、不明な点がございましたらご連絡ください(記事のコメント等を参照していただければ解消できるかもしれません)。
リンクの件、こちらこそありがとうございました!
では今後ともよろしくお願い致します。
こんばんは、はじめまして!
ありがたく使わせて頂いております!
他にもいろいろお勉強させて頂いております。ありがとうございます!
ところで、、、。
いきなり質問になってしまいますが、どなたか助言して頂けると幸いです。ド素人なりに考えてみたものの、不可能でした。
サブカテゴリー内のエントリーを、その上の階層のサブカテゴリー(もしくはトップカテゴリー)に包括することは可能でしょうか?例えば、、、
・トップカテゴリー (10)
・カテゴリーA (2)
・カテゴリーa (2)
・カテゴリーB (8)
・カテゴリーb (3)
・カテゴリーc (5)
このような感じにです。
このような質問をお許しください。
宜しくお願い致します。
>mheさん
はじめまして。
記事参照ありがとうございます!
MTが壊れてしまったようで…復旧作業お疲れさまです。
ご質問の件につきましては、確かにこれがあると便利なんですよね。
サブカテゴリー数を親カテゴリーに包括することは技術的に不可能ではないと思いますが、今のところ実現案が浮かんでまいりません。
ということで申し訳ありませんが、全く期待せずにお待ちください。
はじめまして。いつも参考にさせて頂いています。テンプレートも使用させて頂いておりましてお世話になりっぱなしです。
そこで唐突に質問で申し訳ありません。
言葉にするのがとても難しいのですが、カテゴリーのリンクがなにかおかしいのです。
リンク先が
ブログ/archives/_/_/index.php
となってしまうのです。当然カテゴリで分別しているエントリーには飛びません。全部こんなおかしな状態なら1からやりなおすのですが、きちっとリンクを示すカテゴリーもあるのです…。カテゴリーを削除して作り直してもダメでした。どこでどう質問していいか分からず場違い承知でご教授願いたく思いまして投稿しました。
申し訳ありません。よろしくお願い致します。
>部長さん
はじめまして。
テンプレートご利用ありがとうございます。
ご質問の件ですが、管理画面の「ウェブログの設定」クリック→次ページ右上の「アーカイブの設定」クリック→次ページのアーカイブ欄の「アーカイブの種類」が「個別」と表示された行の「テンプレート」欄には「個別エントリーアーカイブ(またはIndividual Entry Archive)」のひとつのみが表示されていますでしょうか?
もしその部分に「カテゴリー・アーカイブ(またはCategory Archive)」が存在している場合は、その「カテゴリー・アーカイブ」の右端にあるチェックボックスの「削除」をチェックして、下の削除ボタンをクリックして再構築してください(個別エントリーアーカイブは残しておいてください)。
設定状態が上記のようでない場合はお手数ですが再度ご連絡頂けますでしょうか。
以上です。
それではよろしくお願い致します。
お返事ありがとうございます!
確認してみたのですが「個別」の行には「個別エントリーアーカイブ」のひとつのみが表示されていました。
「日別」「週別」「月別」「カテゴリー」の行は削除しなくて良いのですね?
本当にお手数おかけします。よろしくお願いします。
>yujiroさん
お返事ありがとうごあいます?!
すばらしいレスポンスに驚いております。
そうですか、、、技術的には可能なのですね。yujiroさんに思い浮かばないモノが私に思い浮かぶはずもございませんが、お勉強してみます。それでは(心の中で期待しつつ)気長に待たせてもらいまーす。
これからもよろしくです!!
>yujiro様
昨日投稿致しました部長と申します。
質問の件ですが、解決致しました!
お手数をおかけして申し訳ありませんでした。
「アーカイブの設定」にて「カテゴリーのアーカイブファイルのテンプレート」欄に cat_<$MTCategoryID$>.php を記述すると何故か全てのカテゴリーのリンクがうまくいきました。
謎です。自分が無知なだけかも知れませんが…。
ありがとうございました。これからも楽しく拝見させて頂きます。
>mheさん
こんばんは。
いえいえ、こちらこそ。
プラグインがサクッと作れる人なら造作もないことなんでしょうけどね…。
>部長さん
こんばんは。
解決できたようで良かったです!(その部分の確認をさせて頂こうと思っていました)。
それで直ったのが私にもよく分かりませんが…。
また何かございましたらご連絡ください。
それでは今後ともどうぞよろしくお願い致します。
はじめまして。
こちらのスクリプトを利用させて頂き、折りたたみ状態保持をさせることができました。
ありがとうございます。
>かりんさん
はじめまして。
ご利用&ご連絡ありがとうございました。
うまくできたようでよかったです。
それでは今後ともどうぞよろしくお願い致します。