Onresize Event Attribute in HTML5

In this article I am going to describe about the implementation and use of onresize event attribute in HTML5.
  • 2875

Onresize event attribute in HTML5

The window is resized when the script to be run(onresize attribute is oftenly used when the browser window is resized).

onresize returns the element's onresize event handler code. It is also used to set the code to be executed when the resize event occurs.

Only the <var>window</var> object has an onresize event.

Note: Any element can be given an onresize attribute, however only the window object has a resize event. Resizing other elements  will not raise a resize event. 

Browser Support

It is supported in all major browsers.

Syntax

// Set onresize to an anonymous function
window.onresize = function(){alert('Window resized')}

// Set onresize to a function reference
function hello(){alert('Hi')}

window.onresize = hello;

// Show the value of window.onresize
alert(window.onresize);

Example

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>onresize event</title>

</head>

<body>

    <script type="text/javascript">

 

        function hello() {

            alert('Hi');

        }

 

        window.onresize = hello;

 

    </script>

    </head>

    <body>

        <input type="button"

            value="Click to show window.onresize"

            onclick="alert(window.onresize);">

    </body>

</html>

Output

onresize.jpg

After the button is clicked

onresize1.jpg

© 2019 DotNetHeaven. All rights reserved.