表示サイズの変更イベントを取得できるか

解決済

質問者：kztk
質問日時：2006/03/05 00:15
回答数：1件

テキストボックスのクリックイベントでそのテキストボックスの隣に<div>要素を表示しています。マウスホイールやメニューなどで表示サイズを変える（IEなら「表示」→「文字のサイズ」です）と、文書全体がズームするのにこのdiv要素だけがもとの配置で取り残されてしまいます。
表示サイズが変わったことをあらわすイベントがあればそのイベントで再配置すればよいと考えたのですが、そのようなイベントはあるのでしょうか。
あるいは他にうまいやり方があれば教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： Blaise
回答日時：2006/03/05 01:53

うーん。

そこで何がどんな風に起こっているのか、よく
つかめません。
推測ですが、その情況の変化を取得するような「イベント」はないような気がしますね。
でも、なければ作ればよいわけです。
文字のサイズをウォッチして、それがある大きさを超えた
ら報告するようにすればいいわけですよね。
それなら、こんな感じのでどうなのでしょうか。
<html>
<head>
<script type=text/javascript>
var i=5
function FtWatch(){
var obj=document.getElementById('fn');
if(i>20)alert('Watch the chars now!');
obj.style.fontSize=i +'px'
i++;
setTimeout('FtWatch()',500);
}
</script>
</head>
<body onload="FtWatch()">
<div id="fn">AAA</div>
</body>
</html>

この回答への補足

回答ありがとうございます。

やはり最終的にはそうなりますか・・・。
やりたいことをできるだけ単純化したサンプルを書いてみました。テキストをクリックするとdiv要素がちょうどテキストボックスの右端に入るように現れますが、この状態で表示サイズを変更すると、div要素の配置が崩れてしまいます。クリックすれば再度期待通りの位置に配置されなおしますが、イベント云々ではなくそもそもスマートな書き方があるのかな、とも思っているところです。
-------------------------------------------------
<html>
<head>
<script language="Javascript">
var foo = null;
function bodyOnLoad(){
foo = document.createElement("div");
foo.innerHTML = "A";
foo.style.backgroundColor = "gray";
foo.style.display = "none";
foo.style.position = "absolute";
document.body.appendChild(foo);
}
function txtOnClick(element){
var elementPosition = getElementPosition(element);
foo.style.height = (element.offsetHeight - 2) + "px";
foo.style.width = (16-1) + "px";
foo.style.left = (elementPosition.x + element.offsetWidth - 16) + 'px';
foo.style.top = (elementPosition.y + 1) + 'px';
foo.style.overflow = "hidden";
foo.style.display = "block";
element.onmousedown = function(){foo.style.display="block";};
}
function getElementPosition(element) {
var position = new Object();
position.x = element.offsetLeft;
position.y = element.offsetTop;
while(element.offsetParent) {
element = element.offsetParent;
position.x += element.offsetLeft;
position.y += element.offsetTop;
}
return position;
}
</script>
</head>
<body onload="bodyOnLoad();">
item1:<input type="text" id="txt1" onclick="txtOnClick(this);"><br>
item2:<input type="text" id="txt2" onclick="txtOnClick(this);"><br>
item3:<input type="text" id="txt3" onclick="txtOnClick(this);"><br>
</body>
</html>