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ベストアンサー
- 回答日時:
>カテゴリが[技術者向]となっていますが私は初心者です...。
そんな心配をしていたら始まりませんよ(笑)
さて、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の内容がはみ出すことを防ぐことは出来ないでしょうか...?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- Chrome(クローム) youtubeのサムネイルを縦4列配列にしたい。 1 2023/03/09 22:35
- Android(アンドロイド) Android端末(arrows we FCG01)のタブの切り替え方について 2 2023/01/02 10:59
- タブレット huion kamvas 13 液タブの方にペイントソフトを表示出来ない。 1 2022/04/24 19:00
- Windows 10 パソコンの操作ができません。。。 4 2022/06/02 18:38
- その他(ソフトウェア) 時間差でのオートクリック 1 2023/04/12 12:04
- Chrome(クローム) Chromeが強制終了 1 2023/01/29 09:54
- Firefox(ファイヤーフォックス) Firefoxで設定を「前回のウィンドウとタブを開く」にしてるのにタブがなくなる 2 2022/09/28 18:23
- Chrome(クローム) Chromeで複数タブを開いた状態で閉じ、再度開いた場合のタブの回復は? 2 2022/04/02 01:44
- Word(ワード) Wordで作った「表の罫線を部分的に削除したい」 4 2023/07/24 07:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
新しいタブで開かせない方法は...
-
小窓について。
-
IE7でモーダル画面
-
プルダウンメニューの開く方向...
-
VC++2010 MFC サイズの最大化に...
-
指定URLを新しいウィンドウで開...
-
form の target(
-
POST先のURLアドレスに遷移した...
-
プルダウンメニューからリンク→...
-
ホームページビルダーでのドロ...
-
VBSでIEのウィンドウサイズを強...
-
XMLを作成してもタグしか表示さ...
-
テキストエリア内の改行禁止
-
Windowsのformでtextareaに入力...
-
デメタグとは?
-
GoogleChromeでレイアウトが左...
-
ブラウザでのタイ語の改行について
-
アコーディオン仕様の中の ul l...
-
C#のシリアル通信プログラムで...
-
リンク先のURLを非表示にし...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
指定URLを新しいウィンドウで開...
-
自分のサイトを開いた時にウィ...
-
プルダウンメニューの開く方向...
-
新しいタブで開かせない方法は...
-
ASP.Net 別ウィンドウを開く・...
-
DBからPDFを取得して別画面で表...
-
表示中のURLなどをバッチファイ...
-
HTML 全画面表示 リンク先の...
-
ポップアップメニューを同じ画...
-
プルダウンメニューからリンク→...
-
HTML,js)リンクを新しいタブで...
-
FindWindowの使い方
-
HP、リンク先を最大化で開く方...
-
ハイパーリンクからメニュー無...
-
googleマップをポップアップウ...
-
QT 半透明の画面生成について
-
別ウィンドウで複数ページを同...
-
OpenCVのcvNamedWindowによるウ...
-
インラインフレームの中の表示...
-
新規ウィンドウの表示位置を画...
おすすめ情報