• ベストアンサー

ウィンドウサイズの変更を滑らかに取得したい

<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> -------------------------------------------------------------- 以上のような、ブラウザのウィンドウサイズを取得する コードを書いたのですが、滑らかに高さと幅が取得出来ずに困ってます。 イメージとしては、ウィンドウサイズをマウスで変更すると 高さと幅の数値がもっと滑らかに細かく変化するように したいのです。 どなたか回答お願いします。

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

実験してみるとわかりますが、ブラウザによってイベントの発生やインターバルで指定された処理の制御が違っているようです。 ＞もっと滑らかに細かく変化するように～ 多分、IEかOperaで試されていると思いますが、リサイズ中はインターバルの処理が制限されてしまうみたい。（IEは同じリサイズでも縮小するときに限ってのようですが…） IE（6.0）（7・8は不明）では#1様の回答のイベント処理にしたほうが、全体的に滑らかになります。 FF（3.5）だとイベント処理よりもインターバルで処理したほうが滑らかです。（インターバルを10/1000secくらいにしてもほとんど変わらないと思います。） Opera（10）では、どちらにしてもリサイズ中はスクリプトの処理が止まった状態になってしまうようで、滑らかにはなりません。 ・・・というわけで、回答にはなってませんけれど。

kyotokyo
質問者

お礼

やはりそうですよね・・ JSやCSSはブラウザ毎によって動作が違うので めんどくさいです・・・回答ありがとうございます。

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

描画の問題なので滑らかさは微妙ですが、インターバルするよりは onresizeの方が効率的かもしれません。 window.onresize=function(){ test();} window.onload=function(){ test();}

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptでプルダウンのサイズを取得

    JavaScriptにてプルダウンのサイズ(<option>の数)を取得したいと思っています。 document.getElementById("pulldown").length　にて取得できると思うのですが 試してみたところ無反応でした。どう書けばよろしいのでしょうか。 <html> <head> 　　　　<script type="text/JavaScript"> 　　　　　　　　　　　　　　alert(document.getElementById("pulldown").length); 　　　　</script> </head> <body> <form name="form"> <select name="pulldown" id="pulldown"> <option value="5">5</option> </select> </form> </body> </html>

  • フレームの幅

    階層が、 -index-menu 　　　-mainframe-mainmenu 　　　　　　　　-main となってる場合に、menuで、画像をクリックすると mainmenuの幅を変更させるにはどうすればいいですか？（触れたら画像の大きさ変更と連携しています） <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> <!--// function ChangeCols(VALUE) { if(document.all) {parent.document.all("mainmenu").cols = VALUE } if(document.getElementById){parent.document.getElementById("mainmenu").cols = VALUE } } //--> </script> </head> <body> <IMG src="imgsoko/menuon.bmp" height="35" width="90" name="chavo2" onMouseOver="document.chavo2.height=35;document.chavo2.width=160" onclick="ChangeCols('100,*')" onMouseOut="document.chavo2.height=35;document.chavo2.width=90"> </body> </html> ↑ではできないので質問させていただきました。

  • 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　バーコード読み取りについて

    バーコードを読み込んだ際に、重量だけ表示させたいので自分で考えてソースコードを書きましたが、実行されません。 下記のコードの何処を直せばいいかわかりません。教えてください。 <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> var textbox = document.getElementById("barcode"); function extract() { var textbox2 = document.getElementById("toridasi"); if(textbox.value !== null) { if (textbox.value.length > 47) { var amount = textbox.value.substr(22,3); textbox2.value =amount/10; } } } textbox.onchange = extract(); </script> </head> <body> バーコード: <input type="text" id="barcode" size="64" value="1"> <input type="button" value="部分取り出し" onclick="extract()"> <input type="text" id="toridasi" size="10" value=""> </body> </html>

    • ベストアンサー
    • HTML
  • JSのコードで保存ができません

    以下のコードなのですがnameの部分だけ保存ができません なぜなのでしょうか <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name1="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> </head> <body> <table border="3" align="center" style=border-spacing:0px;> <tr> <th width="20" height="30">Day</th> <th width="80">name</th> <th width="70">in</th> <th width="100">out</th> <th width="100">total</th> </tr> <tr> <th><input type="text" id="day" style="width : 30px; height : 20px;"></th> <td><input type="text" id="name" style="width : 80px; height : 20px;"></td> <td><input type="text" id="in_m" style="width : 50px; height : 20px;"></td> <td><input type="text" id="out_m" style="width : 50px; height : 20px;"></td> <td><input type="text" id="total" style="width : 50px; height : 20px;"></td> </tr> </table> <script> //保存関係 var day = document.getElementById("day"); var name = document.getElementById("name"); var in_m = document.getElementById("in_m"); var out_m = document.getElementById("out_m"); var total = document.getElementById("total"); window.onload = function() { var body_day = localStorage.getItem("day"); var body_name = localStorage.getItem("name"); var body_in_m = localStorage.getItem("in_m"); var body_out_m = localStorage.getItem("out_m"); var body_total = localStorage.getItem("total"); if (body_day != null) day.value = body_day; if (body_name != null) name.value = body_name; if (body_in_m != null) in_m.value = body_in_m; if (body_out_m != null) out_m.value = body_out_m; if (body_total != null) total.value = body_total; } day.onchange = function() { localStorage.setItem("day",day.value); } name.onchange = function() { localStorage.setItem("name",name.value); } in_m.onchange = function() { localStorage.setItem("in_m",in_m.value); } out_m.onchange = function() { localStorage.setItem("out_m",out_m.value); } total.onchange = function() { localStorage.setItem("total",total.value); } </script> </body> </html>

  • JavaScript表示切替の問題

    ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>

  • Ｔｈｉｃｋｂｏｘに表示されたページのアドレスを取得できないでしょうか？

    お世話になります 入力されたアドレスが実在するか調べたいのですがThickboxに表示されたホームページのアドレスを取得することはできないでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>chosproduce.com</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript" src="./js/thickbox.js"></script> <link rel="stylesheet" href="./css/thickbox.css" type="text/css" media="screen"> <script type="text/javascript"><!-- function addcheck() { url = document.getElementById("add").value; document.getElementById("hide").href = url + "?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=0&width=0"; document.getElementById("push").click(); document.getElementById("er").innerHTML = ""; checkurl = (Thickboxに表示されたアドレス); if(checkurl != url) { document.getElementById("er").innerHTML = "実在しません"; } tb_remove(); } //--></script> <style type="text/css"><!-- #hide { display:none; } --></style> </head> <body> <div> <input type="text" name="add" id="add"> <input type="button" value="check" onclick="addcheck()"> <a href="" title="addcheck" class="thickbox" id="hide"> <input type="button" value="c" id="push"> </a> <div id="er"></div> </div> </body> </html> という感じにしています window.openだと(window名).location.hrefで多分取れると思うのですが開いて閉じると画面がパチッとなってしまうのでできません thickboxだとwindow名（iframe仕様になってるのでiframe名かな？）が何かお分かりになる方いらっしゃいますでしょうか？

  • HTMLでテキスト入力し表示させる

    HTMLでテキストボックスに文字を入力し、表示させたいのですがうまくできません。 見た目はできているようなのですが、文字が表示されない状態です。 コードを記載しますので、お手数をお掛けしますがご教授頂けますでしょうか。 <html> <head> <script> function add(){ document.getElementById("target").innerText = document.getElementById("name").value; target = document.getElementById("output"); document.write(target); } </script> </head> <body> <p>名前を入力してください</p> <input id="name" name="name" type="text" size="30" onkeydown="update_field();"> <br> <input type="button" onclick="add()" value="実行"> <form action="index.html" method="post"> <br> <input type="submit" name="exit" value="戻る"> </form> </body> </html>

  • サブウインドウのサイズ等の情報を取得したい

    サブウインドウを開いた後、そのサイズを手でリサイズして、 その後、clientwidth等の情報を入手したいと考えています。 情報入手のところがうまく行かず、２日悩んでいます。 以下のサンプルプログラムを見つけ、その通りに実行しましたが 動作しません。（alert"A"は実施されますが"B"は実施されない おそらく、clientwidthの情報をGetする際に問題がありそれ以降実行されていない） 何か環境等悪いのでしょうか？行き詰っています お教えいただきたくお願い申し上げます。 <script Language="JavaScript"><!-- function setCenter() { subWin = window.open("Hogegoge.html","sub","width=620,height=480"); scrnW = screen.width; scrnH = screen.height; alert("A"); winW = subWin.document.body.clientWidth; alert("B"); winH = subWin.document.body.clientHeight; x = (scrnW - winW) /2; y = (scrnH - winH) /2; subWin.moveTo(x,y); } // --></script> <form> <input type="button" value="中央に移動" onClick="setCenter()"> </form>

  • 子ウィンドウの情報を取得したい

    window.openを複数行い、各ウィンドウの情報を取得したいのですが 配列変数などで管理せずwindowなどで取得は可能でしょうか？ 試しに作成したソースです --ココカラ(oya.html)-- <html> <head> <script type="text/javascript"> <!-- //この方法で取得ができるが var koList = new Array(); function openKoA(){ kowin = window.open("ko.html", "kowin" + koList.length); koList.push(kowin); } function koListA(){ for(i in koList){alert(koList[i].document.getElementById("t1").value);} } // 配列で管理せずにwindow等にある情報で取得したい function openKoB(){ window.open("ko.html"); } function koListB(){ alert("子供リストなど"); //window.childNodes とか } --> </script> </head> <body> <input type="button" value="openKoA" onclick="openKoA()"> <input type="button" value="koListA" onclick="koListA()"> <br> <input type="button" value="openKoB" onclick="openKoB()"> <input type="button" value="koListB" onclick="koListB()"> </body> </html> --ココマデ(oya.html)-- --ココカラ（ko.html）-- <html> <body> <input type="text" id="t1" value="aa"> </body> </html> --ココマデ(ko.html)-- 以上、よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する