Onresize Event Attribute in HTML5
In this article I am going to describe about the implementation and use of onresize event attribute in HTML5.
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
After the button is clicked
