jQuery function not working just reloading

Question

I have this function to adjust the page so that it does not scroll regardless of the device, it works at all, however, when you rotate the screen or when I change the device to inspect Google Chrome, the function does not work well, only if I do the reload on the page that works, I don't know what I'm doing wrong. I believe the problem is in the variable h, where it picks up the height, which doesn't pick up the height when modifying or rotating the device, but I'm not sure, I've tried everything

function changeSize() {
  let h = $(document).height();
  let he = $("header").height();
  let m = $("main").height();
  let f = $("footer").height();
  let l = $("ui-loader").height();
  let x = h - he - m - f - l;
  $("container").css('height', x + 'px');
}

$(document).ready(function() {
  changeSize();
  $(window).resize(function() {
    changeSize();
  });
};

You could try adding `deviceorientation` as an event handler? (i.e. `$(window).on('deviceorientation', changeSize);`) — freefaller, Jul 21 '20 at 14:22
Does this answer your question? [Will $(window).resize() fire on orientation change?](https://stackoverflow.com/questions/23996726/will-window-resize-fire-on-orientation-change) — Nawed Khan, Jul 21 '20 at 14:23
You already [asked this question yesterday](https://stackoverflow.com/questions/62995632/jquery-window-resize-not-working-just-reloading). For future reference, when asked to add detail to a question edit the existing one. Do not start a new one. — Rory McCrossan, Jul 21 '20 at 14:50

score 0 · Answer 1 · edited Jun 01 '22 at 06:24

The first issue I see is here:

  let he = $("header").height();
  let m = $("main").height();
  let f = $("footer").height();
  let l = $("ui-loader").height();
  $("container").css('height', x + 'px');

These do not select any element. Are they Class selectors or ID Selectors? I will assume Class selectors for my Example.

function changeSize() {
  let h = $(document).height();
  let he = $(".header").height();
  let m = $(".main").height();
  let f = $(".footer").height();
  let l = $(".ui-loader").height();
  let x = h - he - m - f - l;
  $(".container").css('height', x + 'px');
}

$(function() {
  changeSize();
  $(window).on("resize deviceorientation", changeSize);
};

Another issue I see here is that this does not capture any Padding or Margins.

jQuery function not working just reloading

1 Answers1