Auto height resize window jquery

Question

Auto height resize window jquery

Navigation

#1 by (4 votes)
#2 by (-1 votes)

1

With the following code, I select the elements to apply as the height of the browser; but later, when I size the browser, the height does not change.

function init_heght(element) {
    var y = $(window).height();
    $(element).css('height', y);
};

init_heght('#section-left-menu');
init_heght('#section-rigth-content');
init_heght('.overlay');

javascript jquery

asked by Jerson 12.03.2017 в 05:11

source

2 answers

I open a modal form in ASP.NET MVC and it appears as inactive Show message result not found

score 4 · Answer 1

You do not need to do it with JavaScript, with CSS it's enough for you:

#section-left-menu,
#section-right-content,
.overlay {
  height: 100vh;
}

Even so if you want to do it with JavaScript, you need to add a handler to the resize event so that you update the height of those elements when resizing the viewport:

window.addEventlistener('resize', function () {
  init_height('#section-left-menu');
  init_height('#section-rigth-content');
  init_height('.overlay');
});

score -1 · Answer 2

It would also be important to use a timer link as it is very expensive to modification of the DOM.

(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();

       // The actualResizeHandler will execute at a rate of 15fps
       }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event
    ...
  }

}());