Javascript関数がwindow.onresizeで起動しない

jsを使用してフォームを垂直方向にセンタリングするための小さなスクリプトを作成しました。しかし、それはwindow.onresizeで動作していないように見えますし、その理由を理解できません。 BTWはwindow.onloadで完璧に動作し、window.onresizeは要求してもサイズ変更時に警告を発します。ここに私のコードです：Javascript関数がwindow.onresizeで起動しない

var resetHeight = function(){ 

    var loginForm = document.querySelector('.login-form'); 
    var windowHeight = window.innerHeight; 
    var topNavbarHeight = document.querySelector('.top-navbar').clientHeight; 
    var loginFormHeight = loginForm.clientHeight; 
    var footerHeight = document.querySelector('footer').clientHeight; 
    var totalHeights = loginFormHeight + topNavbarHeight + footerHeight + 90; 
    var halfHeight = (windowHeight-totalHeights)/2; 

    loginForm.style.paddingTop = halfHeight + "px"; 
    loginForm.style.paddingBottom = halfHeight+ "px";  

}; 

window.onload = resetHeight; 

window.onresize = resetHeight;

出典

2017-02-05 rod122

あなたのコードは、あなたが ''終了bodyタグの前にスクリプトを追加していることを確認し、すぐに呼び出される関数でラップしてみてください、それに何か問題ではないようです。このようなものhttps://jsbin.com/rexuvel/edit?html,js,output – azs06

あなたはウィンドウのサイズ変更時に必要な値を警告しようとしましたか？あなたはjQueryのソリューションを試してみる必要があります。

window.addEventListener('resize', resetHeight);

また、私はあなたのHTMLのタグ内onresize="resetHeight()"イベントリスナーを使用しようとするだろう。これがうまくいけば教えてください！

出典

2017-02-05 20:03:08

以前のコードはどうしたのですか？ – Rayon

JavaScriptが.onresizeリスナーをレンダリングするのは1回だけです。 HTMLのタグに移動すると、ボディサイズが変更されるたびにレンダリングされます。 –

これは動作します！ jqueryを使用せずにコードを実行できる解決策がありますか？ありがとう!!!!! – rod122

負荷がこの

<body onresize="resetHeight()">

出典

2017-02-05 20:05:15 homan

私はすでに持っているものとは何も変わりませんが、ありがとう – rod122

ない答えが、提案、あなたはCSSを使用することができたときに、なぜあなたは、このためにJavaScriptを使用するようにbodyタグでアクションをサイズ変更しますか？それはもっと優れたパフォーマンスを発揮し、より多くの人々をサポートします。ここではいつものコンテナの中央にdiv要素の単純な例です：

#centered { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div id="centered"> 
 

 
</div>

出典

2017-02-05 20:10:06 AllTheTime

こんにちは、提案のおかげで、これは私のためには動作しません。たぶん私はブートストラップを使っているから。 – rod122

@ rod122 はい、これは可能な最も簡単な方法です。あなたはおそらく私の言葉を聞くべきではありませんが、特にあなたのフォームがスーパーコンプレックスでない場合は、ブートストラップを使用しないことをお勧めします。それはより多くの制御を提供し、多くのクリーナー/小さなファイルになります。より少ないdiv、少ないクラス、少ないid、そしてこれらのものが実際にどのように動作するかをより深く理解して、制御できるようにします。また、javascriptを使用したレイアウトのパッチ適用は、パフォーマンスが向上し、さまざまなプラットフォームで予期せずグリッチが発生する可能性があるため、すべてのコストをかけて回避する必要があります。私は可能な限り小さなdivで最初から書いてみるべきだと思います。 – AllTheTime

あなたは、たとえば、これを行うためにjqueryのを使用して試みることができる：

$(document).ready(function(){ 
    $(window).resize(function() { 
    var loginForm = document.querySelector('.login-form'); 
    var windowHeight = window.innerHeight; 
    var topNavbarHeight = document.querySelector('.top-navbar').clientHeight; 
    var loginFormHeight = loginForm.clientHeight; 
    var footerHeight = document.querySelector('footer').clientHeight; 
    var totalHeights = loginFormHeight + topNavbarHeight + footerHeight + 90; 
    var halfHeight = (windowHeight-totalHeights)/2; 

    loginForm.style.paddingTop = halfHeight + "px"; 
    loginForm.style.paddingBottom = halfHeight+ "px"; 
}); 

});

出典

2017-02-05 20:17:00

これは、私が作ったjqueryの解決策（私にとって）。それは、バニラのjavascriptの答えを持つことは素晴らしいだろう。動作するはず

var resetHeight = function(){ 
    var loginForm = $(".login-form"); 
    var loginFormHeight = loginForm.height(); 
    var windowHeight = $(window).height(); 
    var topNavbarHeight = $('.top-navbar').height(); 
    var footerHeight = $('footer').height(); 
    var totalHeights = loginFormHeight + topNavbarHeight + footerHeight + 90; 
    var halfHeight = (windowHeight-totalHeights)/2; 
    loginForm.css({ 
    "padding-top":halfHeight, 
    "padding-bottom":halfHeight 
    }); 

} 

    $(document).ready(function(){ 
    resetHeight(); 
    window.addEventListener('resize', resetHeight);  
    });

出典

2017-02-05 23:25:54 rod122

Javascript関数がwindow.onresizeで起動しない

答えて

関連する問題