Load javascript on window resize

Question

Giving my different sections their own height to be able to make them overlap each other. I got it working, but the javascript only loads when the page refreshes.

Is it possible to add some code so that my code updates when the window size changes in real time?

And, I understand that my way of distinguishing the three different panels is a shortcut. Is it possible to write the code so that it calculates each unit by itself, which would make it easier if I want to add sections.

let div = document.querySelector(".panel-01")
        var height = document.querySelector(':root');
        height.style.setProperty('--height', div.clientHeight + "px");          

let div2 = document.querySelector(".panel-02")
        var height = document.querySelector(':root');
        height.style.setProperty('--height-2', div2.clientHeight + "px");          

let div3 = document.querySelector(".panel-03")
        var height = document.querySelector(':root');
        height.style.setProperty('--height-3', div3.clientHeight + "px");

.panel-01 {
    top:calc(100vh - var(--height));
}

.panel-02 {
    top:calc(100vh - var(--height-2));
}

.pangel-03 {
    top:calc(100vh - var(--height-3));
}

Literally .onresize ;) developer.mozilla.org/en-US/docs/Web/API/Window/resize_event — Foxcode
– Foxcode, Commented Sep 12, 2022 at 14:00
Wrap all the code that should be executed when the user resizes the window in that eventListener — Foxcode
– Foxcode, Commented Sep 12, 2022 at 14:26

Harsh Gaur · Accepted Answer · 2022-09-12 14:33:39Z

4

You should read about responsive Concept once. This concept will always be useful for you.

But if you want to perform any action when the window is resized, then this code will come in handy for you. In this way you can apply the resize event to the window. Whenever the window is resized, it will run the given function.

TRY TO RESIZE YOUR WINDOW AND SEE RESULT

window.addEventListener('resize', function(event){
    var newWidth = window.innerWidth;
    var newHeight = window.innerHeight;
    
    // Your code.
    // Exmple :
    document.getElementById("size").innerHTML = `newWidth: ${newWidth} , newHeight: ${newHeight}`;
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="size"></p>
    <script src="script.js"></script>
</body>
</html>

edited Sep 12, 2022 at 14:33

answered Sep 12, 2022 at 14:28

Harsh Gaur

13110 bronze badges

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

1 Comment

RASALGHUL Over a year ago

I'm aware of responsive css and html but not so much with js. This was very helpful. Thanks!!

Collectives™ on Stack Overflow

Load javascript on window resize

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related