CODEWITHSUNDEEP
javascriptwindow-resize
Kishore
Kishore

Reputation: 789

Dynamically change div height with window resize

I wanted to change height of a div when window is resized. I know it can be done with css using height:100%; but that doesn't work on what i need. I wanted to make this happen in pure javascript without JQuery or any other framework.

Here is what i have done:

<div id="left">
<div id="inner">

</div>
</div>

CSS

#left{

margin-top:40px;
width:200px;
height:576px;
background:white;

}
#inner{

height:100%;
overflow-y:scroll;
}

JAVASCRIPT

window.onload=
window.onresize=function(){
var left=document.getElementById('left');
var window_height = window.innerheight;
if ( window_height > 600px ) { left.style.height = document.body.offsetHeight
+"px";    } 
else { } 
}

The div with id left has to have the same margin. I just wanted to change the height of div to match the inner window height (in px no %).

Thank You.

Upvotes: 4

Views: 21885

Answers (3)

TwistedOwl
TwistedOwl

Reputation: 1324

For those looking for old-school solution that uses debounce based on timeouts, here is what you can do:

function debounce(func, wait = 20, immediate = true) {
  let timeout;
  return function() {
    const context = this,
      args = arguments;
    const later = function() {
      timeout = null;
      if (!immediate) { func.apply(context, args); }
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) { func.apply(context, args); }
  };
}

function updateHeight(div, height) {
  div.style.height = `${height}px`;
}

window.addEventListener('resize', debounce(() => {
  const div = document.querySelector('.selector');
  updateHeight(div, 50);
}));

Debounce will throttle updates down (by default update will fire every 20ms during resizing). Note you need to update updateHeight arguments and .selector to match your div.

Upvotes: 0

caoglish
caoglish

Reputation: 1361

please see jsfiddle jsfiddle

try to use console.log to know what kind of value or object you dealing with

window.onload = window.onresize = function () {
    var left = document.getElementById('left');
    var window_height = window.innerHeight;
    console.log(left.offsetHeight);
    console.log(window_height);
    if (left.offsetHeight < window_height) {
        left.style.height = window_height + "px";

    } else {}
}

set 100% first to know the exact height number, then assign back to height.

updated code updated jsfiddle

window.onload = window.onresize = function () {
    var left = document.getElementById('left');

    console.log(left.offsetHeight);
    var window_height = window.innerHeight;

    if (left.offsetHeight < window_height) {
        left.style.height = '100%';    
        left_height=left.offsetHeight;
        console.log(left_height);
        left.style.height = left_height + "px";

    } else {}
};

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1075567

window.innerheight should be window.innerHeight (capital H). Note that IE doesn't support it prior to IE9.

Also note that you're comparing an element with a number here:

if ( left < window_height )
//   ^--- element

You probably wanted to get the height from left instead, as that condition will never be true.

Upvotes: 2

Related Questions