ウィンドウの横幅の値を取るには?

[上に] [前に] [次に]
star [E-Mail] 2000/02/03(木) 11:10:25
ウィンドウの横幅の値を得るのに、
NSだと、window.innerWidth で値が取れるようなのですが、
IEでは上手くいきません。IEで同様の効果が得られるものってありますか?
レイヤーがWindowの右端から左端へ移動してまた右端から現れる…という感じのアニメーションを作りたいので一番右端の値=ウィンドウの横幅を知りたいのですが…。

かえる 2000/02/03(木) 11:32:02
clientWidthです。
詳細は↓に。
http://www.microsoft.com/japan/developer/library/psdk/jpisdk/dhtml/measure/measuring.htm#chp_measuring

star [E-Mail] 2000/02/03(木) 13:43:13
とりあえず、Windowの右端から左端へ移動してまた右端へ…というアニメは作れました。
Netscapeの場合はwindow.innerWidthでwindowの横幅の値を使い、
IEの場合はleft=100%からスタートしてパーセンテージで移動させるようにしました。
(Netscapeでは何故かパーセンテージで移動させることができませんでした…)
ソースは以下の通りです。

------------
/* メニューを右から左へ移動させます */
var windowX=window.innerWidth;
var startPosNN=windowX; /* for NN */
var startPosIE=100; /* for IE */

function checkStartPos(){
clearTimeout(100);
if (document.layers) {document.layers.books.left=startPosNN; slideLayer(startPosNN);}
if (document.all)    slideLayer(startPosIE);
}

function slideLayer(currentPos){
currentPos -= 2;

/* for NN */
         if (document.layers){
         document.layers.books.left=currentPos;
         if (currentPos > -120) setTimeout('slideLayer('+ currentPos +')',10);
         else {windowX=window.innerWidth;startPosNN=windowX; setTimeout('slideLayer('+startPosNN+')',10);}
         }

         /* for IE */
         if (document.all)   {
         eval("document.all.books.style.left ='" + currentPos +"%'");
         if (currentPos > -120) setTimeout('slideLayer('+ currentPos +')',10);
         else setTimeout('slideLayer('+startPosIE+')',10);
       }
        }
---------end of script

かえるさんの言っていたclientWidthを使ってみようとしたのですが、どうやって使っていいのかわかりませんでした。
var windowX=body.clientWidth;
ではダメですよね?(^-^;;
どうやってつかったらいいのでしょう?

かえる 2000/02/03(木) 17:38:28
var windowX = window.document.body.clientWidthです。
マージン、パディング、スクロールバー、枠線を除いたクライアント領域の幅をピクセル単位で取得できます。

star [E-Mail] 2000/02/03(木) 20:32:26
かえるさんご解答ありがとうございます。
早速やってみました。
が。
---
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var windowX=window.document.body.clientWidth;
document.write(windowX);
</SCRIPT>
</BODY>
---
のように<BODY>の中に書き込んだ場合は上手くいくのですが、
---
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var windowX=window.document.body.clientWidth;
</SCRIPT>
</HEAD>
---
のように<HEAD>の中から値を取ろうとすると、
「window.document.body.clientWidthはオブジェクトではありません」というエラーがでてしまいます。
私がやりたいのは後者なのですが、何か上手い方法はあるのでしょうか?

ばびん 2000/02/03(木) 23:21:08
document.body.clientWidth って body の幅を測るわけだから、
bodyが表示される前はだめです。
そのへん、window を測るNetscapeほど融通はきかないっす。
function にして onLoad イベントで拾うってのはどうです?

star 2000/02/04(金) 10:50:58
[[解決]]
onLoadイベントで拾えました!ありがとうございます!
ソースは以下の通りです。動作確認はMac NN4.7、IE4.5 です。
------------
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
/* レイヤーは右端から左端へ動き、また右端から現れます */

function checkStartPos(){
/* for NN */
if (document.layers) {
var startPosNN=window.innerWidth;
slideLayer(startPosNN);
}

/* for IE */
if (document.all)    {
var startPosIE=window.document.body.clientWidth;
slideLayer(startPosIE);
}
}

function slideLayer(currentPos){
currentPos -= 2;

/* for NN */
if (document.layers){
document.layers.MoveLayer.left=currentPos;
if (currentPos < -200) currentPos = window.innerWidth;
}

/* for IE */
        if (document.all){
document.all.MoveLayer.style.left =currentPos;
if (currentPos < -200) currentPos = window.document.body.clientWidth;
        }

        setTimeout('slideLayer('+currentPos+')',20);

}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="checkStartPos();">

<DIV ID="MoveLayer" STYLE="position:absolute; left:100%; visibility:visible;">
画面の右から左へ動きます。
</DIV>
</BODY></HTML>
-------------end of source

[上に] [前に] [次に]