Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML onresize Event Attribute
The HTML onresize attribute is an event handler that triggers when the user resizes the browser window. This attribute is primarily used with the <body> element to detect window resize events and execute JavaScript functions in response to size changes.
Syntax
Following is the syntax for the onresize attribute −
<body onresize="script"> <!-- content --> </body>
Where script is the JavaScript code or function to execute when the window is resized.
Parameters
The onresize attribute accepts a single parameter −
- script − JavaScript code or function call to execute when the resize event occurs. This can be inline JavaScript or a function reference.
Basic Example
Following example demonstrates the HTML onresize event attribute with background color change −
<!DOCTYPE html>
<html>
<head>
<title>HTML onresize Event Attribute</title>
<style>
body {
font-family: Arial, sans-serif;
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
padding: 20px;
text-align: center;
}
</style>
</head>
<body onresize="resizeFn()">
<h1>HTML onresize Event Attribute Demo</h1>
<p>Resize the browser window to see the background change</p>
<p id="info">Original size</p>
<script>
function resizeFn() {
document.body.style.background = 'linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat';
document.getElementById('info').innerHTML = 'Window resized!';
}
</script>
</body>
</html>
The output initially shows an orange gradient background. When you resize the browser window, the background changes to a blue gradient and displays "Window resized!" message −
HTML onresize Event Attribute Demo Resize the browser window to see the background change Original size (on orange gradient background) After resizing: HTML onresize Event Attribute Demo Resize the browser window to see the background change Window resized! (on blue gradient background)
Displaying Window Dimensions
Following example shows how to display the current window dimensions using the onresize event −
<!DOCTYPE html>
<html>
<head>
<title>Window Dimensions with onresize</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
.dimensions {
font-size: 20px;
color: #333;
background: white;
padding: 15px;
border-radius: 5px;
margin: 20px 0;
}
</style>
</head>
<body onresize="updateDimensions()" onload="updateDimensions()">
<h1>Window Resize Tracker</h1>
<p>Resize the browser window to see the dimensions update in real-time.</p>
<div class="dimensions" id="dimensions">Loading...</div>
<script>
function updateDimensions() {
var width = window.innerWidth;
var height = window.innerHeight;
document.getElementById('dimensions').innerHTML =
'Window Width: ' + width + 'px<br>Window Height: ' + height + 'px';
}
</script>
</body>
</html>
This example shows the current window dimensions and updates them whenever the window is resized −
Window Resize Tracker Resize the browser window to see the dimensions update in real-time. Window Width: 1200px Window Height: 800px (updates dynamically when window is resized)
Responsive Layout Adjustment
Following example demonstrates using onresize to adjust layout based on window size −
<!DOCTYPE html>
<html>
<head>
<title>Responsive Layout with onresize</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.status {
padding: 10px;
margin: 10px 0;
border-radius: 4px;
font-weight: bold;
}
</style>
</head>
<body onresize="checkLayout()" onload="checkLayout()">
<div class="container">
<h1>Responsive Layout Detection</h1>
<p>This example detects different screen sizes and adjusts the layout accordingly.</p>
<div class="status" id="status">Checking layout...</div>
</div>
<script>
function checkLayout() {
var width = window.innerWidth;
var statusElement = document.getElementById('status');
if (width < 600) {
statusElement.innerHTML = 'Mobile Layout (Width: ' + width + 'px)';
statusElement.style.backgroundColor = '#ff6b6b';
statusElement.style.color = 'white';
} else if (width < 1024) {
statusElement.innerHTML = 'Tablet Layout (Width: ' + width + 'px)';
statusElement.style.backgroundColor = '#4ecdc4';
statusElement.style.color = 'white';
} else {
statusElement.innerHTML = 'Desktop Layout (Width: ' + width + 'px)';
statusElement.style.backgroundColor = '#45b7d1';
statusElement.style.color = 'white';
}
}
</script>
</body>
</html>
The layout detection changes the status message and color based on screen width −
Responsive Layout Detection This example detects different screen sizes and adjusts the layout accordingly. Desktop Layout (Width: 1200px) (blue background) Tablet Layout (Width: 800px) (teal background) Mobile Layout (Width: 480px) (red background)
Browser Compatibility
The onresize event attribute is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It is part of the HTML specification and works consistently across different platforms.
Key Points
- The onresize attribute is typically used with the
<body>element to detect window resize events. - The event triggers when the browser window dimensions change, including maximizing, minimizing, or manual resizing.
- Use
window.innerWidthandwindow.innerHeightto get current window dimensions inside the resize handler. - The onresize event can be used to create responsive layouts that adapt to different screen sizes.
- For better performance, consider debouncing resize events if performing heavy operations in the handler function.
Conclusion
The HTML onresize event attribute provides a simple way to respond to window size changes. It is commonly used for creating responsive layouts, updating dimensions, and adjusting content based on available screen space. The attribute works reliably across all modern browsers and integrates seamlessly with JavaScript functions.
163 Views
