画面の真ん中に配置する方法がわかりません
- ジャバスクリプトの動作を中心にする方法がわかりません。
- http://www.openspc2.org/HTML_JS_CSS/table/006/ で提供されているプログラムを画面の真ん中に配置したい場合、どこに手を加えれば良いか分かりません。
- 画面の真ん中とはインターネットエクスプローラーで見た時に中央に配置したいという意味です。HTMLでの<centr>のような配置方法が知りたいです。
- ベストアンサー
イベント？動作の位置を画面の真ん中にするには？
ジャバスクリプトの動作を中心にする方法がわかりません。 http://www.openspc2.org/HTML_JS_CSS/table/006/ ↑これなんですが、このプログラムを、画面の真ん中に配置したいんですが、どこにどのように手を加えていいかわかりません。 画面の真ん中とは、これを見る環境に関わらず、インターネットエクスプローラーで見たときに、中央に配置という意味です。 ＨＴＭＬでいう<centr>みたいなものです。 下記にプログラムを載せておきました。 私の説明で分からなかったら、補足で回答します。 <title>クリックで表示するテーブルをスクロールさせて切り替える</title> <script language="JavaScript"><!-- tMax = 5; // テーブル個数 tWidth = 200; // １つのテーブル幅 step = 10; // １回の移動量（単位：ピクセル） num = 0; offset = 0; flag = false; function scrollSetTBL(n) { if (flag) return; num += n; if (num < 0) { num = 0; return; } if (num >=tMax) { num = tMax-1; return; } offset = n * step; count = tWidth / step; setTimeout("scrollTBL()",10); flag = true; } function scrollTBL() { scrlTBL.style.pixelLeft -= offset; count--; if (count > 0) setTimeout("scrollTBL()",10); else flag = false; } // --></script> </head> <body> <img src="left.gif" onMousedown="scrollSetTBL(-1)" style="position:absolute;top:200px;left:20px;"> <img src="right.gif" onMousedown="scrollSetTBL(1)" style="position:absolute;top:200px;left:60px;"> <div style="position:absolute;top:10px;left:10px;clip:rect(0px 200px 200px 0px)"> <table id="scrlTBL" border="0" cellspacing="0" cellpadding="0" style="position:absolute;top:0px;left:0px;"> (以下略)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
要素を中央に表示したい場合、親要素にtext-align:center;を指定するか、対象要素にmargin:auto;を指定します。(javascriptで中央位置算出するのはちょっと面倒です。) どちらが有効かはDOCTYPE宣言の有無とブラウザによって異なります。DOCTYPE宣言なしの場合、IEは前者、Firefoxは後者になります。また、前者の方法は非推奨とされています。ただし、position:absolute;では無効なので、relativeに変更しています。 ご質問のケースの場合、clip:rect;を使うよりもoverflow:hidden;を使ったほうがやりやすいです。clip:rect;だと動作時にブラウザの横スクロールバーが伸び縮みしますので。 pixelLeftプロパティはIEにはありますが、Firefoxにはないようなので、leftを使うように変更させてもらいました。 表示領域のheightは適当に設定したので、適宜変更してください。 ------------------------------------------ <html> <head> <title>クリックで表示するテーブルをスクロールさせて切り替える</title> <script language="JavaScript"><!-- tMax = 5; // テーブル個数 tWidth = 200; // １つのテーブル幅 step = 10; // １回の移動量（単位：ピクセル） num = 0; offset = 0; flag = false; function scrollSetTBL(n) { if (flag) return; num += n; if (num < 0) { num = 0; return; } if (num >=tMax) { num = tMax-1; return; } offset = n * step; count = tWidth / step; setTimeout("scrollTBL()",10); flag = true; } function scrollTBL() { var left = parseInt(scrlTBL.style.left); left -= offset; scrlTBL.style.left = left + "px"; count--; if (count > 0) setTimeout("scrollTBL()",10); else flag = false; } // --></script> </head> <body> <div style="text-align:center;"> <div style="position:relative;width:200px;height:150px;overflow:hidden;margin:auto;"> <table id="scrlTBL" border="0" cellspacing="0" cellpadding="0" style="position:relative;left:0px;"> <tr><td> <table bgColor="gray" width="200"> <tr><td bgColor="yellow">フォトアルバム１</tr> <tr><td><img src="001.jpg"></td></tr> </table> </td><td> <table> <table bgColor="gray" width="200"> <tr><td bgColor="yellow">フォトアルバム２</tr> <tr><td><img src="002.jpg"></td></tr> </table> </td><td> <table bgColor="gray" width="200"> <tr><td bgColor="yellow">フォトアルバム３</tr> <tr><td><img src="003.jpg"></td></tr> </table> </td><td> <table bgColor="gray" width="200"> <tr><td bgColor="yellow">フォトアルバム４</tr> <tr><td><img src="004.jpg"></td></tr> </table> </td><td> <table bgColor="gray" width="200"> <tr><td bgColor="yellow">フォトアルバム５</tr> <tr><td><img src="005.jpg"></td></tr> </table> </td></tr> </table> </div> <img src="left.gif" onMousedown="scrollSetTBL(-1)" style="position:relative;"> <img src="right.gif" onMousedown="scrollSetTBL(1)" style="position:relative;"> </div> </body> </html> ------------------------------------ 参考になれば幸いです。
関連するQ&A
- javascriptのフラグの使われ方 コード有
javascriptの初心者です。 サンプルコードを使って勉強しているので、 フラグの使われ方について質問があります。 下にあるコードは、 4枚縦並びになった写真を、ボタンで1枚ずつスライドするスクリプトです。 その中にあるflag変数は、おそらくボタンを2度押しした時に、 一気に2枚スライドをするのを防ぐための、関数使用中を示す変数と思います。 ここで２つ質問です。 ●flag変数はここでは、何を表してますか？ ●initable関数を抜ける前、後、どちらでスライド動作をしていますか？ ----私の考え方（思い込み？）------------ このコードでちゃんと画像がスライドするのですが、 flag = ture とする場所が遅すぎる感じがします。 というのも、 slidetable関数の中に、ifがあるので その条件がクリアするまで、関数から抜けだせません。 やっと抜けだしてはじめて、flag = trueと設定する。 flag変数が、使用中を表すものだとしたら、 スライド関数に行く前に、flag = tureとして、 「関数は使用中なので、今クリックしてもreturnしますよ」とさせるのでないか？ 実際は、どのタイミングで動き出すものかよくわかりません。 chromeでブレークポイントを作って、 １つずつ動かすと、initableを抜けだした後に、 HTMLコードの所に移動したぞ。 この流れだったら、納得するけど。。。 --------------------------- スライド関数の処理は とりあえずどんな処理をするか受け付ける。(まだ動き出さない） ↓ flag =tureとして、inittable関数を抜けだして ↓ 動かす場所に、処理を一気に適用。 ---------私の考え方（思い込み？）以上------------ -------------------------------------------- <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>東京の風景</title> <script type="text/javascript"> <!-- var tablemax = 4; var tablewidth = 260; var step = 14; var num = 0; var offset = 0; var flag = false; function inittable(n){ if (flag) return; num += n; if (num < 0) { num = 0; return; } if (num >=tablemax) { num = tablemax-1; return; } offset = n * step; count = tablewidth / step; slidetable(); flag = true; } function slidetable(){ imgtables.style.pixelLeft -= offset; count--; if (count > 0) setTimeout("slidetable()",10); else flag = false; } --> </script> </head> <body> <img src="left.gif" onMousedown="inittable(-1)" style="position:absolute;top:220px;left:20px;"> <img src="right.gif" onMousedown="inittable(1)" style="position:absolute;top:220px;left:60px;"> <div style="position:absolute;top:10px;left:10px;clip:rect(0px 260px 200px 0px)"> <table id="imgtables" border="0" cellspacing="0" cellpadding="0" style="position:absolute;top:0px;left:0px;"> <tr> <td> <table bgColor="#ccccff" width="260"> <tr><td >東京フォト（１）</td></tr> <tr><td><img src="pic1.jpg" width="260" height="200"></td></tr> </table> </td> <td> <table bgColor="#ccccff" width="260"> <tr><td>東京フォト（２）</td></tr> <tr><td><img src="pic2.jpg" width="260" height="200"></td></tr> </table> </td> <td> <table bgColor="#ccccff" width="260"> <tr><td>東京フォト（３）</td></tr> <tr><td><img src="pic3.jpg" width="260" height="200"></td></tr> </table> </td> <td> <table bgColor="#ccccff" width="260"> <tr><td>東京フォト（４）</td></tr> <tr><td><img src="pic4.jpg" width="260" height="200"></td></tr> </table> </td> </tr> </table> </div> </body> </html>
- ベストアンサー
- JavaScript
- innerTextで文字を変えたいのですが
配列imに入っている数値が1なら"ok"と表示、0なら"-----"と表示したいのです。 以下のソースなのですが <html> <head> <style type=text/css> .im{ font-size:1.5em; font-weight:500; color:#ffffff; text-dacoration:none; text-decoration:blink; z-index:3; } </style> <script langage="JScript"> var im=new Array(30); var haba=0; //初期設定 function Preferences(){ for(i=1;i<=30;i++){ obj=document.getElementById("num"+i); obj.style.posTop+=haba; haba+=25; } for(f=1;f<=30;f++){ im[f]=0; im[2]=1; im[5]=1; if(im[f]==0){ num="num"+f; num.innerText="----------"; }else{num.innerText="ok";} } } </script> </head> <body bgcolor="#0000000" onLoad="Preferences()"> <div id="num1" class="im" style="position:absolute;top:25px;left:240px;">A1</div> <div id="num2" class="im" style="position:absolute;top:25px;left:240px;">A2</div> <div id="num3" class="im" style="position:absolute;top:25px;left:240px;">A3</div> <div id="num4" class="im" style="position:absolute;top:25px;left:240px;">A4</div> <div id="num5" class="im" style="position:absolute;top:25px;left:240px;">A5</div> <div id="num6" class="im" style="position:absolute;top:25px;left:240px;">A6</div> <div id="num7" class="im" style="position:absolute;top:25px;left:240px;">A7</div> <div id="num8" class="im" style="position:absolute;top:25px;left:240px;">A8</div> <div id="num9" class="im" style="position:absolute;top:25px;left:240px;">A9</div> <div id="num10" class="im" style="position:absolute;top:25px;left:240px;">A10</div> <div id="num11" class="im" style="position:absolute;top:25px;left:240px;">A11</div> <div id="num12" class="im" style="position:absolute;top:25px;left:240px;">A12</div> <div id="num13" class="im" style="position:absolute;top:25px;left:240px;">A13</div> <div id="num14" class="im" style="position:absolute;top:25px;left:240px;">A14</div> <div id="num15" class="im" style="position:absolute;top:25px;left:240px;">A15</div> <div id="num16" class="im" style="position:absolute;top:25px;left:240px;">A16</div> <div id="num17" class="im" style="position:absolute;top:25px;left:240px;">A17</div> <div id="num18" class="im" style="position:absolute;top:25px;left:240px;">A18</div> <div id="num19" class="im" style="position:absolute;top:25px;left:240px;">A19</div> <div id="num20" class="im" style="position:absolute;top:25px;left:240px;">A20</div> <div id="num21" class="im" style="position:absolute;top:25px;left:240px;">A21</div> <div id="num22" class="im" style="position:absolute;top:25px;left:240px;">A22</div> <div id="num23" class="im" style="position:absolute;top:25px;left:240px;">A23</div> <div id="num24" class="im" style="position:absolute;top:25px;left:240px;">A24</div> <div id="num25" class="im" style="position:absolute;top:25px;left:240px;">A25</div> <div id="num26" class="im" style="position:absolute;top:25px;left:240px;">A26</div> <div id="num27" class="im" style="position:absolute;top:25px;left:240px;">A27</div> <div id="num28" class="im" style="position:absolute;top:25px;left:240px;">A28</div> <div id="num29" class="im" style="position:absolute;top:25px;left:240px;">A29</div> <div id="num30" class="im" style="position:absolute;top:25px;left:240px;">A30</div> </body> </html> innrTextで表示する文字を変えるところがおかしいんだと思いますがどう直せばいいのか分かりません。 どなたか教えてください。
- ベストアンサー
- JavaScript
- メニュー3つとも個々にドロップして移動したいのですが
メニュー3つとも個々にドロップして移動したいのですが、どのように すれば良いのでしょうか。 お願いします。 <html> <head> <title>ドラッグして画像を移動する</title> <script type="text/javascript"><!-- //2つ適応 window.onload=function(){ flag = false; offx = 80; offy = 100; document.getElementById("menu1").onmousedown= function dragOn(){ flag = true;} window.document.onmousemove = dragImg; window.document.onmouseup = dragOff; function dragOff(){ flag = false; } function dragImg(){ if (!flag) return; document.getElementById("menu1").style.top = event.y-offx; document.getElementById("menu1").style.left = event.x-offy; return false;} } // --></script> </head> <body> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;">メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;">メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> </body> </html>
- ベストアンサー
- JavaScript
- １０個の落ちてくる文字の位置を常に真中に表示
お知恵をおかりしたいのですが、 下記のソースで１０個の文字（GIF）がオンロードで落ちてくる という仕様なのですが、現在はポジションを指定してあるのですが、 これをスクリプトの追加で常に真中に揃えることがしたいのですが、 自分でもやってみましたがうまくいかずおわかりになる方お力をお貸しください。 <html> <head> <title></title> <script type="text/javascript"> window.onload = init; var n=8; var frac = [1.7,1.8,1.6,1.8,1.7,1.5,1.7,1.9]; var bound = [0.5,0.6,0.5,0.6,0.6,0.5,0.6,0.5]; var count = []; var elm=[]; var y = []; var handle=[]; function falling() { for(i=0;i<n;i++){ y[i] += ++count[i] * 0.001 * frac[i]; elm[i].style.top = y[i]; if(y[i] >= wH){ y[i] = wH; count[i] = Math.ceil(-count[i] * bound[i]); if( count[i] == -1 ) clearInterval( handle[i] ); } } } function init() { for(i=0;i<n;i++) { elm[i] = document.getElementById("sample"+i); handle[i] = setInterval(falling,10); y[i]=count[i]=0; } wH = document.all ? document.body.clientHeight : window.innerHeight; wH = wH - elm[0].height; } </script> </head> <body> <center> <img src=".jpg" width="330" height="440"> <img src=".gif" id="sample0" style="position:absolute;left:250px;"> <img src=".gif" id="sample1" style="position:absolute;left:300px;"> <img src=".gif" id="sample2" style="position:absolute;left:350px;"> <img src=".gif" id="sample3" style="position:absolute;left:400px;"> <img src=".gif" id="sample4" style="position:absolute;left:450px;"> <img src=".gif" id="sample5" style="position:absolute;left:500px;"> <img src=".gif" id="sample6" style="position:absolute;left:550px;"> <a href="#" alt="ENTER"><img src="enter.gif" id="sample7" border="0" style="position:absolute;left:680px;"></a> </center> </body> </html> というソースなのですが、たぶん１行か２行のコードの追加でモニタサイズなど関係なしに常にど真ん中にならべることができると思うのですが、難しく。。。。。 どうかなのとぞよろしくお願いいたします。
- 締切済み
- JavaScript
- ワイドのモニターだとズレます
下記のような記述を用いてオンマウスでメニューが現われるようにしているのです。 仕事で使っている１５インチモニターでは正常に表示できるのですが、家にあるワイドモニターで見るとズレが生じてしまいます。 これを直すにはどうしたら良いのでしょうか？ <style type="text/css"> <!-- #menu1{ position:absolute; top:22px; left:0px; visibility:hidden; } #menu2{ position:absolute; top:22px; left:90px; visibility:hidden; } #menu3{ position:absolute; top:22px; left:180px; visibility:hidden; }} --> </style>
- 締切済み
- JavaScript
- すいません、このタグですが、自動で始まるようにならないでしょうか？
<title>１行づつ画面上に出力する</title> <STYLE type="text/css"> <!-- div{font-size:20pt; } --> </STYLE> <script Language="JavaScript"><!-- str = new Array(); str[0] = "Sample text...(^^)/<br>"; str[1] = "１行づつ表示します。<br>"; str[2] = "By KaZuhiro FuRuhata<br>"; str[3] = "<a href='http://www.shiojiri.ne.jp/~openspc/'>OpenSpace</a>"; count = 0; function setTextLine() { if (count >= str.length) return; txt = ""; count++; for (i=0; i<count; i++) txt += str[i]; if (document.all) document.all["outText"].innerHTML = txt; setTimeout("setTextLine()",1000); } // --></script> </head> <body> <DIV id="outText" style="position:absolute;top : 167px;left : 112px;"></DIV> <DIV style="width : 139px;height : 76px;top : 10px;left : 146px; position : absolute; z-index : 1; " id="Layer1"><a href="javaScript:setTextLine()">出力開始</a></DIV> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- オブジェクトがありません
オブジェクトがありませんとエラーが出てしまいます。 operaやNetscapeは動くようなのですがIEは動きません。 document.getElementById(target).style.top = y-offx+"px"; の部分でエラーがでるようなのですが。 出さないためにどうすれば良いかが、分かりません。 よろしくお願いします。 <html> <head> <title>ドラッグして移動する</title> <script type="text/javascript"><!-- if(window.addEventListener)window.addEventListener("load",loadScript,false); if(window.attachEvent)window.attachEvent("onload",loadScript); //関数ロード function loadScript(){ ///ドラッグ用ロード flag=false; Menu=new Array("menu1","menu2","menu3"); for(i=0;i<Menu.length;i++){ XMenu=window.document.getElementById(Menu[i]) if(XMenu.addEventListener)XMenu.addEventListener("mousedown",dragOn,false); if(XMenu.attachEvent)XMenu.attachEvent("onmousedown",dragOn); } } //ドラッグ関数 function dragOn(){ flag=true; target=this.id; ///移動 if(window.document.addEventListener)window.document.addEventListener("mousemove",dragMove,false); if(window.document.attachEvent)window.document.attachEvent("onmousemove",dragMove); ///終了 if(window.document.addEventListener)window.document.addEventListener("mouseup",dragOff,false); if(window.document.attachEvent)window.document.attachEvent("onmouseup",dragOff); } function dragMove(evt){ if (!flag) return; if (window.createPopup){ x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; }else{ x = evt.pageX; y = evt.pageY; } offx = 60; offy = 75; document.getElementById(target).style.top = y-offx+"px"; document.getElementById(target).style.left = x-offy+"px"; return false; } function dragOff(){flag=false;} // --></script></head> <body> <!-- 各メニューで自分自身をドラッグ開始するように，関数を呼ぶ --> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;" >メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;" >メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> <div id="menu4" style="background-color:yellow; position:absolute;top:200px; left:200px;width:120px;height:150px;">メニュー4</div> </body> </html>
- ベストアンサー
- JavaScript
- 画像の座標位置取得
javascriptの勉強を始めたばかりで、どうしてもわからないことがあるので質問させてください。（まだ初めて一週間程度の初心者です…） マウスの座標を取得するのはなんとなくわかったのですが、画像の座標をどうやって取得すればいいのかがわかりません。（マウスはevent.offsetで取得してるのでそれに合わせたい） 例えば… function lyrGetTop(lyr){ return( parseInt( document.getElementById(lyr).style.pixelTop ) ); } で、画面全体の位置からの座標を取得するのはできたのですが、ブロック内（？）の位置から取得することができません…。 どのようにすればevent.offsetでのマウスの座標ようにブロックを基準とした座標を取得することができますか？ それから、シューティングゲームの自機が弾を連射するようなアルゴリズムがわかりません。 <html> <head> <title></title> <script language="JavaScript"><!-- y = 450; interval = 20; function moveBall(){ y = y - interval; document.getElementById("ball").style.pixelLeft = getlyrleft("ber") + 24; document.getElementById("ball").style.pixelTop = y; document.getElementById("ball").style.visibility = "visible"; if( (y < 10) ){ document.getElementById("ball").style.visibility = "hidden"; document.getElementById("ball").style.pixelTop = getlyrtop("ber"); return 0; } } function getlyrtop(lyr){ return(parseInt(document.getElementById(lyr).style.pixelTop)); } function getlyrleft(lyr){ return(parseInt(document.getElementById(lyr).style.pixelLeft)); } // --></script> </head> <body onclick="setInterval('moveBall()',1)"> <img src="bb01.gif" id="ball" style="position:absolute; visibility:hidden" left:0px;top:16px;"> <img src="bb03.gif" id="ber" style="position:absolute; left:445px; top:459px;"/> </body> </html> これだと、連射どころか、二回目のクリックに反応すらしないんです…。 どうかご教授お願いします。
- ベストアンサー
- JavaScript
- htmlについて教えてください
サイトを一から作っているのではなく、 ショッピングサイトの商品ページの一部分を htmlタグを使って作っています。 macで確認するとレイアウトは問題なくきれいに見れるのですが、 windowsで確認すると画像やテキストが崩れています。 これはなぜなのでしょうか？ このような感じで記述していました。 画像の上に画像を重ねて表示し、テキストをその上に表示したいのですが... <div style="position: relative;"><div align="center"> <img src="http://○○○.jpg" alt=""></div> <div style="position:absolute;left:40px;top:40px"> <b>テキスト</b></div> <div style="position:absolute;left:380px;top:100px;width:240px;"> テキスト</div> <div style="position:absolute;left:60px;top:100px"> <img src="http://○○○.jpg"></div> <div style="position:absolute;left:370px;top:22px"><img src="http://○○○.jpg"></div> </div></div> htmlの知識がほとんどないので、 なるべく易しく説明していただければ有り難いです・・・。 よろしくお願い致します。
- 締切済み
- HTML
- ボタンの並び替えとマウスイベント
分かりにくいかも知れませんが、以下のソースを用いてJavaScriptの部分でボタンの並び替え、 マウスイベントを実行したいんですが、うまく実行できないので教えてください。 <html><head><title>a</title> <input type='button' value='34' style='background-color:#f60;left:137px;position:absolute;top:100px;width:100' onMouseOver='b()'> <input type='button' value='58' style='background-color:#f60;left:163px;position:absolute;top:100px;width:100' onMouseOver='b()'> <input type='button' value='100' style='background-color:#f60;left:250px;position:absolute;top:100px;width:100' onMouseOver='b()'> <SCRIPT LANGUAGE="JavaScript"> function a(){ ここでボタンをvalue='数値'の小さい物が最前に来るよう並び替え （value = 100,58,34の順でhtmlで書くのではなく、ここで並び替えをしたい） } function b() { ここでマウスがボタンに乗ったらそのボタンを最前に表示したい } </SCRIPT></body></html> function a,bの部分を教えてもらえると幸いです。 以上、質問が下手で分かりづらいですが、よろしくお願いします。
- 締切済み
- JavaScript
お礼
返事遅れて大変申し訳ございません。 詳しい説明と、サンプルありがとうございました。 おかげさまで大変助かりました。