- ベストアンサー
Ｊavascriptの初心者のコードの不具合の訂正をお願いします
- 昨日からjavascriptを始めた初心者なのですが、以下のコードの不具合の訂正をお願いしたいのです。自分なりにあれこれやっては見ましたが、結論が見出せません。
- 問題点：(1)windowをリサイズたときに、動かない点 (2)ＤＯＣＴＹＰＥ宣言すると、まったく機能しない。（ＤＯＣＴＹＰＥ宣言とJAVASCRIPTの対応が理解できていないので。。とりあえず、ＤＯＣＴＹＰＥ宣言無しでも機能すればいいかな？と思っております。ＩＥ８とfirefox3での表示を目指しています。）
- 要約文も余程のことがない限り3点必要かと思います。一点目は質問内容、二点目は問題点に関して、三点目は目指している表示環境、としました。
- ホームページ作成ソフト
- 回答数1
- ありがとう数5
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- jqfloat.jsを複数の画像に適用したい
javascriptで7枚の画像をブラウザの中にランダム配置で表示させ、 さらにjQueryのjqfloat.jsで画像をふわふわ動かす、というものを作っています。 ランダム配置まではうまくいったのですが jqfloatが７枚のうち１枚にしか適用されず困っております。（最後のid='fuwa'のところ） jsの勉強を始めたばかりでスクリプトの書き方が変だったりするかもしれませんが… どなたか対処法を教えていただけませんでしょうか。 どうぞよろしくお願い致します！ <script type="text/javascript"><!-- $(document).ready(function() { $('#fuwa').jqFloat({ width: 50, height: 50, speed: 2500 }); }); var images = [ {img : "1.png" , url : "http://1.com"}, {img : "2.png" , url : "http://2.com"}, {img : "3.png" , url : "http://3.com"}, {img : "4.png" , url : "http://4.com"}, {img : "5.png" , url : "http://5.com"}, {img : "6.png" , url : "http://6.com"}, {img : "7.png" , url : "http://7.com"} ]; images.sort(function(){return Math.random() - Math.random();}); function getBrowserWidth ( ) { if ( window.innerWidth ) { return window.innerWidth; } else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; } else if ( document.body ) { return document.body.clientWidth; } return 0; } function getBrowserHeight ( ) { if ( window.inneHeight ) { return window.innerHeight; } else if ( document.documentElement && document.documentElement.clientHeight != 0 ) { return document.documentElement.clientHeight; } else if ( document.body ) { return document.body.clientHeight; } return 0; } Imgn=7; for (i=0; i < Imgn; i++){ xpx = 50+Math.floor(Math.random() * (window.innerWidth -280)) + 1; ypx = 30+Math.floor(Math.random() * (window.innerHeight -300)) + 1; thumbs="<div style='position:absolute;left:"+ xpx +"px;top:"+ ypx +"px;' id='fuwa'><a href='"+images[i].url+"'><img src='"+images[i].img+"'></a></div>"; document.write(thumbs); } </script>
- 締切済み
- JavaScript
- javascriptで画像サイズをウィンドウのサイズに合わせて表示する方法
javascriptを最近はじめてみました。 しかしどうも慣れないためか、最後の一歩で思うように動いてくれません。 基本的にやりたい事はウインドウサイズに合わせて画像サイズを変更できるようにしたいと思ってます。 何とかいろいろ調べて、下記のスクリプトまで来たんですが （確かこのサイトの他の方への回答からほぼ活用） これでは画面が表示されるときにスクリプトが適用されません。 その後ウィンドウのサイズ変更をすると適用してくれるのですが。 なにやらとても簡単な事で上手く動いてくれないのかもしれませんが、 どうしてもできそうにありません。 どなたかお分かりの方がいましたらご教授願えると大変助かります。 よろしくお願いします。 以下、javascript↓ <body style="overflow:hidden" bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <img src="test.JPG" id="backgroundID" style="position:absolute;top:0px;left:0px;z-index:0;" onload="setSize()"> <div style=" color: black; font-size: medium; font-family: serif; visibility: visible; display: block; position: absolute; z-index: 1; top: -1px; left: 0"> <script type="text/javascript"> var imgObj = document.getElementById('backgroundID'); var imgSize = {w:0, h:0} window.onresize = setImg; window.onscroll = function() { var t, l; if (document.documentElement.scrollTop) { t = document.documentElement.scrollTop; l = document.documentElement.scrollLeft; } else if (document.body.scrollTop) { t = document.body.scrollTop; l = document.body.scrollLeft; } else { return; } imgObj.style.top = t + 'px'; imgObj.style.left = l + 'px'; } function setSize() { imgSize.w = imgObj.width; imgSize.h = imgObj.height; } function setImg() { var wh, pW, pH, c; wh = getWindowSize(); pW = wh.w / imgSize.w; pH = wh.h / imgSize.h; if (pW > 0 || pH > 0) { c = (pW > pH) ? pW : pH; imgObj.style.width = parseInt(imgSize.w * c + 1) + 'px'; imgObj.style.height = parseInt(imgSize.h * c + 1) + 'px'; } else { imgObj.style.width = imgSize.w + 'px'; imgObj.style.height = imgSize.h + 'px'; } } function getWindowSize() { var wh = {w:0, h:0}; if (document.body.clientWidth) { wh.w = document.body.clientWidth wh.h = document.body.clientHeight; } else if(document.documentElement.clientWidth) { wh.w = document.documentElement.clientWidth; wh.h = document.documentElement.clientHeight; } else if(window.innerWidth) { wh.w = window.innerWidth; wh.h = window.innerHeight; } return wh; } </script> </body>
- 締切済み
- JavaScript
- javascriptで困っています
初心者webプログラマーです javascriptでエンドロールのようなものを作ろうとしています。以下の１つのhtmlファイルで作ると動くのですが <html> <head> <title>エンドロール</title> <style type="text/css"> #txt{ position: absolute; top: 320px; } #container{ width:320px; height:320px; position:relative; top:0px; left:0px; overflow:hidden; } </style> </head> <body onLoad="setInterval('endroll()', 50);"> <script type="text/javascript"> var y = 320; function endroll(){ document.getElementById("txt").style.top = y; y -= 2; if(y<-400){y=320} } </script> <div id="container"> <div id="txt"> aaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccc ddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffffffff ggggggggggggggggggggg hhhhhhhhhhhhhhhhhhhhh iiiiiiiiiiiiiiiiiiiii </div> </div> </body> </html> これを、htmlファイル、cssファイル、jsファイルに分けてつくると、動かなくなります-----index.html---------------------------------------------------------------------- <html> <head> <link rel="stylesheet" href="endroll.css" type="text/css" /> <script src="endroll.js"></script> <title>エンドロール</title> </head> <body> <div id="container"> <div id="txt"> aaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccc ddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffffffff ggggggggggggggggggggg hhhhhhhhhhhhhhhhhhhhh iiiiiiiiiiiiiiiiiiiii </div> </div> </body> </html> -------endroll.css--------------------------------------------------------------- @charset "utf-8"; #txt{ position: absolute; top: 320px; } #container{ width:320px; height:320px; position:relative; top:0px; left:0px; overflow:hidden; } ---------endroll.js-------------------------------------------------------------- window.onload = function(){ start_endroll(); } var y = 320; // 繰り返し処理の内容 function endroll(){ document.getElementById("txt").style.top = y; y -= 2; if(y<-400){y=320} } // 繰り返し処理の開始 function start_endroll() { timerID = setInterval('endroll()',50); } いろいろ調べてみたのですが、解決できませんでした。長い質問になりましたが、どなたか教えていただければありがたいです。よろしくお願いします。
- 締切済み
- JavaScript
- JavaScript内からJavaScriptを書き出したいのですが
こんにちは． JavaアプレットとJavaScriptを利用してJavaScriptを書き出すコードを書いてみたのですが，うまく動きません．具体的なコードは以下のようで，リンクはできるのですが，マウスを乗せるとオブジェクトを指定してくださいとエラーがでます．innerHTMLでJavaScriptを書き出すことはできないのでしょうか？ <html> ・・・ <body> <SCRIPT language="JavaScript" type="text/javascript"> <!-- function dWrite(){ str='<script type="text/javascript">functionLinkMo(){varLM1;LM1=window.open"","Doc","toolbar=no,location=no,kdirectories=no,width=300,height=250");LM1.document.write"<html><head><title></title></head><body>testです/body></html>");LM1.document.close();}</script><body>rinku <ahref="#"onMouseOver="LinkMo()">ここにのせると</a></body></html>'; document.getElementById("here").innerHTML=str;} //--> </script> <applet ・・・dWriteを呼び出す></applet> <div id="here" style="position:absolute;width:600px; left:0px;top:0px;"> </div></body></html>
- ベストアンサー
- JavaScript
- JavaScriptのコードの間違いを教えて
いつもお世話になっております。 現在、JavaScriptの勉強をしているのですが、if構文のところでつまずいてしまいした。 下のコードがうまく実行できません。 間違いを指摘して頂ければと思います。 <doctype! html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Javascript</title> </head> <body> <script type="text/javascript"> var x = window.prompt("好きな値を入力してください","100"); if (x>100) {window.document.write("100より大きいです");} else {if(x<100)) {window.document.write("100より小さいです");} else {if(x=100)) {window.document.write("100です");} } } </script> </body> </html> なお、テキストエディタで記述し、実行はGoogleChromeで行いました。 よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- ウィンドウサイズの変更を滑らかに取得したい
<html> <head> <script type="text/javascript"> function test(){ width = document.body.clientWidth; height = document.body.clientHeight; document.getElementById("haba").value=width; document.getElementById("takasa").value=height; } </script> </head> <body onload="window.setInterval('test()',1);"> 幅<input size="20" type="text" id="haba"/> 高さ<input size="20" type="text" id="takasa"/> </body> </html> -------------------------------------------------------------- 以上のような、ブラウザのウィンドウサイズを取得する コードを書いたのですが、滑らかに高さと幅が取得出来ずに困ってます。 イメージとしては、ウィンドウサイズをマウスで変更すると 高さと幅の数値がもっと滑らかに細かく変化するように したいのです。 どなたか回答お願いします。
- ベストアンサー
- JavaScript
- XHTML（厳格）でJavaScriptが動かない
ソースを書くと見ずらいので、 ＵＲＬで提示しますと http://martin.p2b.jp/index.php?UID=1115484023 の部分ですが、 d.body.appendChild(imgPop); （d=document と宣言されているとする） で、エラーもなく、どのブラウザーでも何も動いてくれません。 ちなみに、XHTMLで奨励されている Content-type: application/xhtml+xml で出力するようにしています。 (metaでは一切宣言してません） これを普通に、text/html に出力させるだけで 動作するのはするのですが・・・ どなたか、mime type を変更せずに 解決できる方はいらっしゃいますでしょうか？ よろしくお願いします。 p.s. d.body.innerHTML="hoge"; はできるようです。 ------------ 見ずらいですが、ソースはこちら var d=document; function getClientWidth(){ if(self.innerWidth){ return self.innerWidth; } else if(d.documentElement && d.documentElement.clientWidth){ return d.documentElement.clientWidth; } else if(d.body){ return d.body.clientWidth; } } function getClientHeight(){ if(self.innerHeight){ return self.innerHeight; } else if(d.documentElement && d.documentElement.clientHeight){ return d.documentElement.clientHeight; } else if(d.body){ return d.body.clientHeight; } } function getScrollY(){ if(typeof window.pageYOffset != "undefined"){ return window.pageYOffset; } else if(d.body && typeof d.body.scrollTop != "undefined"){ if(d.compatMode == 'CSS1Compat'){ return d.documentElement.scrollTop;; } return d.body.scrollTop; } else if(d.documentElement && typeof d.documentElement.scrollTop != "undefined"){ return d.documentElement.scrollTop; } return 0; } var imgPop = null; imagePop = function (e, path, w, h){ if(imgPop==null){ imgPop = d.createElement("IMG"); imgPop.src = path; with (imgPop.style){ position = "absolute"; left = Math.round((getClientWidth()-w) / 2) + "px"; top = Math.round((getClientHeight()-h) / 2 + getScrollY()) + "px"; margin = "0"; zIndex = 1000; border = "4px groove Teal"; display = "none"; } d.body.appendChild(imgPop); if(imgPop.complete){ imgPop.style.display = "block"; } else window.status = "画像読み込み中…"; imgPop.onload = function(){imgPop.style.display="block"; window.status="";} imgPop.onclick = function(){d.body.removeChild(imgPop);imgPop=null;} imgPop.title = "マウスクリックで閉じます"; } }
- ベストアンサー
- JavaScript
- IEだけで動きません。Javascriptに関する質問です。
IEだけで動きません。Javascriptに関する質問です。 初心者です。よろしくお願いします。 下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。 ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。 他のブラウザでは動きました。 どうしてでしょう？ 悩んでいます。 どなたか教えてください。よろしくお願いいたします。 <html> <head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script> </head> <body> <div id="container"> </div> <div id="menu"> <ul> <li><a href="javascript:changeObj('a.htm')" title="a">a</a></li> <li><a href="javascript:changeObj('b.htm')" title="b">b</a></li> <li><a href="javascript:changeObj('c.htm')" title="c">c</a></li> </ul> </div> </body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html> <head> <script type="text/javascript" src="bbb.js"></script> </head> <body> <div id="page-height"> <div id="a"><!--ここにページ内容--> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- ページの縦幅を取得する際の問題
ページの縦幅は書き込まれる情報量によって動的に変わります。この縦幅を取得する良い方法がないか探していたところ、Lightboxの関数でまさしく探していたものがありました。 function getPageSize(){ var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth,pageHeight) return arrayPageSize; } この関数を実行すると配列[0]に横幅、配列[1]に縦幅が返ってきます。しかしページ内にCSSでposition: absoluteで位置を指定したオブジェクトがあると、それを認識できないのか求める数値とは違う（小さい）ものが返ってきてしまいます。これはどのようにして対応すればよいのでしょうか？
- 締切済み
- JavaScript
- サファリでポジション指定のJavascriptがうまく作動しません
詳しい方ぜひお力をお借りしたいのですが。 以前IE用で教えていただいたオンマウスでボックスを中央に配置する スクリプトを教えていただいたのですが、Safariですとこれがうまく 作動してくれません。IEではどんなモニタの大きさでもど真ん中にいくのですが、Safariですと左に寄ってしまうのです。 これをSafariでも正常に機能させるにはどのような記述にすればよいのかを考えていましたがうまくいかないので質問させていただきます。 function show( text ) { var el = document.getElementById( "box" ); document.getElementById( "text" ).innerHTML = text; el.style.visibility = 'hidden'; el.style.display = 'block'; var width = el.clientWidth; el.style.display = 'none'; el.style.visibility = 'visible'; el.style.left = ( document.body.clientWidth - width ) / 2 + document.body.scrollLeft; el.style.top = ( document.body.clientWidth - width ) / 4 + document.body.scrollTop; el.style.display = 'block'; } function hide() { var el = document.getElementById( "box" ); el.style.display = 'none'; } で、 el.style.left = ( document.body.clientWidth - width ) / 2 + document.body.scrollLeft; el.style.top = ( document.body.clientWidth - width ) / 4 + この部分でIEでは問題ないのですが、Safariでは機能しません。 どうかお助けください。 よろしくお願いいたします。
- 締切済み
- JavaScript
- 3回目ワクチン接種が始まりましたが、オミクロン株の出現もあり、今後も3回目の接種が必要なのか疑問です。
- 医療従事者を対象にした3回目ワクチン接種が開始されましたが、オミクロン株の影響も不安要素です。
- ワクチン接種の3回目について、みなさんは様子を見るべきか、それとも積極的に接種すべきか迷っているでしょうか。
お礼
複雑な質問に回答ありがとうございます。 document.writeをすると元々のHTMLの要素は消えてしまいますので、間違いなくエラー >>この部分知らずにトレースしてデバッグしてました。 FirefoxのDOM-TOOLで見たときに、消えていましたので、回答のとおりだと理解できました。 アドバイスありがとうございます。トレースしようと表示させた部分の document.writeを削除すると、動きが変な状態は解除されました。 おかげさまで思ったとおり動くようです。 感謝します。！