Skip to content
Advertisements

JavaScript onresize Event

Why onresize ?

The JavaScript onresize feature works when the browser size changes. You can run this feature if you play with the size of the browser. There are websites that still use this feature, even if they are not used in today’s websites.

But it is possible to use it as follows; for example you have a web page. You made reponsive settings on this web page. But still, after a certain size, your web page’s image is deteriorating. This feature can be used to alert the user to that size.


JavaScript onresize Examples

Example 1

onresize example 1
<body onresize="resize()">
    <p>Change the size of the page</p>
    <p id="result"></p>
    
    <script>

        function resize() {
            let res = document.getElementById("result");
            let w = window.outerWidth;
            let h = window.outerHeight;
            let txt = "width=" + w + ", height=" + h;
            res.innerHTML = txt;
        }


    </script>
</body>

Example 2

onresize example 2
<body>
    <p>Change the size of the page</p>
    <p id="result"></p>
    
    <script>

        addEventListener("resize", resize);

        function resize() {
            let res = document.getElementById("result");
            let w = window.outerWidth;
            let h = window.outerHeight;
            let txt = "width=" + w + ", height=" + h;
            res.innerHTML = txt;
        }


    </script>
</body>

Example 3

onresize example 3
<body>

    <p>Height: <span id="height"></span></p>
    <p>Width: <span id="width"></span></p>

    <script>



        function resize() {
            const width = document.getElementById("height"),
                  height = document.getElementById("width");
            width.innerHTML = window.innerWidth;
            height.innerHTML = window.innerHeight;
        }
        window.onresize = resize;



    </script>
</body>

Example 4

onresize example 4
<body>

    <p>You have changed the size of the screen <span id="times"></span> times.</p>

    <script>

        addEventListener("resize", resize);
        let a = 0;
        function resize() {
            let times = document.getElementById("times");
            a += 1;
            times.innerHTML = a;
            
        }

    </script>
</body>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: