CODEWITHSUNDEEP
javascriptjqueryfunction
neoxxx
neoxxx

Reputation: 71

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

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?

Upvotes: 0

Views: 23

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370729

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);

Upvotes: 2

Related Questions