CODEWITHSUNDEEP
javascript
racket99
racket99

Reputation: 655

How to trigger function when resizing window?

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>

Upvotes: 2

Views: 975

Answers (2)

Arash Milani
Arash Milani

Reputation: 6308

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

Upvotes: 2

Ibu
Ibu

Reputation: 43850

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.

Upvotes: 1

Related Questions