人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: meichi
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

質問者から

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


1 ● holoholobird
●250ポイント

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>

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


meichiさんのコメント
おはようございます。 大変、感謝しています。 ご回答ありがとうございます。m(_ _)m これから、外出先で ちょっとやってみます。 また、結果を お伝えできればと思います。 ありがとうございます。

meichiさんのコメント
おつかれ様です。 いま自宅に帰ってきました。 本当に すみませんが、Firefoxでは 問題なく 動いたのですが・・・ IE9では、リンク部分の スクロールバーが 途中できれてしまいます。 よろしくお願いします。

holoholobirdさんのコメント
困りました…… 私の環境では、 http://jsfiddle.net/a_kuma3/MbDTy/4/light/ で上記のコードを実行してみても、firefox20、IE9共に同様の結果が表示されます。 >リンク部分の スクロールバーが 途中できれてしまいます。 という点について、もう少し詳しくお聞かせいただけますか?

meichiさんのコメント
大変 お世話になります。 まとも に コピペもできないなんて・・・m(_ _)m 私の性格でゼロに近い知識で目標が高すぎるから、こんなことに なるんですよね。。。。 でも、もう 関係者に 見せてしまってるので・・・すいません。 なんとか下記に アップさせました。 お願いできますでしょうか。。。 http://meichi.digi2.jp/ よろしくお願いします。m(_ _)m

2 ● だわかき
●30ポイント

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

以下のようにします。

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

meichiさんのコメント
ご回答ありがとう ございます。 どちらの 回答で いけるか わかりませんが ちょっと やってみます。 ありがとう ございます。m(_ _)m

質問者から

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


3 ● a-kuma3
●500ポイント ベストアンサー

こちらは、リンクを増やしただけのサンプルです。
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() );

meichiさんのコメント
大変 ありがとう ございます。 私、とても むちゃな 相談を していのでしょうか・・・・ サンプルを 確認させていただきました。 本当に すいませんが リンクの部分のスクロールバーが ない のは わかるのですが 今度は 左のリンクをつつた 右側が・・・ うまく 説明 できないのですが リンクを つついた あと 右側が 下に 空白が できているのですが http://jsfiddle.net/a_kuma3/MbDTy/4/embedded/result/ ↑のサンプルと 右側の表示を くらべて いただければ イメージは 伝わりますでしょうか。 どうしたら、いいんでしょうか・・・・ よろしくお願いします。 m(_ _)m m(__ _)m 注文が おおくて すいません。

a-kuma3さんのコメント
>> 今度は 左のリンクをつつた 右側が・・・ << ああ、Firefox だと右側一杯に表示されるのが、 IE だと、縦方向に詰まって表示されて、下に空白ができる、ってことですね。 ちょっと、考えてみます。

meichiさんのコメント
本当に すいません、 いま ああ、Firefox だと右側一杯に表示されるのが、 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ↑を 確認しました。 たしかに そうですね。 どうか よろしく お願いします。m(_ _)m・・・

a-kuma3さんのコメント
回答に追記しました。 確認してみてください。

meichiさんのコメント
おはよう ございます。 本当にありがとうございます m(_ _)m いま、IEとFirefoxで確認しました。無理難題 本当に 申し訳ないです。 さすが と いうか すばらしい と いうか 本当に感謝しています。 あとは、私が コピペで間違えなければOKなのですが・・・・ 今日の 夕方 または 夜 作業(ではないか コピペ)できそうです・・・・ いまの私の体調で このまま コピペしたら また 失敗して 皆様に 迷惑 かけそうです。。。。。 皆様へのポイント配分は ちょっと 考えさせて ください (けっして 解決した方に500pt お支払い しない と いうことではないです) コピペが すんで 確認できましたら、また コメント等に記載させて いただきます。 ポイントを きちんとお支払いすれば いいと いうわけでは ないと 自分でも じゅうじゅう 承知しています。 まったく 自分が努力しなかったというわけでは ないですが・・・・ 自分が 以前 HPを つくっていた ころと 変わりすぎて・・・・m(_ _)m よろしく お願いします。 皆様には 大変 感謝しています。。。

a-kuma3さんのコメント
恐縮しすぎです (^^; ここは、質問者が(規約に反しない範囲で)好きに質問する。 回答者は、答えたかったら回答をする。 そういうところですから。 >> (けっして 解決した方に500pt お支払い しない と いうことではないです) << こんなにいらないですよ。 元の 200pt を適当に配分すれば良いんじゃないですか。 どっちにしろ、ご自分の良いように、ゆっくりやってください。

meichiさんのコメント
おつかれさま です。 コピペ おわりました。 無事 確認できました。 ありがとうございました。m(_ _)m これで、質問 を おわります。

1-5件表示/6件
4.前の5件|次5件6.
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ