お世話になります。 つぎから つぎへと質問がつづきまして・・・・
以前の質問で ご教示いただいた http://jsfiddle.net/a_kuma3/MbDTy/3/embedded/result/
↑のサンプルページなのですが
左のリンクを例えば
（ですが・・数が極端に多くてすいませんが）30個とか40個とか つくると・・・・・
IE9、Firefox20.0.1 で確認したところ 左側でつくった
30個とか40個のリンクが ブラウザ上で すべて（縦に） 表示されず
きれて しまいます。
ブラウザ上で、右側のスクロールバーが表示されないのです。
お手数かけますが、よろしくお願いします。。。。。当方Windows7です。
自分でも、調べてみたのですが 解決できませんでした。m(_ _)m
・・・左側のリンクが この先 増えていったとき そのまま 増えるのか・・・
または 見せ方をかえるのか そこまでは 考えていませんが・・・
いまのところ、そのまま 増えていったとして とらえていただければ・・・・
ありがたいです・・・・
・・・・このままでは、増えていったら 左側のリンクが そのうち・・・
見えなくなってしまいます・・・・u-n
No.3
4968
2151
500pt
こちらは、リンクを増やしただけのサンプルです。
http://fiddle.jshell.net/a_kuma3/MbDTy/6/show/light/
右側のスクロールバーは、表示されていますか？
表示されていませんよね、きっと。
こちらはどうですか？
http://fiddle.jshell.net/a_kuma3/MbDTy/8/show/light/
ちょっとだけ変えてみたのですが、スクロールバーは表示されてますか？
変えたのは、クローバーの画像を表示するときに仕込んだ javascript を以下のように変更してます。
305
278
// ★ 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 が表示される領域が狭くなっているのではないでしょうか？
<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() );
No.1
574104
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>
これで、たぶん行けると思います。
困りました……
私の環境では、
http://jsfiddle.net/a_kuma3/MbDTy/4/light/
で上記のコードを実行してみても、firefox20、IE9共に同様の結果が表示されます。
＞リンク部分の スクロールバーが 途中できれてしまいます。
という点について、もう少し詳しくお聞かせいただけますか？
大変 お世話になります。 まとも に コピペもできないなんて・・・m(_ _)m
私の性格でゼロに近い知識で目標が高すぎるから、こんなことに
なるんですよね。。。。
でも、もう 関係者に 見せてしまってるので・・・すいません。
なんとか下記に アップさせました。 お願いできますでしょうか。。。
http://meichi.digi2.jp/
よろしくお願いします。m(_ _)m
No.2
797122
30pt
142行目のheightを消してみてください。
以下のようにします。
<table cellspacing="0" border="1" cellpadding="0" width="857">
ご回答ありがとう ございます。
どちらの 回答で いけるか わかりませんが ちょっと
やってみます。
ありがとう ございます。m(_ _)m
No.3
49682151
ここでベストアンサー
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 が表示される領域が狭くなっているのではないでしょうか？
<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() );
恐縮しすぎです (^^;
ここは、質問者が（規約に反しない範囲で）好きに質問する。
回答者は、答えたかったら回答をする。
そういうところですから。
（けっして 解決した方に500pt お支払い しない と いうことではないです）
こんなにいらないですよ。
元の 200pt を適当に配分すれば良いんじゃないですか。
どっちにしろ、ご自分の良いように、ゆっくりやってください。
おつかれさま です。 コピペ おわりました。
無事 確認できました。
ありがとうございました。m(_ _)m
これで、質問 を おわります。
お世話に なります。m(_ _)m
なんとか、皆様の おかげ で いちおう ホームページを
アップしました。 下記です。
http://kago-shintaisou.digi2.jp/
これから、１年は わたしが 運営 して いきます。
本当に ありがとう ございます。m(_ _)m
わたしでも 勉強しながら または hatena の 皆様の
ご教示を いただきながら がんばっていきます。
なにか お気づきの 点 が ありましたら、
教えていただけますでしょうか。
わたしでも 一応 動作確認は しました。
本当に ありがとう ございます。
1
1
1
2
恐縮しすぎです (^^;
ここは、質問者が（規約に反しない範囲で）好きに質問する。
回答者は、答えたかったら回答をする。
そういうところですから。
こんなにいらないですよ。
2013/05/13 13:36:49元の 200pt を適当に配分すれば良いんじゃないですか。
どっちにしろ、ご自分の良いように、ゆっくりやってください。
おつかれさま です。 コピペ おわりました。
2013/05/13 20:43:39無事 確認できました。
ありがとうございました。m(_ _)m
これで、質問 を おわります。