- ベストアンサー
＜ｔｄ＞の中を移動する、外部JavaScript書き出しのdocument.write
- 現在、営業ツールサイトを制作しています。メニュー部分を外部JavaScriptで読み込んでおり、テーブル２列の左部分を上下に移動させたいです。
- フローターメニューの機能を使いたいと思っていますが、検索してもほとんどが低位置に留まるタイプのものです。
- 不勉強で検索能力も不足しており、どうすれば実現できるかわかりません。お助けいただけると助かります。
- pitchi3000
- お礼率100% (13/13)
- JavaScript
- 回答数6
- ありがとう数9
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
テーブル自体をスクロールしないで、メニュー、ツールのみをスクロールするように変更してみました。 No5の書き込みで書いたやつです。（ヘッダーとフッターはoverflowの指定はしていませんが・・・） ロード時にスクロールバーが必要かどうか判定を行っています。 短いバージョンのメニューと長いバージョンのメニューで試してみてください。 以下ソースです。 <HTML> <head> <script type="text/javascript"> //↓メニューおよび営業ツールのスクロールを表示するかどうか function ViewScroll() { MenuWidth = document.getElementById("menu").offsetWidth; MenuHeight = document.getElementById("menu").offsetHeight; MenuDivWidth = parseInt(document.getElementById("menuDIV").style.width); MenuDivHeight = parseInt(document.getElementById("menuDIV").style.height); ToolWidth = document.getElementById("tool").offsetWidth; ToolHeight = document.getElementById("tool").offsetHeight; ToolDivWidth = parseInt(document.getElementById("toolDIV").style.width); ToolDivHeight = parseInt(document.getElementById("toolDIV").style.height); //初期化（スクロールを隠す） if (document.all) { //IE document.getElementById("menuDIV").style.overflowX = "hidden"; document.getElementById("menuDIV").style.overflowY = "hidden"; document.getElementById("toolDIV").style.overflowX = "hidden"; document.getElementById("toolDIV").style.overflowY = "hidden"; } else { //IE以外 document.getElementById("menuDIV").style.overflow = "hidden"; document.getElementById("toolDIV").style.overflow = "hidden"; } if (MenuWidth > MenuDivWidth) { //メニューの幅が、メニューDIVの幅を超えたとき（スクロールを出す） if (document.all) { //IE document.getElementById("menuDIV").style.overflowX = "scroll"; } else { //IE以外 document.getElementById("menuDIV").style.overflow = "scroll"; } } if (MenuHeight > MenuDivHeight) { //メニューの高さが、メニューDIVの高さを超えたとき（スクロールを出す） if (document.all) { //IE document.getElementById("menuDIV").style.overflowY = "scroll"; } else { //IE以外 document.getElementById("menuDIV").style.overflow = "scroll"; } } if (ToolWidth > ToolDivWidth) { //ツールの幅が、ツールDIVの幅を超えたとき（スクロールを出す） if (document.all) { //IE document.getElementById("toolDIV").style.overflowX = "scroll"; } else { //IE以外 document.getElementById("toolDIV").style.overflow = "scroll"; } } if (ToolHeight > ToolDivHeight) { //ツールの高さが、ツールDIVの高さを超えたとき（スクロールを出す） if (document.all) { //IE document.getElementById("toolDIV").style.overflowY = "scroll"; } else { //IE以外 document.getElementById("toolDIV").style.overflow = "scroll"; } } } </script> </head> <!--ロード時にスクロールバーを表示するかどうかを決定--> <body onLoad="ViewScroll()"> <table width="750" border="1" cellspacing="0" cellpadding="0" align="center" bgcolor="#909090"> <tr> <td colspan="3" align="center" valign="top" bgcolor="00ff00"> ヘッダーをJavascriptで呼んできてます。 </td> </tr> <tr> <!--テーブルに高さをつけました。サイズは適当に変えてください--> <td align="left" valign="top" width="230" height="500"> <!--DIVに高さと幅ををつけました。サイズは適当に変えてください（メニューテーブルと同じサイズにしてください）--> <div id="menuDIV" style="top:0px; left:0px; width: 230px; height: 500px; position:relative; background-color: #ff0000; overflow: scroll;"> <!--スクロールバーを表示するかどうか判定するためにもうひとつDIVをはさみました--> <div id="menu"> メニューをJavascriptで呼んできてます。 どっこい多分ここで呼ぶmenu.jsのテーブルが長いのか、 スクロールするとなぜか底なし沼になります… </div> </div> </td> <td width="10"></td> <!--テーブルに高さをつけました。サイズは適当に変えてください。--> <td align="left" valign="top" width="505" height="500"> <!--DIVに高さと幅ををつけました。サイズは適当に変えてください（ツールテーブルと同じサイズにしてください）--> <div id="toolDIV" style="top:0px; left:0px; width: 505px; height: 500px; position:relative; background-color: #ffff00; overflow: scroll;"> <!--スクロールバーを表示するかどうか判定するためにもうひとつDIVをはさみました--> <div id="tool"> <!--↓のDIVは営業ツールの高さ10000ピクセルにするために名義的に入れているもので、削除してください--> <div style="height: 10000px">ここにローングな営業ツールが入ってます。</div> <!--↑のDIVは営業ツールの高さ10000ピクセルにするために名義的に入れているもので、削除してください--> </div> </div> </td> </tr> <tr> <td colspan="3" align="center" valign="top" bgcolor="#0000ff"> フッターをJavascriptで呼んできてます。 </td> </tr> </table> </body> </HTML>
その他の回答 (5)
- EUR
- ベストアンサー率61% (29/47)
フッターにかぶるの原因は、 (画面の高さ - フッターの高さ) < メニューDIVの高さ となってしまっているからですね。 テーブルを一番したまでスクロールした場合（フッターもすべて見えている状態）、メニューや営業ツールが表示される部分の高さがメニューのDIVの高さよりも小さいため、DIVがフッターに乗っかってしまっている状態です。 ちなみにフッターの高さは結構大きいですか？ 正確にいうとフッターの高さと、メニューDIVの高さを足した値が、画面の高さを越えますか？ 超える場合は、見栄えが悪くなりますけど、やはりoverflow: scroll;が必要になるかもしれません。 変更するないようとしては、 １．テーブルの高さを画面の高さにそろえる ２．ヘッダー、フッター、メニュー、営業ツールエリアに、テーブルのセルと同じ幅・高さのDIVを用意する ３．すべてのDIVにoverflow: scroll;を記述し、すべてをスクロールできるようにする。 となります。 さて、No4での質問の回答ですが、 >menu.jsを置く<td></td>の範囲（座標？？）を指定できたりするのでしょうか？ これは、function ChangeMenuHeight() で行っています。 画面の高さから、メニューバー等を考えて100を引いた値をDIVの高さに指定してます。 No3のソースではヘッダーやフッターの幅を考えていなかったため、フッターにかぶってしまいました。 今回示す例では、ヘッダーもしくはフッターの大きいほうを引いています。 引くにあたって、ヘッダー部、フッター部にIDを割り付けました。 ※ヘッダー、フッター、メニューのDIVに背景色をつけています。適当に削除してください。 以下例です。 <HTML> <head> <script type="text/javascript"> function MoveMenu() { if (document.all) { Move = document.body.scrollTop; } else { Move = this.window.pageYOffset; } //スクロール時にメニューのトップを変える document.getElementById("menu").style.top = Move; } //↓メニューの高さ変更を追加↓ function ChangeMenuHeight() { //メニューDIVの高さを決定します HEAD = document.getElementById("HEADER").offsetHeight; FOOT = document.getElementById("FOOTER").offsetHeight; if(document.all){ TBLHeight = document.body.clientHeight - 100; }else if(document.layers){ TBLHeight = window.innerHeight - 100; }else{ TBLHeight = 500; } //ヘッダーとフッターの大きいほうの高さを引く if (HEAD >= FOOT) { TBLHeight = TBLHeight - HEAD; } else { TBLHeight = TBLHeight - FOOT; } if (TBLHeight < 100) { TBLHeight = 100; } document.getElementById("menu").style.height = TBLHeight; } //↑メニューの高さ変更を追加↑ </script> </head> <!--ロード時と画面サイズ変更時にメニューの高さを変えるように変更--> <body onScroll="MoveMenu()" onLoad="ChangeMenuHeight()" onResize="ChangeMenuHeight()"> <table width="750" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <!--ヘッダーにIDをふりました--> <td id="HEADER" colspan="3" align="center" valign="top"> ヘッダーをJavascriptで呼んできてます。 </td> </tr> <tr> <td align="left" valign="top" width="230"> <!--相対位置でDIVを定義します--> <div id="menu" style="top:0px; left:0px; position:relative; background-color: #ff0000;"> メニューをJavascriptで呼んできてます。 どっこい多分ここで呼ぶmenu.jsのテーブルが長いのか、 スクロールするとなぜか底なし沼になります… </div> </td> <td width="10"></td> <td width="505" height="10000"> ここにローングな営業ツールが入ってます。 </td> </tr> <tr> <!--フッターにIDを振りました--> <td id="FOOTER" colspan="3" align="center" valign="top" bgcolor="#0000ff"> フッターをJavascriptで呼んできてます。 </td> </tr> </table> </body> </HTML>
お礼
EURさん！有難うございますっっ…TT > フッターにかぶるの原因は、 > (画面の高さ - フッターの高さ) < メニューDIVの高さ > となってしまっているからですね。 アー…です。ですです。なってます… > テーブルを一番したまでスクロールした場合（フッターもすべて見えている状態）、メニューや営業ツールが表示される部分の高さがメニューのDIVの高さよりも小さいため、DIVがフッターに乗っかってしまっている状態です。 アァーー…なるほど…納得です…。と、言いますかこうなったら 使い勝手云々以前の問題ですよね…。ゴホゴホ…。 > ちなみにフッターの高さは結構大きいですか？ > 正確にいうとフッターの高さと、メニューDIVの高さを足した値が、画面の高さを越えますか？ フッター自体は35pxくらいのしょぼくれたものなのですが menu.js自体のテーブルの長さは650pxほどあります…。 現状私のモニタだと問題なく見れるはずなのですが、 もっと小さい解像度のユーザの場合、満開で見えなくなりますよね… > 超える場合は、見栄えが悪くなりますけど、やはりoverflow: scroll;が必要になるかもしれません。 ふむむ…なるほど深く納得です。 > 今回示す例では、ヘッダーもしくはフッターの大きいほうを引いています。 > 引くにあたって、ヘッダー部、フッター部にIDを割り付けました。 > ※ヘッダー、フッター、メニューのDIVに背景色をつけています。適当に削除してください。 了解です！有難うございます！！と、勇んで組み込んでみたのですが どうゆうわけだか再び底抜けな状態に…うーむむ… メニューの長さを短くする工夫（ツリーにするとか…）考えてみます！ まずは有難うございます～～！！
- EUR
- ベストアンサー率61% (29/47)
すみません、実はNo3の回答を別の質問にミス投稿してしまいまして、そちらの方は説明をつけていたのですが、本当に投稿するはずだったこっちには説明を載せるのを忘れてしまってました。 No3の回答の説明は以下です。 ↓↓↓説明↓↓↓ メニューが長すぎて、1画面に入らない→スクロールしてもメニューは固定→メニューの下の方が見えない ってなっているんですね。 ちょっと不恰好ですが、No1で用いた方法で、メニュー自体にスクロールバーをつけて見ました。 メニューDIVの高さなんですが、 100～（ウィンドウの高さ－100） としています。 これは、ツールバーなどで、ウインドウの高さより実際の描画領域が狭くなるためです。 また、この機能はIEかNNしか受け付けないため、その他は500で固定にしています。 ↑↑↑説明↑↑↑ 次にNo3での質問に関することですが、 >ただ、フッターを踏んでしまうのは相変わらず…(なぜでしょーかTT) フッタを踏むという現象を詳しく説明していただけないでしょうか？ フッターが画面下のに行ってしまって見えないのを、常に見えるようにしたいということでしょうか？ >さらに「overflow: scroll」のためなのか >メニュー部分に常にスクロールスペースが… すみません、これが不恰好といったゆえんです・・・ メニューのトップを常に同じ場所に出すということは、隠れた部分は常に隠れてしまうということで。 強制的に見えない部分をスクロールで出すようにしたのですが、副作用でスクロールスペースが表示されてしまいます。 >後質問なのですが… >「table id="myTBL"」これはどう作用するものなので>しょうか？？ すみません、これは必要ありません。 メニューDIVの高さを求めようとしたときに、最初テーブルの高さから求めようとしたのですが、どうもうまくいかなかったので、画面の高さから割り出すように変更しました。 最初テーブルから高さを求めるときにテーブルにIDを振っていたんですが、今は必要ありません。IDはそのときの名残（消し忘れ）です。
お礼
EURさん！有難うございます！ いまだ格闘中でございます！ > メニューが長すぎて、1画面に入らない→スクロールしてもメニューは固定→メニューの下の方が見えないってなっているんですね。 ま・さ・に・です！そしてこの部分は力技で、フォントサイズを 下げてテーブルの高さ自体は縮み全体表示が可能になりましたッ！ よって、「overflow: scroll」の部分はカットしてみたのですが… フッターは相変わらず踏んでしまうのです… > フッタを踏むという現象を詳しく説明していただけないでしょうか？ はい！以前の「底なし沼化する」という状況ですと、スクロールは 永遠でした。が、今回の状態ですと、スクロールはフッターのおしり、 </td></tr></table>までが表示された時点でがつっととまります。 駄菓子菓子、その止まっているフッターの上にmenu.jsのおしりの セルが乗っかるのです。bgcolorを指定していないので、スケスケの 状態で上に重なってしまいます。(…うまく説明できてるでしょうか？？) menu.jsを置く<td></td>の範囲（座標？？）を指定できたりするのでしょうか？ 営業ツールはどんどん増え、長さは常にかわりますし、とか 言うている段階で「座標を取る」ということが私の中で理解できて いないような気がしますし…嗚呼なんといいますかスミマセンッ！ よ、よろしくお願い申し上げますッ！！
- EUR
- ベストアンサー率61% (29/47)
<HTML> <head> <script type="text/javascript"> function MoveMenu() { if (document.all) { Move = document.body.scrollTop; } else { Move = this.window.pageYOffset; } //スクロール時にメニューのトップを変える document.getElementById("menu").style.top = Move; } //↓メニューの高さ変更を追加↓ function ChangeMenuHeight() { //メニューDIVの高さを決定します if(document.all){ TBLWidth = document.body.clientHeight - 100; }else if(document.layers){ TBLWidth = window.innerHeight - 100; }else{ TBLWidth = 500; } if (TBLWidth < 100) { TBLWidth = 100; } document.getElementById("menu").style.height = TBLWidth; } //↑メニューの高さ変更を追加↑ </script> </head> <!--ロード時と画面サイズ変更時にメニューの高さを変えるように変更--> <body onScroll="MoveMenu()" onLoad="ChangeMenuHeight()" onResize="ChangeMenuHeight()"> <!--テーブルにIDを振りました--> <table id="myTBL" width="750" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td colspan="3" align="center" valign="top"> ヘッダーをJavascriptで呼んできてます。 </td> </tr> <tr> <td align="left" valign="top" width="230"> <!--相対位置でDIVを定義します--> <!--オーバーフロー時はスクロールするようにしました--> <div id="menu" style="top:0px; left:0px; position:relative; overflow: scroll;"> メニューをJavascriptで呼んできてます。 どっこい多分ここで呼ぶmenu.jsのテーブルが長いのか、 スクロールするとなぜか底なし沼になります… </div> </td> <td width="10"></td> <td width="505" height="10000"> ここにローングな営業ツールが入ってます。 </td> </tr> <tr> <td colspan="3" align="center" valign="top"> フッターをJavascriptで呼んできてます。 </td> </tr> </table> </body> </HTML>
お礼
おはようございます！！すみません！ワタクシ現在自宅に ネット環境（OSクラッシュ…）がなく、週末をはさみ お礼が遅れてしまいました！！ まずは有難うございますー！何も考えず、ぺたぺたっと 貼らせていただいたところ、底なし沼は回避できました！！ ただ、フッターを踏んでしまうのは相変わらず…(なぜでしょーかTT) さらに「overflow: scroll」のためなのか メニュー部分に常にスクロールスペースが… 後質問なのですが… 「table id="myTBL"」これはどう作用するものなのでしょうか？？ 本当に申し訳ありませんっ！もう少し時間をかけて かみ締めながら貼り付けてみます！まずはお礼まで…
- EUR
- ベストアンサー率61% (29/47)
すみません、できました。 ＃１ではうそをついていたようです。 メニューのセルをDIVで囲み、相対位置でポジションを格納します。 onScrollでDIVの相対位置を変えてあげればいけたようです。 以下に例を載せます。 JavaScript内でオブジェクトの取得にgetElementByIdを使っていますので、適当に変えてください。 <HTML> <head> <script type="text/javascript"> function MoveMenu() { if (document.all) { Move = document.body.scrollTop; } else { Move = this.window.pageYOffset; } //スクロール時にメニューのトップを変える document.getElementById("menu").style.top = Move; } </script> </head> <body onScroll="MoveMenu()"> <table> <col span="2" width="300" height="1000"> <tbody> <tr> <td align="left" valign="top"> <!--相対位置でDIVを定義します--> <div id="menu" style="top:0px; left:0px; position:relative;"> こちら側がメニュー </div> </td> <td> こちら側が長いほう </td> <tr> </tbody> </table> </body> </HTML>
お礼
EURさんっ！！フォーーーーーーッッ！ ＜ｔｄ＞です！動きます！すごいです！ ありがとうございますっっ！！！ 駄菓子菓子ッッッ！！ …あ、嗚呼…、なぜでしょうか。。。底なし沼化してしまいます… <table width="750" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td colspan="3" align="center" valign="top"> ヘッダーをJavascriptで呼んできてます。 </td> </tr> <tr> <td align="left" valign="top" width="230"> <!--相対位置でDIVを定義します--> <div id="menu" style="top:0px; left:0px; position:relative;"> メニューをJavascriptで呼んできてます。 どっこい多分ここで呼ぶmenu.jsのテーブルが長いのか、 スクロールするとなぜか底なし沼になります… </div> </td> <td width="10"></td> <td width="505" height="10000"> ここにローングな営業ツールが入ってます。 </td> </tr> <tr> <td colspan="3" align="center" valign="top"> フッターをJavascriptで呼んできてます。 </td> </tr> </table> 嗚呼…何かが違うらしく、スクロールが止まりません（TT） 何卒ッ！何卒～～お助けくださいいいい…
- EUR
- ベストアンサー率61% (29/47)
スクロールについてくるメニューは、DIVタグ等に絶対位置で表示位置を指定し、onScrollイベントで、scrollTopなどを足してあげる作業を行います。 まさに、どこに表示されるかというX,Yの情報を持たないといけません。 テーブルでは、場所の指定はleft,right,center,top,bottomしか指定できないので、ちょっとつらいかもしれませんね。 逆に長い右側のセルだけをスクロールさせるのはいかがでしょう？ 右側のセルにはDIVタグに高さと幅を指定して配置し、その上に内容を表示させます。 DIVタグのスタイルで、overflowをscrollにしておくと、内容をスクロールで表示させることが出来ます。 以下に例を載せます。 余り深く考えてないので、もっといい案があるかもです。 <table> <col span="2" width="300"> <tbody> <tr> <td align="left" valign="top"> こちら側がメニュー </td> <td> <!-- ↓DIVタグを追加します --> <div style="overflow: scroll; width: 300px; height: 300px;"> <!-- ↑DIVタグを追加しました --> こちら側が長いほう <br> <br> <br> <br> ↓ <br> <br> <br> <br> ↓ <br> <br> <br> <br> ↓ <br> <br> <br> <br> ↓ <br> <br> <br> <br> ↓ </div> </td> <tr> </tbody> </table>
お礼
こんにちは、EURさん！早速のご返答有難うございます！！ うぉー！なんだこれは！初めてみました！ インラインフレームのようでいて違うのですね！メ、メモメモ。。。 …あーぅー、…どっこい、すみません…こちらはまた別の機会に 使わせていただく予感で胸いっぱいです。。。 なんというかこう、やっぱし無理な感じなんですかね…。。 align="center"じゃなきゃオッケーかというと、下のフッターに かぶったりしてほしくないからそれもまた考えなきゃいけないし。。。 こう<td></td>の範囲でじっとしてて欲しいというのはワガママなんですかね…（TT） 有難うございました！
お礼
EURさん！！！有難うございます！ メニュー項目の整理がつかぬ以上、ANo.6のスクリプト、ロングテーブル バージョンをいただき、制作したいと思います！！ i-flameを使っているわけじゃないのに、ちょうどそんな感じに なりますよね。目的は一枚ものなので、一度こちらで提出してみて 使用感でまた考えたいと思います！ JavaScriptって、今まで「アラート」とか、「ロールオーバー」とか そういったことでしか使用してなかっただけに今回はものすごく 感動しました。（勉強になるほどには理解できず………） おんぶに抱っこ状態ですっかり組んでいただいた状況で、なんと お礼を申し上げればよいやら、といった気持ちです。 本当にありがとうございました！！！いただきます！！
補足
げげ！３０点差し上げれないのですね…ッ！ おかしいッス。。。気持ちは３０点どころの騒ぎじゃありません。 本当に有難うございました…ッッ！！