Javascript function not firing on window.onresize
Question
I have created a small script to center a form vertically using js. However, it does not seem to work with window.onresize and I dont understand why. BTW it works perfect on window.onload and the window.onresize will fire an alert on resize if I ask it to. Here is my code:
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;
5 answers
solution1
0 2017-02-05 20:03:08
Have you tried alerting your required values upon window resize? You should give the JQuery solution a try:
window.addEventListener('resize', resetHeight);
Also, I would try using the onresize="resetHeight()" event listener inside the tag of your HTML. Let me know if this works!
solution2
0 2017-02-05 20:05:15
像这样在body标签中加载调整大小的动作
<body onresize="resetHeight()">
solution3
0 2017-02-05 20:10:06
Not an answer, but a suggestion, why would you use javascript for this when you can use CSS? It will perform much better and support more people. Here is a simple example of a div that is always centered in it's container:
#centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: red; width: 100px; height: 100px; }
<div id="centered"> </div>
solution4
0 2017-02-05 20:17:00
You could try using jquery to do this for example:
$(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";
});
});
solution5
0 2017-02-05 23:25:54
This is a jquery solution I wrote that works (for me). It would be great to have a vanilla javascript answer.
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);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.