読者です 読者をやめる 読者になる 読者になる

ひよっこPGのブログ

主に、技術メモや英語たまにギター関連のことも書いているブログです。

$(window).height()が効かなくてハマッタことについて

まず、$(window).height()が効かなくなったと知ったキッカケについて書きます。

DB処理などを追加した後にモーダルウィンドウの位置が変になりました。

ブラウザ : Firefox 24.0

上記動画のような状態です。

 

モーダルウィンドウの実装を見ると

top:$(window).height() /2 - currentModal.outerHeight() /2 + $(window).scrollTop()

上記がモーダルウィンドウの高さ部分の計算処理で、

どうも$(window).height()の値がおかしいというのが調べてわかりました。

 

原因は結論から書くと、

<HTML>の外にPHPのecho処理が実行されて

DOCTYPE宣言がなくなったためでした。

実際は、<!DOCTYPE html>ってちゃんと書いているんですけどね・・・。

 

解決に至ったのは、この記事を読んでもしかしたら! とおもったからです。

事件です!jQuery(window).height()が動かねぇ ~原因究明と解決まで~

 

DB処理追加したあとで、成功時と例外発生時にechoでメッセージを表示させていたことがダメでした。

 

テストで実際にDOCTYPE宣言がなくなっているところを

実際のコードとサイト、FirebugでのHTML画面で説明します。

DOCTYPEがなくなるテスト.php


<?php
echo "HTMLの外で暴れてやるぜー<BR>";
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DOCTYPEが無くなるテスト</title>
</head>
<body>
DOCTYPEがなくなるテスト
</body>
</html>

f:id:buzzword111:20131014030506p:plain