サブウィンドウの動きを制御したい!

このQ&Aのポイント
  • 親ウインドウのボタンをクリックすると、サイズ400×300のサブウィンドウがモニタ画面の左上(0,0)にオープンするようにしています。
  • サブウィンドウは、モニタ画面に現れた後、下にすべってタテ位置のみモニタ画面中央に行き、そして右方向に滑ってモニタ画面の中央に配置されるようにしたいです。
  • 現在のスクリプトではうまく動作しません。if文の条件に問題があるのかもしれませんが、未熟なため原因を特定できません。助けていただけると嬉しいです。
回答を見る
  • ベストアンサー

サブウィンドウの動きを制御したい!

親ウインドウのボタンをクリックすると、 サイズ400×300のサブウィンドウがモニタ画面の左上(0,0)にオープンするようにしました。 このサブウィンドウは、モニタ画面に現れると同時に、 まずは、ツツーッと下にすべってタテ位置のみモニタ画面中央に行き、 行き着いたところで今度は、右方向にツツーッと滑って、 最後にはモニタ画面のど真ん中に配置されるようにしたかったのです。 そこで、サブウィンドウ内には、以下のスクリプト(onload)を書きました。 <script language="javascript"> <!-- var disW= screen.availWidth; var disH= screen.availHeight; var cX=disW/2-200; var cY=disH/2-150; var pX=0; var pY=0; var timerID; function moveWin(){ if(pY < cY){ pY+=5; window.moveTo(0,pY); timerID=setTimeout("moveWin()",1); } if(pY==cY){ pX+=5; window.moveTo(pX,cY); timerID=setTimeout("moveWin()",1); } else{ clearTimeout(timerID); } } //--> </script> でも、うまくいきません。 ふたつめのifがいけないのでしょうが、 未熟なためどうしてなのかわかりません。 どなたか、教えてください! よろしくおねがいします。

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

  • ベストアンサー
  • madman
  • ベストアンサー率24% (612/2465)
回答No.1

まず、2つ目のif文にelseをつけないと、最後のelseが有効になってしまい、setTimeoutがキャンセルされます。 その次に、pY==cYになることはありませんのでpY>=cYで判定するか、pY==cYになるように作り変える必要があります。 また、こう換えると右へスライドしたウィンドウを停めるところがありませんので、最後のelseはX軸を停める必要があります。 書き換えると以下のようになりました。 ---- <script language="javascript"> <!-- var disW= screen.availWidth; var disH= screen.availHeight; var cX=disW/2-200; var cY=disH/2-150; var pX=0; var pY=0; var timerID; function moveWin(){ if(pY < cY){ pY+=5; window.moveTo(0,pY); timerID=setTimeout("moveWin()",1); } else if(pY>=cY){ pX+=5; window.moveTo(pX,cY); timerID=setTimeout("moveWin()",1); if(pX>=cX) { clearTimeout(timerID); } } } //--> </script>

omokawa
質問者

お礼

madmanさんへ 簡潔で完璧なご回答でした。 本当にありがとうございました。

関連するQ&A

  • サブウィンドウ関係のコードの改造(その2)

    文末のコードは http://oshiete1.goo.ne.jp/qa3161625.html にてNo2ご教示いただいたものですが、 (1) 1回サブウィンドウを開くと2回目以降、うんともすんとも言わなくなってしまいます(スクリプトエラーにもなりません)。なぜでしょうか? (2) 開いたサブウィンドウのソースをみると、 <HTML></HTML>としか書かれていませんが、タイトルは「題名1」とセットされてますし画像も表示されています。なぜでしょうか。 開いたサブウィンドウの上下左右の余白をゼロにしたいので <body style="margin: 0px;">などとしたいのですが。 以上、よろしくお願い致します。 <html> <head> <script> function openNewWin(url,winTitle){ //画像オブジェクト作成 var img = new Image(); img.src = url; //画像のロード後に窓を開く img.onload=function(){ //画像の横幅 var width = this.width; //画像の横幅でabout:blankを開く var Win=window.open("", "new", 'scrollbars=yes,top=0,left='+(getScreenWIDTH()-width)+',width='+width+',height='+(getScreenHEIGHT()+20)); //Winのdocumentにタイトルをつける Win.document.title = winTitle; Win.document.body.innerHTML = '<img src="' + this.src + '" onclick="window.close();" alt="閉じる">'; } } function getScreenHEIGHT(){ if(!!window.screen){ return screen.height-80; }else{ return null; } } function getScreenWIDTH(){ if(!!window.screen){ return screen.width-12; }else{ return null; } } // --> </script> </head> <body> <a href="#" onClick="openNewWin('myimg1.gif','題名1')">開く1</a> <a href="#" onClick="openNewWin('myimg2.gif','題名2')">開く2</a> </body> </html>

  • サブウィンドウから親ウィンドウのファンクションを起動

    おせわになっております。 サブウィンドウから親ウィンドウのファンクションを起動する方法について困っています。 親ウィンドウから var subWin = window.open("a.html", "sub") でオープンしたサブウィンドウを閉じる場合に サブウィンドウから親ウィンドウの function sub_close() { subWin.close(); } を呼び出して閉じる処理をしています。 (サブウィンドウでwindow.opener.sub_close()) #これは正常に処理されます。 ここで問題なのですが、サブウィンドウがフレームの場合に、フレームセットされたHTMLから window.opener.sub_close() というような方法では親画面の操作ができないのでしょうか?(できませんでした。) 初歩的な質問で申し訳ないのですが、何かよい方法があれば教えてください。 宜しくお願いします。

  • サブウィンドウの画面制御について

    過去スレを確認しましたが、同じようない内容のモノがなかったため質問させて頂きます。 サブウィンドウ画面の制御についての質問なのですが、 親→子→孫といったように3画面同時に表示する場合があります。 この時、親を閉じると子と孫も、子を閉じると孫も同時に閉じたいと思っています。 しかし親から子、子から孫といったように一階層だと閉じることができますが、 親から孫と二階層になると閉じる事ができません。 どなたか解決方法をご存知の方がおられましたら、 ご教授頂けますでしょうか。 よろしくお願いします。 実装内容は以下のようになっています。 (必要部分以外は省略しています) ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ----------------子画面用JavaScript-------------------- ◆子を開く function openWin1(){ subWin1 = window.open(url,"subWin1",""); } ◆子を閉じる function closeWin1(){ if(typeof(subWin1) != 'undefined') { // 子ウィンドウを閉じる subWin1.close(); } // 孫ウィンドウを閉じる closeWin2(); } ----------------------------------------------------- ---------------孫画面用JavaScript-------------------- ◆孫を開く function openWin2(){ subWin2 = window.open(url,"subWin2",""); } ◆孫を閉じる function closeWin2(){ if(typeof(subWin2) != 'undefined') { // 孫ウィンドウを閉じる subWin2.close(); } } ----------------------------------------------------- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++

  • JavascriptのtimerIDの意味

    いつもお世話になっております。 現在、Javascriptの勉強をしており、その過程でカウントダウンタイマーを作成しています。 テキスト通りにsetTimeout()メソッドなどを使用しているのですが、timerIDの意味が理解できず困っております。 タイマーを識別するID番号ということはなんとなく理解できるのですが、下記コードのelse if (timerID)やtimerID=0とは何を意味しているのでしょうか。 if文の条件がtimerIDとはどういうことなのか。 timerIDの値を0にする必要性は何なのか。 教えてください。 <doctype! html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Javascript</title> <script type="text/javascript"> window.onload = init; function init(){ document.form1.start.onclick = start; document.form1.reset.onclick = stop; } var timerID; function start(){ count = parseInt(document.form1.time.value); if (count<=0){ count = 0; return; } else if (timerID){ count--; } document.form1.time.value=count; if (count==0){ clearTimeout(timerID); timerID = 0; alert("時間です"); return; } timerID = setTimeout("start()", 1000); } function stop(){ document.form1.time.value=0; if(timerID){ clearTimeout(timerID); timerID=0; } } </script> </head> <body> <h1>カウントダウンタイマー</h1> <form name="form1"> 時間<input name="time" type="text" size="3">秒<br> <input name="start" type="button" value="スタート"> <input name="reset" type="button" value="リセット"> </form> <script type="text/javascript"> </script> </body> </html>

  • サブウィンドウ

    JavaScriptの得意な方、知っている方に質問です。 下記のように指定した場所をクリックすると、サブウィンドウが表示されますが、そのサブウィンドウの高さと幅は自動的にしたいです。 その方法を存知であれば教えてください。 <script Language="JavaScript"> <!-- subWin = new Array(); swNum = new Array(); function openSW(sURL,sID) { swName = "subwindow"+sID; subWin[sID] = window.open(sURL,swName,"width=400,height=700"); swNum.unshift(sID); for (i=swNum.length-1; i>=0; i--) { if ( isFinite(swNum[i]) && subWin[swNum[i]]) subWin[swNum[i]].focus(); } } // --> </script> <a href="javascript:openSW('ファイル名',0)"><U>テスト</U></a> よろしくお願いします。

  • サブウィンドウ関係のコードの改造

    以下に、1、2と二つのHTMがあり、1をベースに、下記の改造をしたいと思います。 (1) 1.htmの小窓を、IEでしか動かないWebページダイアログ(showModelessDialog)でなく、 2.htm にあるような、win.openに変えたいのですが、移植の仕方がわかりません。1.htmをどう書き換えたらいいですか。 (2) 1.htmにあるmyimg.gifの幅(width)を取得して、dialogWidthにセットしたいのですが、その書き方をご教示ください。 高さ(height)は、2.htmにある「getScreenHEIGHT()」をそのまんま流用します。 (3) 1.htm に「href="#"」ありますが、「href="javascript:function voi(){};voi()"」などと記述したほうがいいのでしょうか。 「voi(){};voi()」なんてどこからコピペしてきたキーワードなのか、自分でもわからないのですが。 1.htm ------------------------ <html> <head> <script> function openKomado(url,winTitle) { var Win=showModelessDialog(url,window, 'center:yes;scroll:no;status:no;help:no;edge:raised;dialogWidth:100px;dialogHeight:100px',winTitle); with (Win.document) { write('<html><head><title>' + winTitle + '</title></head><body>'); write('<img src="' + url + '" onclick="window.close();" alt="閉じる">'); close(); } } </script> </head> <body> <a href="#" onClick="openKomado('myimg.gif','題名')">開く</a> </body> </html> 2.htm ------------------------ <html> <head> <script> function openNewWin(url, name){ window.open(url, name, 'scrollbars=yes,top=0,left='+(getScreenWIDTH()-680)+',width='+680+',height='+(getScreenHEIGHT()+20)); } function getScreenHEIGHT(){ if(!!window.screen){ return screen.height-80; }else{ return null; } } function getScreenWIDTH(){ if(!!window.screen){ return screen.width-12; }else{ return null; } } </script> </head> <body> <a href="#" target="new" onClick="openNewWin('./sample.htm','a'); return false;">開く</a> </body> </html>

  • サブウィンドウに背景色をつけたいのですが・・・

    今仕事でホームページを初めて作成しています。 そこで、30秒程度したら自動的に消えるサブウィンドウを作成したのですが、背景色がぜんぜんつきません。 いったいどこに、背景色のスクリプトを表示したらいいのですか。教えてください。 初心者でわからないので、全部のせてしまいました・・・ 要領わるくてすいません。 function createSubWindow() { subWindow = window.open("","SubWindow","width=370,height=220"); subWindow.document.writeln("<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=Shift_JIS'>"); subWindow.document.writeln("<HTML>"); subWindow.document.writeln("<HEAD>"); subWindow.document.writeln("<TITLE>Whata's New?</TITLE>"); subWindow.document.writeln("<SCRIPT LANGUAGE='JavaScript'>"); subWindow.document.writeln("<!--"); subWindow.document.writeln("function setTimer() {"); subWindow.document.writeln("window.setTimeout('window.close()', 30 * 1000);"); subWindow.document.writeln("}"); subWindow.document.write ("//--"); subWindow.document.writeln(">"); subWindow.document.writeln("</SCRIPT>"); subWindow.document.writeln("</HEAD>"); subWindow.document.writeln("<BODY onLoad='setTimer()'>"); subWindow.document.writeln("</BODY>"); subWindow.document.writeln("</HTML>"); subWindow.document.close(); } function closeSubWindow() { if(!subWindow.closed) { subWindow.close(); } } //--> </SCRIPT>

  • サブウィンドウを表示させたいのですが・・・

    こんにちわ。 ちょっとした(といっても、ワード文書1ページ分)説明をサブウィンドウで表示させたいのですが、 できません。 以下がソースです。 <メインウィンドウ> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function winOpen(winName,url,W,H){ //サブウインドウオープン var WinD11=window.open(url,winName,'scrollbars=1,width='+W+',height='+H+''); WinD11.document.close() } //--> </SCRIPT> </HEAD> <BODY> <A HREF="javascript:function voi(){};voi()" onClick="winOpen('','link1.html',400,200)"> この文字をクリックすると説明ウインドウ1が開きます </A> </BODY> 何が間違ってるのかご指導いただけないでしょうか? よろしくお願いいたします。m(__)m

  • サブウィンドウの親の位置

    こんにちわ。 メインウィンドウから、サブウィンドウを開くようになっています。 メインウィンドウが縦に長く(文章量が多い)、下の方のリンクでサブウィンドウを開いたときに、メインウィンドウの画面がページの上の方に移ってしまいます。 クリックした場所を維持したいのですが、調べてみたのですが、やり方がわかりません。 すみませんが、よろしくお願いします。 <script> <!-- function MM_openBrWindow(theURL,winName,features) { window.open(theURL,winName,features); } //--> </script> ▼メイン・リンク部分 <a href="#" onClick="MM_openBrWindow('info.html#1','info','width=380,height=500,scrollbars=yes,resizable=yes')">※1</a>

  • 以前画面100%表示できる方法を教えてもらったものですが、・・・

    以前画面100%表示できる方法を教えてもらったのですが、最近になって困ったことになりました。 それは、あっちこっちで確認をしましたところ、実はMACでは何ともなかったものの、Winのパソコンで変な場所に大体正確にではありませんが、画面端から約100×100の位置に出てしまうパソコンが何台かあるのに気が付きました。 ソースを書きます。 <SCRIPT language="JavaScript"> <!-- function newWin(){ w = screen.availWidth ; h = screen.availHeight ; window.open("op_01q.html","newWin","width="+w+",height="+h) ; window.moveTo(-1,-1) ; } //--> </SCRIPT> で、できるとは思いますが、何か足りないのか分かりません。 どうか宜しくお願いします。

専門家に質問してみよう