JavaScriptでセンター表示で行き詰まってしまいました

2023/08/10 11:19

このQ&Aのポイント

JavaScriptでセンター表示がうまくできない問題が発生しています。
特にFirefoxでは画面の左上端に表示されてしまいます。
センター表示の方法や常に画面のセンターに表示する方法について教えていただきたいです。

ベストアンサー

JavaScriptでセンター表示で行き詰まってしまいました。

2010/08/09 22:51

JavaScriptでセンター表示で行き詰まってしまいました。どうしてもできません。現在しようとしているのが、HP全面に画像を表示させ、そのセンターに日時時間を表示させたいと思っています。いろいろwebで調べて、センター表示ではないのですが、下記の形を組み込みました。 IEとsafariでは問題無いのですが、Firefoxでは、画面の左上端に表示されてしまいます。どなたか、ご教授いただければ助かります！また常に画面のセンター表示も可能なのでしょうか？ ↓↓↓↓↓head内 <script language="JavaScript">  </script> ↓↓↓↓↓body内 <body onLoad="tokei();"> <span id="lay0" style="position:absolute;visibility:visible;color:#FFFFFF"></span>

hibishoujin
お礼率84% (39/46)

JavaScript
回答数1
ありがとう数3

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

kuzumiHK
ベストアンサー率72% (132/183)

2010/08/10 01:28 回答No.1

こんな感じでしょうか。まず、firefoxでセンターにならなかった理由は、数値の後に+"px"がなかったからです。また、先にmojiをdovument.writeして、spanの幅を取得して、取得した画面サイズの半分から、spanの幅の半分を引いた数値を、位置情報にしていますので、画面サイズが変わると1秒以内（setTimeoutが1000の場合）にセンターに移動します。 ※document.layers対応ブラウザは環境がないため未確認です。IE6とSafariも未確認。 function tokei() { a=new Date(); b=a.getFullYear(); c=a.getMonth(); d=a.getDate(); e=a.getHours(); f=a.getMinutes(); g=a.getSeconds(); if(c<10)c="0"+c; if(d<10)d="0"+d; if(e<10)e="0"+e; if(f<10)f="0"+f; if(g<10)g="0"+g; moji="<strong>"+b+"."+c+"."+d+" "+e+"："+f+"："+g+"</strong>"; if(document.layers) { document.layers["lay0"].document.open(); document.layers["lay0"].document.write(moji); document.layers["lay0"].document.close(); my_width = document.layers["lay0"].offsetWidth; my_height = document.layers["lay0"].offsetHeight; x_iti=innerWidth / 2 - my_width / 2; y_iti=innerHeight / 2 - my_height / 2; document.layers["lay0"].moveTo(x_iti,y_iti); } else if((document.getElementById) && (!document.all)) { document.getElementById("lay0").innerHTML=moji; my_width = document.getElementById("lay0").offsetWidth; my_height = document.getElementById("lay0").offsetHeight; x_iti=innerWidth / 2 - my_width / 2; y_iti=innerHeight / 2 - my_height / 2; document.getElementById("lay0").style.left=x_iti+"px"; document.getElementById("lay0").style.top=y_iti+"px"; } else if(document.all) { document.all("lay0").innerHTML=moji; my_width = document.all("lay0").offsetWidth; my_height = document.all("lay0").offsetHeight; x_iti=document.documentElement.clientWidth / 2 - my_width / 2; y_iti=document.documentElement.clientHeight / 2 - my_height / 2; document.all("lay0").style.pixelLeft=x_iti; document.all("lay0").style.pixelTop=y_iti; } clearTimeout(g); g=setTimeout('tokei()',1000); }

質問者

お礼 2010/08/10 11:15

おはようございます。早速のご回答ありがとうございます。早速試してみたところ、完璧！です！ 1秒後に...なるほど。 firefox,safari,確認が取れました。windowsのIEでもこれから試してみます。自分の力だけではどうにもならないですね。お力添えありがとうございました。またご縁がありましたらよろしくお願いいたします。

関連するQ&A

javascript　スライドバー
ダイナミックHTMLに掲載されている jsでのスライダーを同一ページで複数使いたいのですがどおうすればいいでしょうか？ <body onLoad="Init()">で読み込んでいます。詳しい方がいましたらご教授お願い致します。 var iniX = 150; //バーの初期位置(x) var iniY = 0; //バーの初期位置(y) var dY = -45; //バーに対するスライダーの表示位置(y) var dX1 = 0; //バーに対するスライダーの表示位置(x,最も左) var dX2 = 330; //バーに対するスライダーの表示位置(x,最も右) var valx = -120; //バーに対する数値を表示する位置(x) var valy = -120; //バーに対する数値を表示する位置(y) var minValue = 0; //最小値 var maxValue = 1500; //最大値 var iniValue = 0; //初期値 var M_flag = false; var mdx,mdlayx,mmx,mmlayx; var xmax,xmin; function Init(){ dx = dX2 - dX1; x = dx * ((iniValue - minValue) / (maxValue - minValue)); xmin = iniX + dX1; xmax = iniX + dX2; if(document.all){ document.all("iLf").onmousedown = Mdown; document.onmouseup = Mup; document.onmousemove = Mmove; document.all("iLf").style.posLeft = xmin + x; document.all("iLf").style.posTop = iniY + dY; document.all("iLb").style.posLeft = iniX; document.all("iLb").style.posTop = iniY; document.all("iLv").style.posLeft = iniX + valx; document.all("iLv").style.posTop = iniY + valy; document.all("iLv").innerHTML = iniValue; }else if(document.layers){ }else if(document.getElementById){ document.getElementById("iLf").onmousedown = Mdown; document.onmouseup = Mup; document.onmousemove = Mmove; document.getElementById("iLf").style.left = xmin + x+"px"; document.getElementById("iLf").style.top = iniY + dY+"px"; document.getElementById("iLb").style.left = iniX+"px"; document.getElementById("iLb").style.top = iniY+"px"; document.getElementById("iLv").style.left = iniX + valx+"px"; document.getElementById("iLv").style.top = iniY + valy+"px"; document.getElementById("iLv").innerHTML = iniValue; document.testimg.width = iniValue/4.5; document.testimg.height = 35; } } function Mdown(e){ if(document.all){ mdx = event.x; mdlayx = document.all("iLf").style.posLeft; }else if(document.layers){ }else if(document.getElementById){ mdx = parseInt(e.pageX); mdlayx = parseInt(document.getElementById("iLf").style.left); } M_flag = true; return false; } function Mup(e){ M_flag = false; return false; } function Mmove(e){ if(document.all){ if(M_flag){ mmx = event.x; mmlayx = (mmx - mdx) + mdlayx; if(mmlayx < xmin) mmlayx = xmin; if(mmlayx > xmax) mmlayx = xmax; x = Math.floor((mmlayx - xmin) / dx * (maxValue - minValue) + minValue); document.all("iLf").style.posLeft = mmlayx; document.all("iLv").innerHTML = x; } event.returnValue = false; }else if(document.layers){ }else if(document.getElementById){ if(M_flag){ mmx = parseInt(e.pageX); mmlayx = (mmx - mdx) + mdlayx; if(mmlayx < xmin) mmlayx = xmin; if(mmlayx > xmax) mmlayx = xmax; x = Math.floor((mmlayx - xmin) / dx * (maxValue - minValue) + minValue); document.getElementById("iLf").style.left = mmlayx+"px"; document.getElementById("iLv").innerHTML = x; document.testimg.width = x/4.5; document.testimg.height = 35; } return false; } }
- 締切済み
- JavaScript
レイヤーのクリッピングを解除するにはどうすれば良いですか
難しい内容かもしれませんが、宜しくお願いします。 IE4 や NN4 で例えば以下の様に、 'lay'という名前のレイヤーを作成したとします。 <DIV ID='lay' STYLE='position:absolute'></DIV> すると以下の様に、JavaScriptから文字列 htm をレイヤーに書き込めます。 //IEの場合 document.all('lay').innerHTML=htm; //NNの場合 document.layers['lay'].document.open(); document.layers['lay'].document.write(htm); document.layers['lay'].document.close(); そしてレイヤーのサイズも文字列 htm の内容に合わせて変化します。しかし以下の様に、１度でもレイヤーをクリッピングした後に、 //IEの場合 document.all('lay').style.width=100; document.all('lay').style.height=100; document.all('lay').style.clip='rect(0,100,100,0)'; //NNの場合 document.layers['lay'].clip.left=0; document.layers['lay'].clip.right=100; document.layers['lay'].clip.bottom=100; document.layers['lay'].clip.top=0; このレイヤーをクリッピングする前の、文字列 htm の内容に合わせてサイズが変化していた頃の状態に、戻す方法が分からなくて困っております。やっぱり無理でしょうか。何の回答もないとサミシイので、わからなくても誰か返事してあげて下さい。
- ベストアンサー
- JavaScript
IE11 javascriptについて
すみません、IE11なってから、以下のjavascriptが動かなくなりました。画像は、フェードイン、フェードアウトを繰り返し、画像はランダムに移動します。全部のロジックを書いてしまいましたが、何処がIE11から変更されたかが解らなくて、困っている所です。何処を直すのか、全部聞くのもあつかましいと思いました、どのあたりを見直しすれば宜しいですか。教えて頂ければ幸いです。 <SCRIPT language="JavaScript">  </SCRIPT>
- ベストアンサー
- JavaScript
XHTMLとJavascript・CSSで表示位置の固定方法について
HTMLからXHTMLへソースをそのままで移行したら位置の固定がされなくなりました。 <div id="msg">message</div>の部分をスクロールしても常に同じ場所に表示したいです。 XHTMLの知識が殆どなく、原因が判りません。 Javascriptを別ファイルにしても動きませんでした。修正方法、もしくは代替案をお願いします。宜しくお願いいたします <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <script type="text/javascript"> var offX = 0; var offY = 0; function setMenu(){ if(document.all){ var mx = parseInt(document.body.scrollLeft+offX); var my = parseInt(document.body.scrollTop+offY); } else { var mx = parseInt(self.pageXOffset+offX); var my = parseInt(self.pageYOffset+offY); } if(document.getElementById){ document.getElementById('msg').style.left=mx; document.getElementById('msg').style.top=my; }else if(document.all){ document.all('msg').style.pixelLeft=mx; document.all('msg').style.pixelTop=my; }else if(document.layers){ document.layers['msg'].moveTo(mx,my); } } onscroll = setMenu; onresize=setMenu; //--> </script></head> <body bgcolor="#111144"> <div id="msg"> message </div> </body> </html>
- ベストアンサー
- JavaScript
IE6ではjavascriptが動くのにNN7.1では動かない。
”コンピューター家庭向け”のところでも質問したのですが、回答がないのでここで質問させていただきます。 HTML部分 <div class="galico"> <script language="javascript" src="poser.js"></script> <a href="javascript:showgallery()"> <img src="../base/gallery.gif" alt=""> </a> </div> SSC部分 .galico { z-index: 3; position: relative; top: 29px; left: -200px; } javascript部分 function showgallery(){ if ( document.all )document.all('gallery').style.visibility ='visible' else if ( document.layers )document.layers['gallery'].visibility ='show' else if ( document.getElementById )document.getElementById('gallery').style.visibility ='visible' } この記述で、IE6では思った通りに動いてくれます。（"../base/gallery.gif"をクリックするとjavascriptを実行してくれる。）ところが、NN7.1では "../base/gallery.gif" に触れても、ステータスバーにjavascriptにリンクするように表示もされないし、クリックしても動きません。なぜかSSCの "position: relative;" を "position: absolute;" にしてやると動くのですが。。。なぜでしょうか。わかりやすく教えていただけないでしょうか。
- ベストアンサー
- JavaScript
スクロールバーの位置に合わせて画像を移動
縦のスクロールバーの位置に合わせて画像を移動したいです。マウスの位置に合わせて移動させる事は可能なのですが、すぐ動いたしまうので。。一応、マウスの位置に合わせて移動は下記のようにしています（元々、縦横方向の移動を紹介しているページがあったのでそれを拝借して縦方向の移動だけにしています。） <script language="JavaScript">  </script>
- 締切済み
- JavaScript
popupウィンドウでborderがcollapseなテーブル利用の問題
popupウィンドウにテーブルを使用していて、 border-collapse: collapse　のボーダーがある場合に、初期表示時点で、そのボーダーのみが表示されてしまいます。 firefox,operaでは起きずIE6で起きます。そこで非表示にするためのjavascript をonloadで動かしているのですが、データ量の大きいページだと、表示された後に消えるのが見えてしまい不細工です。最初から枠が表示されないようなcssの指定方法はないでしょうか。 <html> <head> <script>  </script> <style>  </style> </head> <body onload="PopupOff('poplink')" > <div id="poplink"> <table width="80px" height="80px"> <tr><td> [<a onClick="PopupOff('poplink')">閉じる</a>]<br /> ポップアップ </td></tr></table> </div> <a href="#" onClick="PopupOn('poplink')">リンク</a><br /> </body> </html>
- ベストアンサー
- HTML
JavaScriptのテーブルの背景色を保存させたい
とある下記のフリーソースからJavaScriptにてテーブルの背景色を変えるのを作ったのですが、複数の人とページを共有したいので色を変更後、保存させておきたいです。 <script language="JavaScript"> function my_bgcolor(dore) { if(document.all)document.all("lay0").style.backgroundColor=dore; } function cell1(dore) { if(document.all)document.all("lay1").style.backgroundColor=dore; } //--> </script> ※テーブルに色を指定するソースは以下のものです <td id="lay0" style="position: relative; visibility: visible"> どこかへSubmitして、外部ファイルへ保存しないといけないと思うので、上の動作ができるCGIのなにかよい案、似たようなソースをご存知の方がいましたら教えてください。
- 締切済み
- CGI
webサイトで文字にマウスを重ねた時に文章を表示させたい
ウェブサイトで、JavaScriptを使用し、「挨拶」の文字にマウスを重ねた時、「こんばんは。」と表示されるようにしたいのですが、上手くいきません。下記は私が記述したソースになります。ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <html> <head> <title>テスト</title> <script language="JavaScript">  </script> </head> <body ONLOAD="preloadImages();">  <div id="link2" style="position:absolute; width:600px; height:80px; z- index:1; left: 80px; top: 600px; visibility: hidden"> こんばんは。</div>  <a href="http://www.geocities.co.jp/Milkyway/1958/" onMouseOver="Lay_View('link2','visible');Lay_View('linka','hidden');" onMouseOut="Lay_View('link2','hidden');Lay_View('linka','visible');" > 挨拶</a> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーこの場合IEでは、ちゃんと表示されるのですが、Firefox等で見た場合、何も表示されません。どうすれば、他のwebブラウザにも対応できるのでしょうか？ JavaScriptは初心者なので、修正すべき場所とコードを詳しく教えて頂けると助かります。よろしくお願い致します。
- ベストアンサー
- JavaScript
これは何をするスクリプトですか？
<head> <script type="text/javascript">  </script> </head> <body onload="loading()"> 詳細は略して書いています。プログラムに全く詳しくないので、何をやろうとしているスクリプトなのかわかりません。皆様には簡単かとは思いますが、よろしくお願いします。
- ベストアンサー
- JavaScript