HTML テーブルの中の表示について ご教示ください。m(_ _)m


お世話になります。 つぎから つぎへと質問がつづきまして・・・・
以前の質問で ご教示いただいた http://jsfiddle.net/a_kuma3/MbDTy/3/embedded/result/
↑のサンプルページなのですが

左のリンクを例えば
(ですが・・数が極端に多くてすいませんが)30個とか40個とか つくると・・・・・
IE9、Firefox20.0.1 で確認したところ 左側でつくった
30個とか40個のリンクが ブラウザ上で すべて(縦に) 表示されず
きれて しまいます。

ブラウザ上で、右側のスクロールバーが表示されないのです。

お手数かけますが、よろしくお願いします。。。。。当方Windows7です。
自分でも、調べてみたのですが 解決できませんでした。m(_ _)m

・・・左側のリンクが この先 増えていったとき そのまま 増えるのか・・・
または 見せ方をかえるのか そこまでは 考えていませんが・・・
いまのところ、そのまま 増えていったとして とらえていただければ・・・・
ありがたいです・・・・
・・・・このままでは、増えていったら 左側のリンクが そのうち・・・
見えなくなってしまいます・・・・u-n

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/05/11 23:15:12
  • 終了:2013/05/13 20:45:07
id:meichi

すいません、サンプルページは
http://jsfiddle.net/a_kuma3/MbDTy/4/embedded/result/
でした。間違えました。m(_ _)m

ベストアンサー

id:a-kuma3 No.3

a-kuma3回答回数4443ベストアンサー獲得回数18252013/05/12 22:21:14

ポイント500pt

こちらは、リンクを増やしただけのサンプルです。
http://fiddle.jshell.net/a_kuma3/MbDTy/6/show/light/
右側のスクロールバーは、表示されていますか?
表示されていませんよね、きっと。

こちらはどうですか?
http://fiddle.jshell.net/a_kuma3/MbDTy/8/show/light/
ちょっとだけ変えてみたのですが、スクロールバーは表示されてますか?

変えたのは、クローバーの画像を表示するときに仕込んだ javascript を以下のように変更してます。

// ★ position: fixed を外してみました            
//          $('body')
//              .wrapInner('<div id="cube-area" style="position:fixed;z-index:5"></div>');
            $('body')
                .wrapInner('<div id="cube-area" style="z-index:5"></div>');

No.1 の回答にあった変更を元に戻したうえで、上記の変更を試してみてください。


No.1 の回答で、IE9 の場合にスクロールバーが切れてしまうのは、もともと TABLE の高さを固定で持っていることが原因ではないかと思います。
IE9 だと表示しているツールバーなどが Firefox と違ってて、BODY が表示される領域が狭くなっているのではないでしょうか?



追記です。


ブラウザの挙動の違いだということまでは分かったのですが、そこから先がよく分からなかったので、力技です ><。
http://fiddle.jshell.net/a_kuma3/MbDTy/9/show/light/

以前のサンプルでは、フレームの高さは CSS で指定してたのですが、javascript で設定するように変えてみました。
変更部分の抜粋です。
★を二つ付けたコメントの辺りが追加、変更した部分です。

<script>
$(function() {
    $(".anchor").click(function() {
        if ($(".display").length == 0) {
            var s = "<iframe name='display' class='display'></iframe>";
            s = "<iframe name='display' class='display' width='100%' height='100%'></iframe>";
            $("#area").html(s);
            // ★★フレームの高さを、強制的に設定してしまう
            $(".display").height( $("#area").height() );
        }
    });
});
</script>
<style>
#area {
    width: 90%;
    /* ★★高さの設定を止める
    height: 85%;
    */
    border: 1px solid red;
}
.display {
    width: 100%;
    /* ★★高さの設定を止める
    height: 100%;
    */
    border: 0;
    border: 1px solid green;
}
</style>

<body>
<!-- ★★高さの設定を止める
<table cellspacing="0" height="499" border="1" cellpadding="0"
-->
<table cellspacing="0" border="1" cellpadding="0"
width="857">

javascript の以下の部分を追加するだけで良いのですが、意味が無くなった高さの指定も外してみました。

            // ★★フレームの高さを、強制的に設定してしまう
            $(".display").height( $("#area").height() );
他5件のコメントを見る
id:a-kuma3

恐縮しすぎです (^^;

ここは、質問者が(規約に反しない範囲で)好きに質問する。
回答者は、答えたかったら回答をする。
そういうところですから。

(けっして 解決した方に500pt お支払い しない と いうことではないです)

こんなにいらないですよ。
元の 200pt を適当に配分すれば良いんじゃないですか。

どっちにしろ、ご自分の良いように、ゆっくりやってください。

2013/05/13 13:36:49
id:meichi

おつかれさま です。 コピペ おわりました。

無事 確認できました。

ありがとうございました。m(_ _)m

これで、質問 を おわります。

2013/05/13 20:43:39

その他の回答(2件)

id:holoholobird No.1

holoholobird回答回数574ベストアンサー獲得回数1042013/05/11 23:44:03

ポイント250pt

htmlを次のように書き換えてみてください。

<title>あいうえお</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
    // ★セレクタを id 指定から、class 指定に変えます
    $(".anchor").click(function() {
        // ★フレームの存在チェックをし、無かった場合だけフレームを作るようにします
        if ($(".display").length == 0) {
            var s = "<iframe name='display' class='display'></iframe>";
            $("#area").html(s);
        }
    });
});
</script>
<style>
#area {
    width: 90%;
    height: 85%;
}
.display {
    width: 100%;
    height: 100%;
    border: 0;
}
</style>
<body>
<table cellspacing="0" height="499" border="1" cellpadding="0"
width="857">
<tbody>
<tr>
<td colspan="2" rowspan="1" bgcolor="#ffffff" valign="top">カキクケコ<br>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top">
<div style="height:479px; overflow: scroll;">
    <!-- ★id 属性を class 属性に変えました --><a href="http://www.yahoo.co.jp/" target="display" class="anchor">ABC</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br>
</div>
</td>
<td bgcolor="#ffffff" valign="top" id="area">ふだんはこのテーブルの中はこの文字で<br>
左側のテーブルの中のABCのリンクを<br>
クリックしたらこの右下のテーブル(このテーブル)の<br>
中だけにABCのリンクの中を<br>
新しいHTMLで表示したい<br>
</td>
</tr>
</tbody>
</table>
</body>

これで、たぶん行けると思います。

他2件のコメントを見る
id:holoholobird

困りました……
私の環境では、
http://jsfiddle.net/a_kuma3/MbDTy/4/light/
で上記のコードを実行してみても、firefox20、IE9共に同様の結果が表示されます。

>リンク部分の スクロールバーが 途中できれてしまいます。
という点について、もう少し詳しくお聞かせいただけますか?

2013/05/12 20:49:18
id:meichi

大変 お世話になります。 まとも に コピペもできないなんて・・・m(_ _)m

私の性格でゼロに近い知識で目標が高すぎるから、こんなことに
なるんですよね。。。。 

でも、もう 関係者に 見せてしまってるので・・・すいません。

なんとか下記に アップさせました。 お願いできますでしょうか。。。

http://meichi.digi2.jp/

よろしくお願いします。m(_ _)m

2013/05/12 21:48:30
id:dawakaki No.2

だわかき回答回数797ベストアンサー獲得回数1222013/05/12 00:09:52

ポイント30pt

142行目のheightを消してみてください。

以下のようにします。

<table cellspacing="0" border="1" cellpadding="0"
width="857">
id:meichi

ご回答ありがとう ございます。

どちらの 回答で いけるか わかりませんが ちょっと
やってみます。

ありがとう ございます。m(_ _)m

2013/05/12 08:24:51
id:meichi

まことに お世話になりますが、この質問が解決した方には
500ポイント お支払い させて いただければ と 思います。m(_ _)m
よろしくお願いします。

id:a-kuma3 No.3

a-kuma3回答回数4443ベストアンサー獲得回数18252013/05/12 22:21:14ここでベストアンサー

ポイント500pt

こちらは、リンクを増やしただけのサンプルです。
http://fiddle.jshell.net/a_kuma3/MbDTy/6/show/light/
右側のスクロールバーは、表示されていますか?
表示されていませんよね、きっと。

こちらはどうですか?
http://fiddle.jshell.net/a_kuma3/MbDTy/8/show/light/
ちょっとだけ変えてみたのですが、スクロールバーは表示されてますか?

変えたのは、クローバーの画像を表示するときに仕込んだ javascript を以下のように変更してます。

// ★ position: fixed を外してみました            
//          $('body')
//              .wrapInner('<div id="cube-area" style="position:fixed;z-index:5"></div>');
            $('body')
                .wrapInner('<div id="cube-area" style="z-index:5"></div>');

No.1 の回答にあった変更を元に戻したうえで、上記の変更を試してみてください。


No.1 の回答で、IE9 の場合にスクロールバーが切れてしまうのは、もともと TABLE の高さを固定で持っていることが原因ではないかと思います。
IE9 だと表示しているツールバーなどが Firefox と違ってて、BODY が表示される領域が狭くなっているのではないでしょうか?



追記です。


ブラウザの挙動の違いだということまでは分かったのですが、そこから先がよく分からなかったので、力技です ><。
http://fiddle.jshell.net/a_kuma3/MbDTy/9/show/light/

以前のサンプルでは、フレームの高さは CSS で指定してたのですが、javascript で設定するように変えてみました。
変更部分の抜粋です。
★を二つ付けたコメントの辺りが追加、変更した部分です。

<script>
$(function() {
    $(".anchor").click(function() {
        if ($(".display").length == 0) {
            var s = "<iframe name='display' class='display'></iframe>";
            s = "<iframe name='display' class='display' width='100%' height='100%'></iframe>";
            $("#area").html(s);
            // ★★フレームの高さを、強制的に設定してしまう
            $(".display").height( $("#area").height() );
        }
    });
});
</script>
<style>
#area {
    width: 90%;
    /* ★★高さの設定を止める
    height: 85%;
    */
    border: 1px solid red;
}
.display {
    width: 100%;
    /* ★★高さの設定を止める
    height: 100%;
    */
    border: 0;
    border: 1px solid green;
}
</style>

<body>
<!-- ★★高さの設定を止める
<table cellspacing="0" height="499" border="1" cellpadding="0"
-->
<table cellspacing="0" border="1" cellpadding="0"
width="857">

javascript の以下の部分を追加するだけで良いのですが、意味が無くなった高さの指定も外してみました。

            // ★★フレームの高さを、強制的に設定してしまう
            $(".display").height( $("#area").height() );
他5件のコメントを見る
id:a-kuma3

恐縮しすぎです (^^;

ここは、質問者が(規約に反しない範囲で)好きに質問する。
回答者は、答えたかったら回答をする。
そういうところですから。

(けっして 解決した方に500pt お支払い しない と いうことではないです)

こんなにいらないですよ。
元の 200pt を適当に配分すれば良いんじゃないですか。

どっちにしろ、ご自分の良いように、ゆっくりやってください。

2013/05/13 13:36:49
id:meichi

おつかれさま です。 コピペ おわりました。

無事 確認できました。

ありがとうございました。m(_ _)m

これで、質問 を おわります。

2013/05/13 20:43:39
id:meichi

お世話に なります。m(_ _)m

なんとか、皆様の おかげ で いちおう ホームページを
アップしました。 下記です。

http://kago-shintaisou.digi2.jp/

これから、1年は わたしが 運営 して いきます。

本当に ありがとう ございます。m(_ _)m
わたしでも 勉強しながら または hatena の 皆様の
ご教示を いただきながら がんばっていきます。

なにか お気づきの 点 が ありましたら、
教えていただけますでしょうか。

わたしでも 一応 動作確認は しました。

本当に ありがとう ございます。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません