update variables on window resize

Question

i must be missing something simple here, so dont shoot me down, i need to update the variables on resizing the window so the div fits 100% the width and height of the window ,but for some reason they don't update (div does not resize), the console log gets called so the resize function is working ..

what i am looking to achieve is always have the div always be 100vw and 100vh on document start and window resize. i know i could do this with css but for this project thats not an option

the div which needs to scale responsively is "slider wrapper" which is having the size set by the vars " slide-width" and "slider-height"

any help would be greatly appreciated

<script>
  // declare the variables

  var slideWidth = window.innerWidth; // width of each image slide(also sets the 
  width of the overall slider)
  var sliderWidth = slides * slideWidth; // gets and sets the width of slider (do no 
  change)
  var sliderHeight = window.innerHeight;

  //set widths and height on start
  $(document).ready(function(event) {
    $('.slide').css({
      'width': slideWidth
    });
    $('.slider').css({
      'width': sliderWidth
    });
    $('.slider-wrapper').css({
      'width': slideWidth
    });

    $('.slider-wrapper').css({
      'height': sliderHeight
    });


  });

  //update variables on resize

  window.addEventListener("resize", function(event) {
    console.log("resized")
    sliderHeight = window.innerHeight;
    slideWidth = window.innerWidth;
    sliderWidth = slides * slideWidth;
  });
</script>

Answer 1

You need to ensure the resize function (In this case setting of width and height) is called everytime the window resize is triggered, example below:

// declare the variables
var slideWidth = window.innerWidth; // width of each image slide(also sets the width of the overall slider)
var sliderWidth = slides * slideWidth; // gets and sets the width of slider (do no change)
var sliderHeight = window.innerHeight;

function updateSize() {
  $('.slide').css({
    width: slideWidth,
  });
  $('.slider').css({
    width: sliderWidth,
  });
  $('.slider-wrapper').css({
    width: slideWidth,
  });
  $('.slider-wrapper').css({
    height: sliderHeight,
  });
}

// set widths and height on start
$(document).ready(function (event) {
  updateSize();
});

// update variables on resize
window.addEventListener('resize', function (event) {
  console.log('resized');
  sliderHeight = window.innerHeight;
  slideWidth = window.innerWidth;
  sliderWidth = slides * slideWidth;
  updateSize();
});