JavaScriptでの画面サイズ固定とリサイズについて
- JavaScriptを使用して、WinとMacの両方で画面サイズを固定し、リサイズする方法について教えてください。
- 現在、JavaScriptを使用してHPを作成しています。Win版IE6.0とNN7.1、Mac版NNでは動作確認ができていますが、Mac版IEでは動作しません。
- HPの仕様は、Frameを使用し、上・中・下の3つに画面を分けており、JavaScriptはフレーム上の中で使用しています。
- ベストアンサー
onResize を Win と Mac で動作させたい
現在、JavaScriptを組み込んでHPを作成しています。 Win版IE6.0,NN7.1,Mac版NNでは動作の確認ができているのですが、 Mac版IE(すみません、バージョンが不明です)では動作せず頭を悩ませています。 もし原因がおわかりの方がいらっしゃいましたら、ご教示下さい。宜しくお願い致します。 JavaScriptで行いことは以下の二つです。 ・ページにアクセスした際に、画面の大きさを固定する。 ・画面(ブラウザ自体)の大きさが変更された際に、もとの大きさにリサイズする。 MacのIEのみ上記二つが動作しません。 HPの仕様は以下の通りです。 ・ Frameを使用し、上・中・下と3つに画面を分けています。このFrameは全てリサイズ禁止です。及びスクロールバーも表示しません。 ・ フレーム上の中でJavaScriptを使用しています。 ・ JavaScriptは外部ファイルで保持しています。 以下に、JavaScriptを記載いたします。 ＜外部ファイル＞ function winResize(width, height) { if ( navigator.appName == "Netscape" ) { window.parent.innerWidth = width; window.parent.innerHeight = height; } else { // IE var innerWidth = window.parent.document.body.clientWidth; var innerHeight = window.parent.document.body.clientHeight; // まず横 if( innerWidth == 760 ) { // 特に何もしない } else { var temp = 760 - innerWidth; window.parent.resizeBy( temp, 0 ); } // そして縦 if( innerHeight == 500 ) { // 特に何もしない } else { var temp = 500 - innerHeight; window.parent.resizeBy( 0, temp ); } } ＜フレーム上内の記述/ HEAD 内に記述＞ <script language="JavaScript"> <!-- function changeSize() { winResize(760,500); } window.onresize=changeSize; window.onload=changeSize; //--> </script>
- tehu
- お礼率82% (38/46)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
BODYタグで <body onLoad="changeSize()" onResize="changeSize()"> のように書いておいたらどうでしょうか？ 但し、Mac版IE4ですとBODYタグのonResizeの挙動がおかしくなるようです。 Mac版IEのバージョンを確認してから問題の切り分けをすることをお薦めします。
関連するQ&A
- 大きさを固定して、さらにぶるぶる・・・・
こんにちは、質問させてください。 JavaScriptでウィンドウの大きさをリサイズできないように固定し、 さらに、そのウィンドウを、ぶるぶる・・・と震えさせたいのですが、 その組み合わせ方がわかりません。 <html> <head> <title>無題ドキュメント</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript"> <!-- var shake_len = 30, shake_max = 5, shake_count = 0; function shake () { var x = 0, y = 0, n = shake_count % 4; if(n == 0) x = -shake_len; else if(n == 1) y = -shake_len; else if(n == 2) x = shake_len; else y = shake_len; window.moveBy(x, y); shake_count++; if (shake_count < shake_max * 4) setTimeout("shake();", 50); } //--> </Script> </head> <body onload="shake()" bgcolor="#FFFFFF" text="#000000"> </body> </html> と <scriptlanguage="JavaScript"> function changrsize(){ window.resizeTo(300,250); } window.onload=changesize; window.onresize=changesize; </Script> を組み合わせた感じのものを考えているのですが・・・・・。 教えてください！
- ベストアンサー
- JavaScript
- Ｊavascriptの質問です。
Ｊavascriptの質問です。 昨日からjavascriptを始めた初心者なのですが、すみませんが、以下のコードの不具合の訂正をお願いしたいのです。自分なりにあれこれやっては見ましたが、結論が見出せません。 昨日は、id="BOX" の部分を、windowをリサイズしたときに、縦横常に中央に表示させるといったものです。 問題点： (1)windowをリサイズたときに、動かない点 (2)ＤＯＣＴＹＰＥ宣言すると、まったく機能しない。（ＤＯＣＴＹＯＥ宣言とJAVASCRIPTの対応が理解できていないので。。とりあえず、ＤＯＣＴＹＰＥ宣言無しでも機能すればいいかな？と思っております。ＩＥ８とfirefox3での表示を目指しています。） 恐れ入りますがよろしくお願いいたします。 ■ＨＴＭＬ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="css/test1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- function changeStyle(y,x) { /*変数トレース*/ document.write("関数CALL\n"); document.write(y+"/"); document.write(x); /*CSSの書き換え（ＣＳＳ）を書き換えると位置をへんこうできるものと思っています。*/ document.getElementById("box").style.marginTop = y; document.getElementById("box").style.marginLeft = x; } // --> </script> <script type="text/javascript"> <!-- function relocate() { window.focus(); /*firefoxのwindowサイズとboxの大きさによりマージンを計算*/ if( 0 != window.innerHeight && window.innerHeight > 960){ y=((window.innerHeight - 960)/2); }else{y=0;} /*ＩＥのwindowサイズとboxの大きさによりマージンを計算*/ if( 0 != window.innerWidth && window.innerHeight >1100){ x=((window.innerWidth - 1100)/2); }else{x=0;} /**/ if( 0 != document.body.clientHeight && document.body.clientHeight > 960){ y=((document.body.clientHeight - 960)/2); }else{y=0;} if(0 != document.body.clientWidth && document.body.clientWidth > 1100){ x=((document.body.clientWidth - 1100)/2); }else{x=0;} /*CSSの変更*/ changeStyle(y,x); } //--> </script> </head> <body onResize="relocate()"> <!-- イベントハンドラセット（リサイズ時にＣＳＳ変更）こちらが問題のようです。 --> <div id="box">123456</div> <!-- 目的のボックス--> <script type="text/javascript"> <!-- /*オンロード時に１度ＣＳＳを変更する。もちらは動作します。*/ relocate(); // --> </script> </body> </html> ■ＣＳＳ @charset "utf-8"; /* CSS Document */ *{ margin: 0px; padding: 0px; } #box { background-color: #FF3300; height: 960px; width: 1100px; border: 100px none #999999; margin-top:0px; margin-left:0px; } よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- google マップ サイズ変更
グーグルマップで、windowsのサイズ変更をしたら、地図の大きさも材レクトに変わるという処理をしたく、ウェブを参考に作ったのですが、 ローカルだと、firefox,opera,ie6でできるのですが、 HPにuploadすると、operaでしか実現できません。他のだと地図サイズが変化しません。 どなたかアドバイスいただけたら幸いです。 //<![CDATA[ //スクリプト定義 var map; var latLng = new GLatLng(43,14); // 初期位置設定 function load() { resize(); if (GBrowserIsCompatible()) { //Google Maps 利用可能? map = new GMap2(document.getElementById("map")); // マップ1 map.setCenter(latLng, 13); // 起動時初期位置 } } function resize(){ var map_obj=document.getElementById("map"); var disp=getDispSize(); map_obj.style.width=disp.width-100+"px"; map_obj.style.height=disp.height-100+"px"; } function getDispSize(){ if(document.all){ if(window.opera){ return {width:document.body.clientWidth,height:document.body.clientHeight}; } else { return {width:document.documentElement.clientWidth,height:document.documentElement.clientHeight}; } } // NN else if(document.layers || document.getElementById){ return {width:window.innerWidth,height:window.innerHeight}; } } //]]>
- ベストアンサー
- その他（プログラミング・開発）
- Javascriptで画面の切り替え
Javascriptで画面の切り替えをしたく、 ソースを書いたのですが、 ブラウザの判定を入れたところ、 (今のところIEとFFだけで確認しています。) 全く動かなくなりました。 IE画面の左下に警告マークが出ているので 構文が間違っているようなのですが、 分かりません 解決策を教えていただけないでしょうか。 よろしくお願い致します。 ----------以下ソース---------------------- <HTML> <HEAD> <TITLE>::::Antique Messiah::::</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <link href="messiah.css" rel="stylesheet" type="text/css"> <script language="javascript"> function ImageUp() { var isIE = (navigator.appName.substring(0,9)=="Microsoft"); alert(isIE); function check(){ if(isIE) alert("fftart"); window.open("top.html","","WIDTH=600,HEIGHT=600"); window.opener = ""; window.close(); else alert("fftart"); window.open("top.html","","WIDTH=600,HEIGHT=600"); top.name = 'CLOSE_WINDOW'; var wid = window.open('','CLOSE_WINDOW'); top.close(); } } function changesize(){ window.resizeTo(800,700); } window.onload=changesize; window.onresize=changesize; </script> </HEAD> <BODY onLoad="changesize(), setTimeout(ImageUp,3000)"> ～中略～ </body> <html>
- ベストアンサー
- CSS
- レイヤーを使うときに妙なスクリプトが入る
ホームページ作成ソフトでレイヤーを使うと、自動的に以下のようなスクリプトが追加されてしまいますが、いったいなんのためのスクリプトですか？ ホームページ作成ソフトは、DreamWeaver4です。 <script language="JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); // --> </script> これが入らないと、ネットスケープの4.Xでレイヤーの中でスクリプトを実行するとエラーになってしまいます。
- 締切済み
- JavaScript
- ネスケ４で外部JavaScriptを読みこむと問題が発生しやすいですか？
ネスケ４でブラウザのウィンドウをリサイズすると、layerが崩れるなどいろいろ問題がおこるため、 下記のような常套手段で、それを回避する例があるかと思います。。 <script type="text/javascript"> <!-- NS4 = document.layers; if (NS4) { origWidth = innerWidth; origHeight = innerHeight; } function reDo() { if (innerWidth != origWidth || innerHeight != origHeight) location.reload(); } if (NS4) onresize = reDo; //---> </script> そこで質問なのですが、 どうもいろんなサイトを見てみると、 いろいろ外部JavaScriptを読み込んでいるページでも、 この記述だけはhtmlにベタ書きしている例しか見あたりません。 NetScape4 で、外部JavaScriptを読みと問題が起きやすいのでしょうか？ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ●Netscape4で外部CSSを読みこむと問題が発生しやすいことは、いくつかのページで知りました。 ●旧来の<script>タグのかきかたって、「<script language="Javascript">」ですが、 W3Cに準拠したモダンプラウザ（？）だと「<script type="text/javascript">」ですよね。 そのことは関係するでしょうか？ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 以上、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 教えてください！レイヤーを描くとなぜかうまくいきません
最近、以前買ったDreamweaverMX2004を使って趣味のホームページを作成しようとしているのですが、レイヤーを描くと、タイトルタグの後に、 <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> というタグが入ってしまって。Ｆ１２でサイトのプレビューを見ると必ず、 「セキュリティ保護のため、コンピューターにアクセスできるアクティブコンテンツは表示されないよう、インターネットエクスプローラーで制限されています。～ここをクリックしてください」とブロックがかかってしまいます。 ＩＥのセキュリテイ設定で表示しないようにできるかもしれませんが、なんでだろうと四苦八苦してましたら、上記が原因なのかあと。 テーブルではなくてレイヤーで作成してみたいのですが、レイヤーを描いてもこのJavaが記述されないような方法があるのでしょうか？ どなたか設定方法や対策、ご存知ないでしょうか。 よろしくお願いします
- ベストアンサー
- グラフィックソフト
- ブラウザが判別出来ない。
お世話になっております。 JavaScriptの本を購入しました。 その本にブラウザ判定のスクリプトが掲載されており、それをそのままアップしたところ、私はIE6なのにIE4と判別されてしまいました。 下記がそのスクリプトです。 ちなみに、私はXPのIE6です。 このスクリプトはこれで完璧なのでしょか？ また、出来ましたら、このスクリプトを試していただけたらと思うのですが・・・よろしくお願い致します。 <script language="JavaScript"> <!-- if( navigator.appVersion.charAt(0)==4){window.location.href = "nn4.html"} // NN Ver4 の場合 if( navigator.appVersion.charAt(0)==5){window.location.href = "nn5.html"} // NN Ver5 の場合 if( navigator.appVersion.charAt(0)==6){window.location.href = "nn6.html"} // NN Ver6 の場合 } if( navigator.appName.charAt(0)=="M"){ if( navigator.appVersion.charAt(0)==2){window.location.href = "ie2.html"} // IE Ver2 の場合 if( navigator.appVersion.charAt(0)==3){window.location.href = "ie3.html"} // IE Ver3 の場合 if( navigator.appVersion.charAt(0)==4){window.location.href = "ie4.html"} // IE Ver4 の場合 if( navigator.appVersion.charAt(0)==5){window.location.href = "ie5.html"} // IE Ver5 の場合 if( navigator.appVersion.charAt(0)==6){window.location.href = "ie6.html"} // IE Ver6 の場合 } //--> </script> <noscript>JavaScript を使用しています。JavaScript を有効にしてください。</noscript>
- ベストアンサー
- JavaScript
- firefox だけ専用のCSSを表示させたいのですが、、、
firefox 専用のCSSを表示させたいのですが、 stylelink.js として var var_css=''; if(checkB.Mac) { if(checkB.SAF) { var_css="SAF"; } else if(checkB.IE52) { var_css="MacIE52"; } else if(checkB.IE5 || checkB.IE51 || checkB.IE6) { var_css="MacIE5"; } else if(checkB.NN6 || checkB.NN7) { var_css="MacNN6"; } else { var_css="common"; } } else if(checkB.Win) { if(checkB.IE) { var_css="IEGEK"; } else if(checkB.Win) { if(checkB.gecko) { var_css="firefox"; } else { var_css="common"; } } document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"/css/"+var_css+".css\" title=\"fontproperty\">"); としましたが 外部 firefox.css が上手く反映しません。 どうすればよいのでしょうか？ 御教授をお願いいたします。
- ベストアンサー
- JavaScript
- 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
お礼
ご回答ありがとうございます。 お礼が遅くなって申し訳ありません。 大変参考になりました(^-^) 頂いた回答を参考にさせていただいています。 まだちゃんと動いていないのですが、 もう少しのような気がします。 どうもありがとうございました。