- ベストアンサー
JavaScriptで月の行に移動する方法
- HTMLの一部に高さ指定（150px程度）のテーブルを作成し、スクロールによって見ることができる月毎の予定の情報があります。JavaScriptを使用して本日の日付（月）を取得し、該当の月の行に移動させたいと考えています。既に月のジャンプリンクを設定しているが、クリックせずに「今月」の位置に移動する方法がわかりません。
- 今日の日付（月）をJavaScriptで取得し、該当の月の行に移動させるための方法を探しています。テーブルの上部には月のアンカーリンクが設定されており、クリックすることでジャンプすることができますが、自動的に「今月」の位置にジャンプさせて表示する方法が分かりません。
- HTMLのテーブルには月毎の予定が表示されており、テーブルの上部には月ごとのジャンプリンクが設定されています。JavaScriptを使用して本日の日付（月）を取得し、自動的に「今月」の位置にジャンプさせて表示する方法を探しています。どなたかアドバイスをいただけませんか？
- jg1wjz
- お礼率91% (148/162)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
A No1～3です。 全体がよくわからないので、とりあえず、部分サンプルを何種類か作ってみましたが、ブラウザによって効かないものがあるようです。 （結構古いブラウザで試しているので、一般的と言えるのかどうかは不明です） 手元にあったFx16、IE6、Opera8で実験してみたところ、table内のページ内リンクはIE6が×、スクリプトでoffset値を計算する方法は一応ＯＫ、scrollIntoView()を利用する方法はOperaが×といった感じでした。 （トリガーは、それぞれボタンのクリックになっています） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>Test Sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div p{ margin:2em 0 0 0; } input{ width:2em; } #hoge{ width:300px; height:110px; overflow:auto; margin-top:2em; padding:0; } #hoge td{ width:300px; height:50px; vertical-align:top; border:1px solid #888; } </style> <script type="text/javascript"> function scroll(evt){ var t = target(evt); if(t){ var sc = 0; var d = document.getElementById("hoge") var p = d.getElementsByTagName("table")[0]; var elm = document.getElementById("month" + t.value); if(elm){ while(elm && elm!=p){ sc += elm.offsetTop; elm = elm.offsetParent; } if(elm) d.scrollTop = sc; } } } function s_view(evt){ var t = target(evt); if(t){ var id = "month" + t.value; document.getElementById(id).scrollIntoView(true); } } function target(evt){ var t = evt.target || evt.srcElement; return (t.nodeName=="INPUT")?t:null; } </script> </head> <body> <div> <p>[ ページ内リンク ]</p> <a href="#month1"><input type="button" value="1"></a> <a href="#month2"><input type="button" value="2"></a> <a href="#month3"><input type="button" value="3"></a> <a href="#month4"><input type="button" value="4"></a> <a href="#month5"><input type="button" value="5"></a> <a href="#month6"><input type="button" value="6"></a> </div> <div onclick="scroll(event)"> <p>[ スクリプトで計算してスクロール ]</p> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"> </div> <div onclick="s_view(event)"> <p>[ scrollIntoView()による方法 ]</p> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"> </div> <div id="hoge"> <table> <tr><td><a id="month1" name="month1">1月の記述</a></td></tr> <tr><td> 1月の2行目</td></tr> <tr><td><a id="month2" name="month2">2月の記述</a></td></tr> <tr><td> 2月の2行目</td></tr> <tr><td><a id="month3" name="month3">3月の記述</a></td></tr> <tr><td> 3月の2行目</td></tr> <tr><td><a id="month4" name="month4">4月の記述</a></td></tr> <tr><td><a id="month5" name="month5">5月の記述</a></td></tr> <tr><td><a id="month6" name="month6">6月の記述</a></td></tr> <tr><td><a id="month7" name="month7">7月の記述</a></td></tr> </table> </div> </body> </html>
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
Ａ Ｎｏ1，2です。 ＞どうやったら それぞれの<a>の位置を取得できるでしょうか？ 通常なら、対象となりうるリンク要素群を取得してチェックしてゆく方法が考えられますが、ご質問の場合は、各要素にidが振ってあって、そのidに合致する要素を取得したいのではないのでしょうか？ 要素の取得は、補足の文に記述なさっている、document.getElementById()で十分ではないでしょうか？ 縦スクロール量は、親要素までのoffsetTopを合計することで得られますが、ほかに考えられる方法として、 ・scrollIntoView() （←tableの場合正しく動作するかどうか確認していません） ・A No1で示したページ内リンクをクリックする方法 なども考えられると思いますが、状況に応じて適切な方法を選ぶのがよろしいかと思います。
お礼
有難うございます。 試行錯誤、試してみてますが私の力量ではどうしてもうまくできません。 現在は、、、 function 初期処理(){ //table直前のdiv var p1=document.getElementById("in_Div").scrollTop; var p2=document.getElementById("in_Div").scrollHeight; ↓ //例えば、p1は0、p2は950 と取得できて //現在月を求めて mm に入れ... switch(parseInt(mm, 10)){ case(4月の場合): pos=0; break; case(5月の場合): pos=72; break; case(6月の場合): pos=173; break; ・ ・ ・ } //pos分だけjump document.getElementById("in_Div").scrollTop = pos; ・・・で暫定対処し、どうにかうまく動いています。 月ごとの指定は、table内に <tr class="section"> <td> <div id="m6"> <a id="mon6" name="mon6"></a> </div> </td> </tr> ・・・のように月ごとに1行、入れてあります。 （ちょっと変更してますので構文的不具合はスルー願います） posに、この行のid（m6 or mon6）の値を取得したいのです。 offsetの使い方がよくわかっていないのですが 実際にどうやったらいいのか、構文で教えていただければ助かります。 引き続き、よろしくお願いいたします。
- fujillin
- ベストアンサー率61% (1594/2576)
A No1です。 ＞tableの内容表示だけ変える・・・っていうのはできないものなのでしょうか？？？ 多分可能でしょう。 ロード時にスクリプトでURLを読んで、ご質問のような処理を行なえばよろしいかと思います。 ただし、ページ内のリンクへブラウザが移動するのと上記の処理が実行される順序によっては、全体のスクロール位置を調整するか、ブラウザのリンクへのジャンプを止める必要があるかもしれません。（実際が、どのようになるのか確認していません） スクリプトがオフの時などを考えると、#aaaのような指定方法がよろしいかと思いますが、ブラウザにジャンプさせないためには、クエリ部を利用して?page=aaaのような指定方法をとれば、ご質問の処理を呼び出すだけで済みます。 http://satussy.blogspot.jp/2011/06/javascripturl.html http://bl6.jp/web/javascript/location-search-query/
お礼
すみません、技術力不足でうまくいきません。 と言いますか、 月によって可変になるscroll幅を数値で設定しておき、 document.getElementById("（tableのID）").scrollTop = 値; で暫定対処しました。（1年間は情報の変更が無いので） 月によって可変になる幅、つまり tableの内部に記述してある、 (例)<a id="month5" name="month5"> から <a id="month6" name="month6"> 間の幅・・・ということになり、本来は この<a>の位置（？）を取得して、それぞれ該当月を表示させたかったのですが 取得する方法がわかりませんでした。 どうやったら それぞれの<a>の位置を取得できるでしょうか？
- fujillin
- ベストアンサー率61% (1594/2576)
クライアントのマシンの設定に頼ることになりますが、日付（月）は new Date().getMonth()+1 で取得することができます。 tableの内容を解読して、そこまでスクロールさせることも可能ですが、それよりもページ内アンカーをすでに作成なさっているようですので、それをスクリプトからクリックする方が簡単ではないでしょうか？ 当該要素を element に取得できているとすれば、 element.click(); で、いけるのではないかと…
お礼
ありがとうございます！ 試してみます。 例えば、index.html#aaa などでジャンプした場合、 どうしても「aaa」のところがページトップになってしまいますよね。 他の表示位置は変えずに、tableの内容表示だけ変える・・・っていうのはできないものなのでしょうか？？？
お礼
fujillinさん、ありがとうございました。 「scrollIntoView()」と 「スクリプトで計算してスクロール」の方法で実現できました。 scrollIntoView()がシンプルなのでこちらで・・・と思ったのですが、tableの見出し等の兼ね合いでしょうか、微妙に位置を調整したいので スクリプトで計算する方法にし、計算結果の値を少しマイナスすることで バッチリ、うまく表示できました！ まだ実現できただけで、内容の理解は不十分なのでこれから勉強したいと思います。 有難うございました！