How to trigger function when resizing window?

Question

I am trying to resize somediv when the window is manually resized.

<script>

(function resizeElement() {
    let height = window.innerHeight - 90;
    somediv.style.height = height + 'px';
    $( "#target" ).html( "<div>" + $( window ).width() + " , " \
        + $( window ).height() + "</div>" );
})();

// Listen for resize changes
window.addEventListener("resize", resizeElement);

</script>

This does not apply the function when the screen is resized. The following works but forces me to declare the function twice.

<script>

(function resizeElement() {
    let height = window.innerHeight - 90;
    somediv.style.height = height + 'px';
    $( "#target" ).html( "<div>" + $( window ).width() + " , " \
        + $( window ).height() + "</div>" );
})();

// Listen for resize changes
window.addEventListener("resize", function() {
  let height = window.innerHeight-90;
  somediv.style.height = height+'px';
  $( "#target" ).html( "<div>" + $( window ).width() + " , " + $( window ).height() + "</div>" );
}, false);

</script>

Any idea how I can avoid double declaring?

EDIT: How would it work if I wanted to make 90 a variable called somevar. How would I pass this?

EDIT SOLVED:

<script>

let padding_text = 90;

function resizeElement(padding_text) {
    let height = window.innerHeight - padding_text;
    somediv.style.height = height + 'px';
    $( "#target" ).html( "<div><i>w:" + $( window ).width() + " h:" + $( window ).height() + "</i></div>" );
};

// Listen for resize changes
window.addEventListener("resize", function() {
    resizeElement(padding_text);
}, false);

// Lets invoke it for the first time when the page loads
resizeElement(padding_text);

</script>

Can you add your html for a slightly more complete example for easier replication? At least the chunk containing somediv — basic
– basic, Commented Jan 23, 2019 at 19:31
The first one is a function expression. The function resizeElement literally does not exist at the moment you call addEventListener. — Felix Kling
– Felix Kling, Commented Jan 23, 2019 at 19:34

Arash Milani · Accepted Answer · 2019-01-23 19:43:29Z

You are evaluating resizeElement function just as declaring it, by putting it inside the parentheses; This syntax is An IIFE (Immediately Invoked Function Expression). IIFE is a JavaScript function that runs as soon as it is defined. scope enclosed within the Grouping Operator (), prevents accessing variables within the IIFE idiom as well as polluting the global scope.

This syntax makes the resizeElement function name unavailable for the scope out of that parentheses. Remove that immediate evaluation of that function and just add a single function call later.

function resizeElement() {
    let height = window.innerHeight - 90;
    somediv.style.height = height + 'px';
    $( "#target" ).html( "<div>" + $( window ).width() + " , " \
        + $( window ).height() + "</div>" );
}

// Listen for resize changes
window.addEventListener("resize", resizeElement);

// Lets invoke it for the first time when the page loads
resizeElement()

Ibu · Accepted Answer · 2019-01-23 19:31:38Z

1

Why do you need the self invoking function? Remove it and it should work.

<script>
function resizeElement() {
    let height = window.innerHeight - 90;
    somediv.style.height = height + 'px';
    $( "#target" ).html( "<div>" + $( window ).width() + " , "
        + $( window ).height() + "</div>" );
}
// Listen for resize changes
window.addEventListener("resize", resizeElement, false);
</script>

The reason it wasn't working is because you declared resizeElement in a scope not accessible to the event listener assignment.

answered Jan 23, 2019 at 19:31

Ibu

44k14 gold badges82 silver badges109 bronze badges

Collectives™ on Stack Overflow

How to trigger function when resizing window?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related