タブでcookieを使ったのですが…

質問

Javascriptを使ってタブ付きのボックスを作ったのですが、少々問題があり解決法が見つからないのでここに投稿させていただきます。
カテゴリが[技術者向]となっていますが私は初心者です...。

まずタブで表示を切り替えるUIというのはたとえば以下のサイトにあるようなものですが、問題が起きるのは私が独学で作成したものです。
http://archiva.jp/test/html/tab-menu.html
また、以下のような機能があります。
・タブ以外の部分を非表示にできる（その状態をcookieで記憶しておく）
・表示しているタブをcookieで記憶しておく
・タブにマウスポインタを乗せるとタブの背景画像が変わる（ロールオーバー）
・表示しているタブの背景画像を変える
・ウィンドウの幅に合わせて自在にサイズを変化させる

cgiの掲示板にタブ切り替えを設置したのですが、cookieがうまく働いてくれないらしく表示/非表示の操作ができないことがあります...
その他にも、ブラウザによって（ウィンドウ幅を縮めると）タブメニューの中の文字がはみ出してしまったり、表示しているタブを記憶できないなどの問題が起きます。

以下のURLに全く同じタブ切り替えを設置しました。
http://www7a.biglobe.ne.jp/~g-s-b/tabs/tabs.html

なぜcgiに設置すると問題が起きるのか、全くわかりません...
ですが掲示板が複数のcgiで構成されており、タブを含む、css等の共通部分を別に読み込んでいるので、タブを閉じたままにするままにはクッキーを使う以外の方法を思いつきません。

このようなタブ切り替えを安定して、多くのブラウザで利用できるようにするにはどのようにすればよいでしょうか。
また、なぜcgiだと問題（cookieが保存されているのに動作しない等）が起きるのでしょうか。
長くなってしまいましたが、どなたかご回答をよろしくお願いいたします。

回答No.1

15mm · ベストアンサー

＞カテゴリが[技術者向]となっていますが私は初心者です...。
そんな心配をしていたら始まりませんよ（笑）

さて、cookieの件の動作確認はIE8で行いました。
cgiにすると、というのが確認できませんでしたが、サンプルのほうは動作しました。

まず確認してほしいことは、問題が発生したことを確認した状態でブラウザがスクリプトエラーを訴えていないか確認していただきたいです。
tabs.html最後のほう
4531(".tip2").each( function(link) {
new Tooltip(link, {backgroundColor: "#000", borderColor: "#fff", textColor: "#FFF"});
});
なんかは特に問題がありますね。
4531というのはNumberであってFunctionではありませんから関数展開しているのは・・・見ていて不思議です。
Tooltipというのも宣言されていませんし。（大文字小文字の区別はしっかり）

＞cookieがうまく働いてくれないらしく
cookieが保存されているか、読み出しは行えているかのチェックは行いましたか？
alert(unescape(document.cookie));
で期待通りの文字が入っているか、cgi側の出力で競合を起こしていないかも確認してください。

＞ブラウザによって
ブラウザごとに設定でcookieがオフになっていたり、javascriptがオフになっていたりというのは大丈夫ですよね？

＞タブメニューの中の文字がはみ出してしまったり
文字が収まるスペースが無いほど画面を縮小したのであれば仕方ありません。
ブラウザごとに表示崩れを起こすのは今後も覚悟しておいたほうがいいほど頻繁にあることですが、
「はみ出す」の程度によってはHTMLの文法的に間違っているとか、あなたのほうに原因があることもあります。
文法をチェックするツールはいろいろあるので、試してみてください。

＞なぜcgiだと問題
cgiのほうでもcookieをいじることができるから
cgiの設置が別ディレクトリで、*.jsファイルの読み込み指定を間違っている
とか、原因は断定できませんが、スプリプとエラーから直していくのがいいでしょう。

どうでもいいですが、ツールチップが画面外に表示されて、読めないから意味が無い、というのは・・・

お礼

ご回答ありがとうございます。
Tooltipのスクリプトですが、確かに数字というのはおかしいですよね...
Tooltipに関しては私が作ったものではないので、別のものに変更することにします。
どうやらcgiで動作しないのは、cgiがcookieを出力しているのが原因のようです。ブラウザの設定は全て確認しました。
まずはスクリプトエラーから修正したいと思います。

はみ出しを防ぐために、CSSで
td .class1 {overflow:hidden;}
というようにtdに対して指定したのですが、なぜかはみ出てしまいます。
tdの内容がはみ出すことを防ぐことは出来ないでしょうか...？