How to execute code in resize function when the webpage loads without having to rewrite it outside the resize function in javascript (jquery)?

Question

It's kinda hard to explain for me, but I'll give an example.

Let's take this function:

$(window).resize(()=>{
    if(window.innerHeight < 500){
        $wrapper.height('100vh')
    }
    else{
        $wrapper.height('60vh')
    }
})

Of course this code doesn't execute without resizing the window, so I have to write it again outside the resize function, so it works all the time, just like that:

if(window.innerHeight < 500){
    $wrapper.height('100vh')
}
else{
    $wrapper.height('60vh')
}

Is there a way not to repeat the code like in the example above? Is there a function for this?

CertainPerformance · Accepted Answer · 2020-11-22 19:12:48Z

2

Write the callback you pass to .resize outside, once. Then, call it, and also pass it as a callback:

const handleResize = () => {
  if(window.innerHeight < 500){
      $wrapper.height('100vh')
  }
  else{
      $wrapper.height('60vh')
  }
};
handleResize();
$(window).resize(handleResize);

answered Nov 22, 2020 at 19:12

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to execute code in resize function when the webpage loads without having to rewrite it outside the resize function in javascript (jquery)?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related