Javascript function not firing on window.onresize

Question

Javascript function not firing on window.onresize

2.6k Views Asked by rod122 At 05 February 2017 at 19:56

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;

Original Q&A

There are 5 best solutions below

**Anthony Krivonos** · Answer 1 · 2017-02-05T20:03:08.763000

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!

**homan** · Answer 2 · 2017-02-05T20:05:15.190000

homan On 05 February 2017 at 20:05

load resize action in body tag like this

<body onresize="resetHeight()">

**Christopher Reid** · Answer 3 · 2017-02-05T20:10:06.410000

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>

**Brian Smith** · Answer 4 · 2017-02-05T20:17:00.700000

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";  
});

});

**rod122** · Answer 5 · 2017-02-05T23:25:54.773000

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);     
  });

Javascript function not firing on window.onresize

There are 5 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ONRESIZE

Trending Questions

Popular # Hahtags

Popular Questions